Editor Ratings: User Ratings:[Total: 0 Average: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(min-breedte: 500px) {.ilfs_responsive_below_title_1 { breedte: 300px; } } @media(min-breedte: 800px) {.ilfs_responsive_below_title_1 { breedte: 336px; } }
Figma Nocode is een gratis plug-in voor Figma om een ontwerp in HTML-formaat te exporteren. U selecteert gewoon de laag die u wilt opslaan en vervolgens kunt u deze als HTML-bestand exporteren. Het converteert op intelligente wijze alle componenten in uw ontwerp naar HTML-blokken en geeft u de uiteindelijke HTML waarin CSS automatisch is ingebed. Dus, afgezien van HTML, genereert het ook CSS-code. Het beste is dat er maar 2 klikken nodig zijn om een deel van het Figma-ontwerp of het hele frame naar HTML te converteren.
Als u Figma regelmatig gebruikt om UI-prototypes te maken, dan zult u deze plug-in hier leuk vinden. Hiermee kunt u het Figma-ontwerp met slechts een paar klikken exporteren naar een HTML-ready website. Voor sommige elementen, zoals schakelaars en knoppen, kan het echter mislukken. Maar voor andere componenten zoals tabellen, alinea’s, tekstovergangen, stijl en andere werkt het perfect. De uiteindelijk gegenereerde HTML is ook responsief en u zult dus minimale aanpassingen moeten doen om het te laten werken.
Hoe kan ik Figma gratis exporteren naar een enkele pagina HTML-website?
Deze plug-in Figma Nocode is volledig gratis te gebruiken. Een klein minpuntje is dat de hoofdtaal van deze tool in het Chinees is. Maar dat zal geen probleem zijn, want je hoeft alleen maar op eenvoudige knoppen te klikken die ik je hieronder zal laten zien.
Open Figma en open het ontwerp dat je naar HTML wilt exporteren. Als u nog geen account heeft, kunt u deze hier gratis registreren. Nadat uw ontwerp is geopend, selecteert u gewoon het bovenliggende frame of de laag die u wilt exporteren.
Ga daarna naar het gedeelte met plug-ins en selecteer de optie”Meer plug-ins zoeken”.
Zoek naar Figma Nocode en druk vervolgens op de knop Uitvoeren. De plug-in wordt nu weergegeven. En het zal uw selectie detecteren.
Klik op de gemarkeerde knop en het zal beginnen met het weergeven van uw ontwerp. Als het klaar is, zal het je dat laten zien met een groene banner.
Download nu gewoon de HTML. Klik op de optie 3dots en klik vervolgens op de HTML-knop. Het HTML-bestand wordt nu gedownload. Sla dit bestand op en open het vervolgens in de browser. Je zult zien dat dit ene bestand zowel HTML als CSS heeft.
Dit is het zo’n beetje. Op deze manier kunt u deze plug-in blijven gebruiken om uw Figma-ontwerp om te zetten naar pure HTML en CSS. Het enige dat nodig is, zijn 2 klikken, je hebt het HTML-bestand dat je op je pc kunt opslaan. Zodra je de definitieve code hebt, ben je vrij om te doen wat je wilt.
Laatste gedachten:
Figma Nocode is een geweldige Figma-plug-in die je kunt gebruiken. Ik hield van de manier waarop het werkt en als je Figma te vaak gebruikt, kun je het gewoon op elk moment gebruiken. U kunt elk website-ontwerp dat u hebt gemaakt openen en exporteren als gebruiksklare HTML. Het is heel eenvoudig om van een ontwerp een website met één pagina te maken en de nauwkeurigheid is ook geweldig. Probeer het dus zelf uit en kijk of het een nauwkeurige website voor u genereert.
