Hoe ik ontwerp in Figma

Inhoudsopgave

• Waarom eerst Figma en niet direct Webflow?
• Hoe is mijn Figma-bestand opgebouwd?
• Wat gaat er van Figma naar Webflow?

Veel mensen denken dat ik direct in Webflow begin als ze een project starten. Dat klopt niet. Elk project begint in Figma en blijft daar totdat elke pagina goedgekeurd is. Pas dan begin ik te bouwen. Hier is waarom en hoe dat er in de praktijk uitziet.

Waarom eerst Figma en niet direct Webflow?

Aanpassingen in Figma kosten minuten. Aanpassingen in Webflow kosten uren. Als ik een sectie redesign in Webflow moet ik de layout herbouwen, de CSS aanpassen en controleren of het op mobiel nog klopt. In Figma sleep ik een frame op een andere plek en klaar. Hoe vroeger in het proces je feedback verwerkt, hoe goedkoper het is. Dat is wiskunde, geen filosofie.

Hoe is mijn Figma-bestand opgebouwd?

Elk Figma-bestand begint met een component-bibliotheek. Typografie, kleuren, knoppen, formulieren en kaarten, allemaal als component. Vervolgens bouw ik pagina's op met die componenten. Dat maakt aanpassingen snel, want als de kleur van een knop verandert verandert hij overal tegelijk.

Per pagina maak ik een desktop-versie en een mobiele versie. Niet als losse afterthought, maar als integraal onderdeel van het design. Webflow bouwt responsive van rechts naar links, dus het mobiele design beïnvloedt direct hoe ik in Webflow breakpoints instel.

Wat gaat er van Figma naar Webflow?

Het design gaat over als specificaties en niet als pixels. Ik gebruik Webflow's variabelen voor kleuren en typografie zodat het ontwerp consistent blijft. Spacing, border-radius en shadow-waarden komen rechtstreeks uit de Figma-tokens. Het eindresultaat in Webflow ziet er pixel-perfect hetzelfde uit als in Figma. Dat is de standaard, niet de uitzondering.