Figma Dev Mode is het voor de hand liggende eerste wat je grijpt als een ontwerper werk overdraagt. Het is ingebouwd, het is officieel, het spreekt de eigen taal van Figma. Dus waarom zou je naar iets anders grijpen?
Het antwoord is niet dat Dev Mode slecht is. Het is dat het een ander probleem oplost. Begrijpen wat dat probleem is — en wat het niet is — is het hele artikel. Als je direct naar het antwoord wilt, probeer figmascope hier.
Wat Figma Dev Mode is
Dev Mode is de betaalde overdrachtslaag van Figma, beschikbaar op Professional- en Organization-abonnementen. Wanneer je ernaar schakelt (de </>-knop in de bovenste werkbalk), krijg je een paneel dat CSS- of iOS/Android-fragmenten toont voor geselecteerde lagen, componentannotaties, variabelewaarden en een "klaar voor dev"-statusmarkering die ontwerpers kunnen instellen.
Het is ontworpen voor het moment dat een ontwerper zegt "dit is klaar, ga het bouwen." De ontwikkelaar opent Figma, klikt rond, kopieert fragmenten, kijkt naar tussenruimte. Er is geen exportstap. Geen bestand. Je leest het ontwerp gewoon ter plaatse.
Figma levert ook een officiële MCP-server voor Dev Mode (apart — behandeld in de MCP-vergelijking), maar Dev Mode de UI is primair een leeservaring voor mensen. Je wijst, klikt, inspecteert, kopieert.
De codefragmenten die Dev Mode genereert, zijn echt handig als snelle referentie. Je kunt de lettertypestapel, exacte tussenruimtetokens zien als variabelen zijn ingesteld, randstralen. Voor een senior ontwikkelaar die alleen een sanity check nodig heeft voor een specifieke waarde, is het snel.
Wat figmascope is
figmascope is een browsertool — geen backend, geen installatie, draait in een tabblad — die een gestructureerde contextbundel exporteert uit elk Figma-bestand. Je plakt een Figma-URL en een Persoonlijk Toegangstoken (in geheugen bewaard, nooit naar een server verzonden), en het produceert een .zip met:
CONTEXT.md— een voor mensen en machines leesbare specificatie van het ontwerptokens.json— getypeerde ontwerptokens (afkomstig van Figma-variabelen indien aanwezig, anders afgeleid uit frequentie)screens/*.json— per-scherm intermediaire representatie: stack-, overlay-, absolute- en leaf-nodes met ruimtelijke relaties intactscreens/*.png— 2× referentieschermafbeeldingencomponents/inventory.json— componentindex met instantie-ID'sstrings.json— alle tekstinhoud, gesleuteld voor i18n (stringRef.key)_meta.json— exportmetadata, bestandsinfo, tokenbron
De bundel zijn gewone bestanden. Geen runtime. Geen SDK. Zet hem in een repository, commit hem, diff hem, geef hem aan elke AI-agent die bestanden leest.
Het belangrijkste verschil met Dev Mode: dit is geen leeservaring binnen Figma. Het is een export die Figma volledig verlaat.
Waar Dev Mode uitblinkt
Live-inspectie. Als je op een specifieke laag wilt klikken en direct de exacte berekende waarde wilt krijgen, is Dev Mode onmiddellijk. Geen exportstap, geen zip, geen contextwissel. Het antwoord staat in het paneel.
Officiële integratie. Figma bouwt het, onderhoudt het en levert verbeteringen samen met de rest van het product. Variabeleondersteuning, annotatieworkflows, klaar-voor-dev-status — dit zijn native functies met eerstepartijondersteuning. Wanneer Figma een nieuwe ontwerpsysteemcapaciteit toevoegt, krijgt Dev Mode die.
Teamdistributie. Elke ontwerper en ontwikkelaar op een betaald Figma-abonnement heeft het al. Geen extra tooling om te installeren, uit te leggen of te onderhouden.
Ontwerptijdtooling. Ontwerpers kunnen frames markeren als klaar, annotaties op codeniveau achterlaten en samenwerken met ontwikkelaars op hetzelfde canvas. Deze heen-en-weercommunicatie is echt goed voor QA-cycli waarbij je opmerkingen en statusupdates nodig hebt.
Waar figmascope uitblinkt
Agent-agnostische, bestandsgebaseerde uitvoer. De uitvoer van Dev Mode leeft binnen Figma. De uitvoer van figmascope leeft in een zip die jij beheert. Zet hem naast je code, wijs Claude Code of Cursor ernaar, en de agent heeft de volledige specificatie — alle schermen, alle tokens, alle strings — zonder Figma te hoeven verbinden.
Versiebeheer. Een figmascope-bundel is diffbaar. Commit hem. Zet hem in een PR. Zie precies welke tokens er veranderden tussen het ontwerp van vorige week en dat van vandaag. Dev Mode heeft geen concept van versiegeschiedenis voor de specificatie zelf — Figma heeft bestandsversiegeschiedenis, maar dat is voor de bron, niet voor een exporteerbare momentopname van ontwerpintentie.
Geen betaald abonnementvereiste. figmascope is MIT-gelicenseerd en gratis. Het gebruikt de publieke Figma REST API, die alleen een PAT vereist (gratis op elk Figma-account). Dev Mode vereist een Professional- of Organization-abonnement. Voor soloontwikkelaars of kleine teams die samenwerken met een ontwerper op een gratis abonnement, is figmascope de enige optie.
Deterministische uitvoer. Elke export van hetzelfde Figma-bestand op dezelfde versie produceert dezelfde bundel. Dezelfde JSON, dezelfde tokens, dezelfde strings. Dit is belangrijk voor reproduceerbaarheid — je kunt het in CI uitvoeren, een bundel aan een release koppelen, er regressietests op uitvoeren.
Draagbaar en offline. Zodra je de bundel hebt, werkt het zonder verbinding met Figma of een server. De agentcontext is op zichzelf staand. Handig wanneer je in een vliegtuig bent, achter een firewall, of gewoon niet wilt afhangen van de uptime van Figma tijdens een bouwsprint.
IR behoudt ruimtelijke semantiek. De intermediaire representatie in screens/*.json legt het layouttype vast (stack, overlay, absolute), component-identiteit (componentId op INSTANCE-nodes) en tekststringreferenties — niet alleen berekende CSS. Een agent kan redeneren over layoutstructuur, niet alleen fragmenten kopiëren.
Naast elkaar: hetzelfde Figma-bestand
Neem een inlogscherm met een formulier, een primaire knop en een paar teksttokens. Dit is wat elk gereedschap je geeft:
Dev Mode-uitvoer: CSS-eigenschappen voor de laag die je hebt aangeklikt (font-size: 16px; color: #1f1d1a; border-radius: 8px). Één laag tegelijk. Je kopieert wat je nodig hebt. Als je alle knoppen-staten wilt, klik je op elk afzonderlijk. Als je de tokennaam wilt, is die er als de ontwerper variabelen heeft ingesteld — anders ontbreekt het.
figmascope-bundeluitvoer: CONTEXT.md met de volledige inlogschermspecificatie. tokens.json met color.text.primary, spacing.4, radius.md — gesleuteld, getypeerd, afkomstig van variabelen of afgeleid. screens/login.json met de IR-boom: een stack-container met een formulier-INSTANCE die verwijst naar componentId: "abc123", onderliggende leaf-nodes met stringRef.key: "auth.login.cta". strings.json die die sleutel koppelt aan "Inloggen". screens/login.png op 2×.
Je geeft de bundel aan Cursor. Het leest CONTEXT.md, haalt tokennamen op uit tokens.json, bouwt het component vanuit de IR. Het hoeft Figma helemaal niet te openen.
Vergelijking
| Dimensie | Figma Dev Mode | figmascope |
|---|---|---|
| Prijs | Betaald (Professional / Org-abonnement) | Gratis, MIT open source |
| Uitvoerformaat | Paneel in Figma, CSS/iOS/Android-fragmenten | .zip: CONTEXT.md, tokens.json, screens/*.json, *.png |
| Integratiemodel | Binnen Figma UI, per-laag-inspectie | Browserexport, dan gewone bestanden overal |
| Agent-compatibel | Via MCP-server (aparte functie) | Elke agent die bestanden leest (Claude Code, Cursor, Aider, Copilot…) |
| Versiebeheer-vriendelijk | Nee (uitvoer leeft in Figma) | Ja — bundel is diffbaar, commitbaar |
| Deterministische uitvoer | Nee (per klik, sessiegebonden) | Ja — zelfde bestandsversie → zelfde bundel |
| Offline / draagbaar | Nee — vereist Figma-verbinding | Ja — bundel werkt zonder verbinding |
| Ontwerpannotaties | Ja — klaar-voor-dev, opmerkingen | Nee |
| Ruimtelijke / layout-IR | Nee — platte CSS voor geselecteerde laag | Ja — stack/overlay/absolute/leaf met component-identiteit |
| Tokenbronbepaling | Van Figma-variabelen indien ingesteld | Figma-variabelen → afgeleid uit frequentie → geen |
| i18n-stringsleutels | Nee | Ja — stringRef.key in IR + strings.json |
| Plugin-installatie vereist | Nee (ingebouwd in Figma) | Nee (browsertabblad, REST API) |
Wanneer je elk moet gebruiken
Gebruik Dev Mode wanneer: je een specifieke waarde snel wilt controleren, je midden in een ontwerpbeoordeling zit en een token wilt opzoeken, je team al op een betaald Figma-abonnement zit en in Figma leeft, of je de annotatieworkflow van de ontwerper en klaar-voor-dev-statusmarkeringen wilt.
Gebruik figmascope wanneer: je context geeft aan een AI-agent voor een bouwsprint, je de ontwerpspecificatie naast code wilt versionneren, je op een gratis Figma-abonnement zit, je de volledige layout-IR nodig hebt (niet alleen per-laag-CSS), of je deterministische, reproduceerbare uitvoer wilt die je aan een release kunt koppelen of in een PR kunt diffen.
Ze sluiten elkaar niet uit. Gebruik Dev Mode om te inspecteren tijdens het bouwen, exporteer figmascope-bundels om de ontwerpspecificatie in je repository te verankeren. De twee concurreren niet — ze dekken verschillende delen van de workflow.