Figma naar code: handoff voor developers
Leer hoe je designs naadloos overdraagt aan je development team. We laten zien hoe je specs maakt, assets exporteert en de kloof tussen design en code verkleint.
Waarom handoff belangrijk is
De overgang van design naar development is cruciaal. Developers hebben niet alleen mooie plaatjes nodig — ze willen gedetailleerde specs, juiste kleuren, fonts en spacing. Zonder goede handoff ontstaat frustratie, fouten en veel heen-en-weer-mailen.
Het goede nieuws? Figma maakt dit veel makkelijker dan vroeger. Met de juiste voorbereiding kun je je team in één keer alles geven wat ze nodig hebben. Je spaart tijd en voorkomt miscommunicatie.
Stap 1: Voorbereiding in Figma
Goede voorbereiding bespaart later uren. Zorg dat je Figma-bestand schoon en goed georganiseerd is voordat je het overdraagt.
Naming Convention
Gebruik consistent naamgeving voor frames, componenten en elementen. Iets als “Button/Primary/Large” is veel beter dan “button 1” of “B1”. Developers herkennen dit meteen en weten wat ze aanpakken.
Component Library
Zorg dat alle herbruikbare elementen als componenten zijn ingesteld. Dit helpt developers begrijpen welke elementen samenwerken en welke variant ze moeten gebruiken.
Design Tokens
Documenteer je design tokens: 8 kleuren, 6 font-maten, 4 spacing-waarden. Dit maakt het voor developers veel duidelijker hoe alles samenhangt.
Stap 2: Gedetailleerde specs maken
Developers willen niet gaan raden. Ze willen weten: welke kleur precies, welke font, hoeveel spacing. Maak dit allemaal duidelijk.
In Figma kun je dit op verschillende manieren doen. Je kunt een apart bestand maken voor specs, of je gebruikt de ingebouwde inspectie-tools. Het belangrijk is dat alles documented staat. Zorg dat elke button, elke input, elk card-component duidelijk beschreven is met de exacte waarden.
Pro tip: Maak een “Specs” pagina in je Figma-bestand en plaats hier alle measurements, kleuren en typography-richtlijnen. Dit wordt je developers’ beste vriend.
Stap 3: Assets correct exporteren
Assets exporteren is meer dan alleen “download PNG”. Je moet nadenken over formaten, resoluties en bestandsnamen.
SVG voor iconen
Iconen moeten als SVG, niet als PNG. Dit maakt ze schaalbaar en makkelijker te stylen met CSS. Zorg dat je iconen zonder achtergrond exporteert.
Webp voor foto’s
Voor foto’s en complexere afbeeldingen: gebruik WebP-formaat. Dit is kleiner in bestandsgrootte dan PNG maar ziet er beter uit. Exporteer in 2x resolutie voor retina-schermen.
Duidelijke bestandsnamen
Niet “asset-1.svg”, maar “icon-arrow-right.svg”. Developers moeten meteen snappen wat het is.
Nuttige tools voor handoff
Je hoeft niet alles handmatig te doen. Deze tools maken handoff veel makkelijker.
Figma Inspect
Dit is ingebouwd in Figma zelf. Developers kunnen op elementen klikken en meteen alle specs zien: kleur, font-size, padding, alles. Heel handig en kosteloos.
Zeplin
Een dedicated platform voor design handoff. Je exporteert je design vanuit Figma en Zeplin genereert automatisch alle specs en maakt assets beschikbaar. Handig voor grotere teams.
Storybook
Voor teams die veel met componenten werken. Storybook documenteert alle component-varianten in code. Je developers kunnen alle mogelijkheden meteen zien en ermee testen.
Design tokens
Tools zoals Tokens Studio voor Figma laten je design tokens beheren en direct exporteren naar code. Heel powerful voor consistent branding.
Het handoff-proces stap voor stap
Dit is hoe het in de praktijk werkt bij veel teams.
Voorbereiding (1-2 dagen)
Je organiseert je Figma-bestand, maakt naming consistent, documenteert alle specs en zet alles in een mooie order.
Assets exporteren (1 dag)
Je exporteert alle assets in de juiste formaten (SVG, WebP, etc.) en geeft ze duidelijke namen. Zet alles in een georganiseerde mappenstructuur.
Delen met het team (1 dag)
Je geeft developers toegang tot je Figma-bestand of gebruikt een tool als Zeplin. Je laat ze zien waar ze specs vinden en hoe ze assets kunnen gebruiken.
Feedback loop (ongoing)
Developers zullen vragen hebben. Zorg dat je beschikbaar bent en snel kan antwoorden. Dit fase duurt meestal 1-2 weken afhankelijk van projectgrootte.
“Een goed handoff scheelt ons weken werk. Wanneer specs duidelijk zijn, weten we precies wat we moeten bouwen. Geen giswerk, geen extra meetings.”
— Lars, Lead Developer
5 tips voor succesvol handoff
Communiceer van het begin
Vraag developers vroeg in het design-proces al wat ze nodig hebben. Zo voorkom je verrassingen en mislukken.
Test het in werkelijkheid
Laat een developer je specs en assets gebruiken voordat je ze “officieel” overdraagt. Vang fouten vroeg.
Wees specifiek
Zeg niet “grijze achtergrond”, zeg “#E8EBF0”. Zeg niet “grote button”, zeg “48px hoogte met 1rem padding”. Precisie wint.
Documenteer alles
Niet alleen het bestand zelf, maar ook een readme of wiki waar je uitlegt hoe alles werkt. Dit helpt onboardingva nieuw team-leden ook.
Hou design files up-to-date
Als je design aanpassingen maakt na handoff, update je Figma-bestand. Hou developers in de loop zodat ze niet met oude specs werken.
Veel voorkomende fouten
Dit zijn de dingen die we zien gaan mis in veel handoffs.
Incomplete specs
Developers krijgen kleuren en fonts, maar niets over hover-states, focus-states of error-states. Zorg dat je alle mogelijke states documenteert.
Assets in verkeerde formaten
PNGs die SVG moeten zijn, of JPGs waar WebP beter werkt. Dit zorgt voor performance-problemen en frustratie.
Geen responsive breakdown
Je design ziet er op desktop goed uit, maar hoe ziet het er op mobiel uit? Developers moeten dit weten. Toon breakpoints op 320px, 768px en 1024px.
Klaar voor handoff?
Goede handoff is een investering die zich direct terugbetaalt. Minder miscommunicatie, sneller development, beter eindresultaat. Het begint allemaal met voorbereiding, duidelijkheid en goede organisatie in Figma.
Zorg dat je design-bestand schoon is, je specs compleet, je assets correct geformatteerd en je team weet waar ze alles vinden. Dan kan development beginnen met vertrouwen — en dat maakt echt verschil.
Tip: Begin klein. Als dit je eerste keer is met handoff, kies één project om alle tips uit dit artikel toe te passen. Leer ervan, verbeter je proces, en de volgende keer gaat het nog beter.
Disclaimer
Dit artikel is informatief en is bedoeld om je kennis over design handoff en Figma workflows te vergroten. De specifieke tools, formaten en processen die we beschrijven kunnen variëren afhankelijk van je project, team-grootte en technische vereisten. Altijd het beste is om binnen je eigen team af te spreken wat het handoff-proces is en welke tools jullie gebruiken. Figma-functionaliteiten en beschikbare export-opties kunnen veranderen. Zorg dat je altijd de meest recente Figma-documentatie raadpleegt.
