De Kloof tussen Designer en Developer
Het moment waarop je je design aan je developer geeft, is cruciaal. Je hebt maanden aan Figma gewerkt, wireframes gemaakt, prototypes gebouwd, feedback van klanten ingewerkt. Dan staat die developer voor je scherm met drie vragen: “Wat zijn precies de paddings hier? Hoe gedraagt dit component zich op mobile? En waar zijn de specs voor deze animatie?”
Dit hoeft niet. Een goed handoff betekent dat je developer alles vindt wat ie nodig heeft. Geen vragen meer. Geen raden naar waardes. Geen terugkomen met “dit ziet er anders uit dan in jouw design”.
Wat je Developer Echt Controleert
Developers kijken eerst naar drie dingen in je Figma-file. Niet naar je design, maar naar de implementatiedetails. Ze willen weten: klopt de spacing? Zijn de font-sizes consistent? Werken de breakpoints logisch?
De meeste designers geven een file door met mooie frames, maar zonder de onderliggende structuur. Dan gaat je developer gokken. Padding 16px of 24px? Spatie tussen elementen vaste pixels of flexibel? En die button — gedraagt die zich hetzelfde op tablet als op desktop?
Je moet het expliciet maken. Niet alleen zeggen “hier is mijn design”, maar: “hier zijn mijn componenten, zo werken ze, dit zijn de specs, en zo moeten ze zich op verschillende schermen gedragen”.
De Checklist: Dit Moet in Je File
Je hebt waarschijnlijk veel al gedaan. Maar zorg dat dit allemaal duidelijk in je Figma staat:
“Ik haat het moment waarop de design-file aankomt en ik moet al tien keer terugvragen. Dat geeft aan dat de designer het niet helemaal doordacht heeft voor development.”
Responsive Gedrag Moet Duidelijk Zijn
Dit is waar het misgaat. Je maakt mooie designs voor desktop. Dan vraagt je developer: “Wat gebeurt er op 600px? Stapelen die elementen? Verandert de font-size? Gaat dit component verbergen?”
Je kunt hier twee dingen doen. Ofwel maak je in Figma frames voor desktop, tablet en mobile — en zorg dat alles consistent is. Ofwel schrijf je het uit. “Op screens kleiner dan 768px: stack verticaal, padding wordt 16px i.p.v. 24px, font-size wordt 14px.”
Veel developers zeggen: geef mij gewoon één desktop-design en ik zal het responsive maken. Dat werkt, maar je mist kansen om op mobile echt optimaal te ontwerpen. Touch targets moeten groter zijn. Kolommen passen niet meer naast elkaar. Dus: maak minstens drie breakpoints.
Annotaties die Echt Helpen
Je hoeft niet alles uit te tekenen. Maar waar het ingewikkeld wordt, schrijf het op. Een goeie annotatie is niet “mooi design”, maar “deze card groeit mee met content, max-width 400px”.
Denk zoals een developer. Wat wil je dat ie weet? Dat je een mooi kleurenpaletje hebt? Nee. Je wilt dat ie weet:
- Hoe gedraagt dit component zich als de tekst langer is?
- Moet deze spacing vaste pixels zijn of flexibel?
- Wat gebeurt er als een afbeelding niet laadt?
- Zijn er states die ik niet zie (hover, active, disabled)?
- Hoeveel tijd mag een animatie duren?
Deze vragen beantwoord je door goed in Figma te werken. Niet door “hier is mijn design, veel sterkte”.
De Template: Copy-Paste Ready
Ik gebruik dit zelf voor elk project. Maak een “Design Specs” pagina in je Figma-file. Niet als aparte doc, maar recht in Figma. Dan hoeft je developer niet tussen tien tabs heen en weer te gaan.
In die pagina zet je:
1. Spacing Scale
--spacing-xs: 4px
--spacing-sm: 8px
--spacing-md: 16px
--spacing-lg: 24px
--spacing-xl: 32px
--spacing-2xl: 48px
2. Typography
H1: 32px / 40px (desktop), 28px / 36px (mobile)
H2: 28px / 36px (desktop), 24px / 32px (mobile)
Body: 16px / 24px
Small: 14px / 20px
3. Breakpoints
Mobile: 320px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+
Wat je Nu Doet
Je hebt een design klaar. Volg deze stappen voor je het aan je developer geeft:
- Maak een “Design Specs” frame met alle tokens en breakpoints.
- Zorg dat alle componenten in je library staan, met variants voor states (hover, active, disabled).
- Maak frames voor minstens drie breakpoints — en toon hoe content zich gedraagt.
- Annoteer de moeilijke onderdelen. “Spacer tussen elementen groeit flexibel” of “deze animatie duurt 300ms”.
- Activeer “Inspect” mode in Figma zodat je developer makkelijk specs kan zien.
- Zet een doc-link in je brief: hier zijn de specs, hier zijn de componenten, hier zijn de breakpoints.
Dit kost je een halve dag extra. Je developer spaart er twee dagen mee uit. Dat is winst.
