Design handoff is al een opgelost probleem voor menselijke ontwikkelaars sinds circa 2016. Zeplin, InVision Inspect, Avocode, Figma's eigen Dev Mode — ze doen allemaal hetzelfde: geeft een ontwikkelaar een webinterface waarop hij op een knooppunt kan klikken en de eigenschappen kan lezen.

Die workflow werkt totaal niet wanneer de "ontwikkelaar" een AI-agent is.

Dit artikel legt uit waarom, wat agents daadwerkelijk nodig hebben, en hoe een handoff-workflow te structureren die correcte code oplevert in plaats van benadering. De oplossing is figmascope — een browsergebaseerd hulpmiddel dat een gestructureerde contextbundel rechtstreeks vanuit uw Figma-bestand exporteert. Voor de stapsgewijze workflows, zie Figma naar Claude Code of Figma naar Cursor.

De aanname van design handoff

Elk handoff-hulpmiddel gebouwd vóór 2023 maakt dezelfde impliciete aanname: er is een mens aan de andere kant die rondklikt, waarden leest en beoordelingsoproepen doet. De taak van het hulpmiddel is om informatie duidelijk genoeg bloot te stellen zodat een bekwame ontwikkelaar ermee kan werken zonder constant terug te schakelen naar de ontwerper.

Deze aanname is ingebakken in de gehele UX van deze hulpmiddelen:

Niets hiervan is verkeerd. Het is correct voor de menselijke ontwikkelaarsworkflow. Het is gewoon de verkeerde interface voor een agent.

Wat agents daadwerkelijk nodig hebben van een ontwerp

Een AI-agent die een ontwerptaak ontvangt heeft nodig:

  1. Een specificatie die hij leest voordat hij iets doet — beperkingen, reikwijdte, token-naamgevingsconventies, versienotities. Niet geïmpliceerd door over een paneel te hoveren; expliciet uitgeschreven.
  2. Een getypeerd token-woordenboek — geen ruwe hexwaarden en pixelnummers, maar benoemde, getypeerde tokens met hun waarden. De agent moet weten dat #d96a3a color.accent is zodat hij correcte Tailwind-klasse namen of CSS-aangepaste eigenschappen kan genereren.
  3. Een volledig schermindelingsboom — de hiërarchie van elk knooppunt, hun indelingsrelaties, hun afmetingen, hun tokenreferenties. Niet één knooppunt tegelijk op verzoek; de volledige boom in geheugen.
  4. Geconsolideerde tekenreeksen — alle tekstinhoud, genormaliseerd, met resourcesleutels. Niet verspreid over individuele knooppunten.
  5. Visuele grondwaarheid — een referentieweergave die de agent kan vergelijken met zijn uitvoer. Een screenshot van het ontwerp op 2×.
  6. Componentnamen — canonieke identifiers die de gegenereerde code moet gebruiken, geen verzonnen namen.

Traditionele handoff-hulpmiddelen leveren geen van deze in een vorm die een agent kan gebruiken. De figmascope-app produceert ze allemaal in één zip — plak uw Figma-URL, ontvang de bundel. Geen upload, geen backend. Het tokenformaat wordt uitgebreid behandeld in Design Token Export voor AI Agents.

Waarom screenshots mislukken

De snelste omweg die mensen proberen: exporteer een PNG vanuit Figma en geef het aan de agent met een prompt zoals "implementeer dit scherm." De agent produceert code. Soms ziet het er dicht bij uit. Maar:

Elk van deze fouten is afzonderlijk klein. Samen optellen tot een component dat aanzienlijke handmatige correctie vereist — wat de meeste tijdbesparingen van het gebruik van een agent tenietdoet.

Zie waarom screenshots mislukken voor AI codegen voor een gedetailleerde uiteenzetting met voorbeelden.

Een screenshot vertelt de agent hoe het ontwerp eruitziet. Gestructureerde context vertelt hem wat het ontwerp is.

De traditionele handoff-hulpmiddelen beoordeeld

Zeplin

Zeplins primaire interface is een web-app waar ontwikkelaars ontwerpen knooppunt voor knooppunt inspecteren. Het heeft een "Styleguide"-functie die kleuren en typografie uit het bestand aggregeert — het dichtstbijzijnde aan een tokenexport. Het exporteert geen machineleesbare indelingsbomen. De functie "Connected Components" koppelt Storybook-componenten aan Figma-frames, wat nuttig is voor documentatie maar een agent niet helpt nieuwe code te genereren.

Figma Dev Mode

Figma's eigen antwoord op handoff. Het codepaneel genereert CSS van geselecteerde knooppunten en toont variabelenamen wanneer ze zijn ingesteld. Goed ontworpen voor menselijke ontwikkelaars. Ondersteunt geen export op bestandsniveau, genereert geen indelingsbomen, en zijn codefragmenten zijn alleen CSS (geen framework-agnostische tokens). Vereist een Dev Mode-seat.

Avocode

Avocode werd overgenomen door Abstract en vervolgens gestopt in 2022. Vermeld omdat het nog steeds verschijnt in zoekresultaten voor "design handoff tools" en wat vergelijkingsverkeer genereert. Het is niet meer beschikbaar.

Locofy, Builder.io, Anima

Deze hulpmiddelen proberen daadwerkelijke frameworkcode (React, Next.js, HTML) rechtstreeks vanuit Figma-ontwerpen te genereren. Ze zijn dichter bij het probleemgebied — ze begrijpen dat de uitvoer code moet zijn, niet alleen een eigenschappenpaneel. Maar ze genereren code die u inzet, niet context die u aan een agent geeft. Het onderscheid is belangrijk: u kunt niet vragen "Implementeer het Instellingenscherm, met hergebruik van het UserAvatar-component dat ik al heb gebouwd" wanneer het hulpmiddel zelf code genereert. Dat kunt u wel vragen aan Claude Code of Cursor wanneer u hen de gestructureerde context hebt gegeven.

Zie figmascope vs Locofy en figmascope vs Builder.io voor gedetailleerde vergelijkingen.

Hoe agent-klare handoff eruit ziet

Agent-klare handoff heeft drie eigenschappen die het onderscheiden van traditionele handoff:

1. Het is een bestandsartefact, geen gebruikersinterface

Het handoff-artefact is een versiebeheerd bestand (of set bestanden) dat naast de code in de repository leeft. Geen gedeelde link die een aanmelding vereist. Geen paneel in een web-app. Een design/-map met JSON-, PNG- en Markdown-bestanden.

Dit heeft verschillende gevolgen:

2. Het gebruikt getypeerde data, geen weergegeven tekst

Designtokens in tokens.json zijn getypeerd — $type: "color", $type: "dimension" — niet slechts tekenreeksen in een Markdown-tabel. De indelings-IR in screens/*.json heeft expliciete knooppuntsoorten (stack, overlay, absolute, leaf) en tokenreferenties met $ref-notatie. Tekenreeksen in strings.json hebben puntnotatiesleutels, niet alleen voor mensen leesbare labels.

Getypeerde data betekent dat de agent er programmatisch over kan redeneren: "alle knooppunten met background.$ref == color.surface gebruiken dezelfde achtergrondkleur," niet "alle knooppunten die eruit zien alsof ze op dezelfde achtergrond staan."

3. Het bevat een specificatiedocument dat de agent eerst leest

CONTEXT.md is het contract tussen de ontwerper en de agent. Het beschrijft:

Traditionele handoff heeft geen equivalent. Dev Mode heeft een "notities voor ontwikkelaars"-veld per frame, maar dat wordt ad-hoc geschreven door een ontwerper zonder structuur. CONTEXT.md wordt consistent gegenereerd vanuit de daadwerkelijke inhoud van het bestand.

De handoff-workflow stap voor stap

  1. Ontwerper markeert frames als gereed — in Figma markeert de ontwerper de frames die klaar zijn voor implementatie (naamgevingsconventie, een "klaar"-label, wat uw team ook gebruikt).
  2. Ontwikkelaar voert figmascope uit — plak de bestands-URL en PAT op figmascope.dev, klik op exporteren, download de zip.
  3. Uitpakken naar design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Commit design/ naar de repository — de bundel is het handoff-artefact. De PR bevat zowel de designbundel als de implementatie.
  5. Agent implementeert — wijs Claude Code of Cursor naar design/CONTEXT.md en de relevante scherm-JSON. Agent genereert code die de tokenwaarden, componentnamen en tekenreeksen uit de bundel gebruikt.
  6. Beoordeel en itereer — ontwikkelaar beoordeelt tegen screens/*.png, noteert eventuele hiaten, verfijnt prompts.

Wanneer het ontwerp verandert, herhaal vanaf stap 2. De _meta.json-tijdstempel vertelt u wanneer de bundel voor het laatst werd gegenereerd ten opzichte van wanneer het Figma-bestand voor het laatst werd gewijzigd — een eenvoudige versheidscontrole.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Wat er niet verandert

Agent-klare handoff vervangt niet de designbeoordeling. De agent implementeert vanuit de gestructureerde context; een mens verifieert nog steeds de uitvoer. Interactiestatussen, animaties, responsief gedrag, toegankelijkheid — deze vereisen oordeelsvermogen dat de agent kan benaderen maar niet kan garanderen vanuit alleen statische ontwerpdata.

De gestructureerde context vervangt ook niet het gesprek tussen ontwerper en ontwikkelaar. Als een token dubbelzinnig is benoemd, of een component zich anders gedraagt over breekpunten dan het statische frame suggereert, dat vereist een gesprek. CONTEXT.md legt vast wat er in het bestand staat; het leidt niet af wat de ontwerper bedoelde voor gevallen die het bestand niet adresseert.

Wat verandert: de implementatie van statische schermindelingen vanuit een stabiel ontwerp gaat van een urenlang handmatig proces naar een prompt-en-beoordelingsworkflow. De agent verwerkt de mechanische vertaling; de ontwikkelaar verwerkt oordeelsoproepen.

Checklist: is uw design handoff agent-klaar?

Als de meeste hiervan ontbreken, zal de agent code produceren die meer correctie vereist dan helemaal opnieuw beginnen met goede context. De bundel die figmascope genereert voldoet in één export aan alle eisen. Bezoek de figmascope blog voor casestudies en diepere duiken op elk checklistitem, of zie Figma Inspector Alternatief voor een directe vergelijking met Dev Mode en plug-ins.