Van Figma naar live: een handover-checklist die echt werkt

Wij krijgen ongeveer 80% van onze designs via Figma. En in 80% van die handovers ontbreekt minstens één van de twaalf dingen hieronder. Niet erg — maar elk ontbrekend stuk is een berichtje, een aanname van onze kant, en achteraf vaak een "het ziet er toch anders uit dan in design"-correctie.

Hier is de checklist die we onze agency-partners doorsturen vóór ze hun design overhandigen.

1. Auto-layout, geen absolute positioning

Auto-layout maakt expliciet wat de spacing-regel is. Absolute positioning vertelt ons enkel waar het pixel-toevallig staat bij 1440px.

2. Design tokens als variables

Kleuren, spacing, typografie, radius, shadows — als variables. Wij vertalen die 1-op-1 naar CSS-variables. Hardcoded waarden in elk frame is werk voor ons en bug-bron voor jou.

3. Alle states getekend

Voor elke interactieve component:

• Default
• Hover
• Active / pressed
• Focus (toegankelijkheid!)
• Disabled
• Loading (als er een async actie is)
• Empty (geen data)
• Error (gefaald)

Een button zonder hover-state betekent dat wij er één verzinnen. Onze gok is meestal goed, maar het is een gok.

4. Responsive breakpoints expliciet

Liefst drie versies: desktop (1440), tablet (768) en mobiel (375). Vier als jullie ook 1920 belangrijk vinden. Geen drie betekent extrapoleren — wat een afspraak vereist die niet in design staat.

5. Edge cases voor content

Wat als:

• De gebruikersnaam 50 karakters lang is?
• De hero-titel maar één woord is?
• Er geen profielafbeelding is?
• De productlijst leeg is?
• De prijs €1.234.567,89 is?

Voor webshops op maat is dit cruciaal. Zonder edge cases bouwen wij iets dat fantastisch werkt voor jouw mockup-data en breekt bij echte producten.

6. Naming-conventie

Page > Section > Component. Voorbeeld: Home > Hero > Primary Button. Niet: Group 47 / Frame 12 / Rectangle Copy 3. Onze code-bestanden krijgen deze namen, dus help ons (en je toekomstige zelf).

7. Iconen als SVG-componenten

Geen pixel-platte exports. SVG components, ge-rastered uit een icon-library (Lucide, Phosphor, Tabler) of een eigen set met expliciete viewbox.

8. Fonts: licentie en bestanden

• Licentie-bewijs (zelfgehoste fonts) of het Google Fonts/Adobe Fonts-handle.
• WOFF2 + WOFF bestanden, of de Google embed-URL.
• Specifieke weights die je gebruikt (niet "Regular tot Black" als je alleen 400 en 600 gebruikt — dat is 600KB extra laden).

9. Assets in de juiste vorm

• Foto's: WebP of AVIF, plus een JPG fallback. 2x retina-versie als nodig.
• Iconen: SVG (zie 7).
• Logo's: SVG. Plus een PNG voor email-signatures e.d.
• Bestandsnamen: kebab-case, beschrijvend. team-portrait-jonas.webp, niet IMG_5638.JPG.

10. Echte copy, geen Lorem Ipsum

Lorem Ipsum is altijd korter dan echte tekst, en altijd langer dan een echte titel. Bouwen op fake copy en achteraf echte erin gooien = layout-bug.

Bij ons regel: minimaal 70% echte copy bij handover. Als de copy nog niet af is: gebruik realistische placeholder-lengtes ("Wij bouwen razendsnelle websites met een vaste prijs en zonder gedoe.") in plaats van Lorem.

11. Interactiviteit beschreven

Animaties, hover-effecten, page transitions, scroll-effecten — niet alleen tekenen, beschrijven. Eén Loom-video van 2 minuten "zo wil ik dat het beweegt" voorkomt dagen aan over-en-weer.

12. Een "Open vragen"-frame

Eén frame, helemaal achteraan in het Figma-bestand, waar jij zelf je twijfels noteert: "Moet de filter in de URL? Wat als er meer dan 12 items zijn? Welke states heeft de bestelflow op mobiel?"

Wij pakken dat frame als eerste — en als wij niets vinden, vinden we ook geen verrassingen tijdens build.

Hoe wij dit gebruiken

Voor elke nieuwe build doen we een 30-minuten "design-leesbeurt" voor we beginnen. Als deze checklist 80%+ groen staat, kan de build starten zonder vraag. Anders sturen we hem terug met een lijstje. Geen verwijt — gewoon: scheelt jullie tijd later.

→ Onze aanpak voor websites → Stuur een design door en we nemen het mee