Figma Dev Mode je zřejmá první volba, když designér předává práci. Je zabudován, je oficiální, mluví jazykem Figma. Proč byste tedy sahali po něčem jiném?

Odpověď není, že Dev Mode je špatný. Je to, že řeší jiný problém. Pochopení toho, co to je za problém — a co to není — je celý článek. Pokud chcete přejít přímo k odpovědi, vyzkoušejte figmascope zde.

Co je Figma Dev Mode

Dev Mode je placená vrstva handoff Figma, dostupná v plánech Professional a Organization. Když do něj přepnete (tlačítko </> v horním panelu nástrojů), dostanete panel, který vám pro vybrané vrstvy zobrazuje úryvky CSS nebo iOS/Android, anotace komponent, hodnoty proměnných a stavový marker "připraveno pro vývoj", který mohou designéři nastavit.

Je navržen pro moment, kdy designér říká "tohle je hotové, jdi to postavit." Vývojář otevře Figma, kliká, kopíruje úryvky, dívá se na mezery. Žádný krok exportu. Žádný soubor. Jen čtete návrh na místě.

Figma také dodává oficiální MCP server pro Dev Mode (samostatný — popsán v srovnání MCP), ale Dev Mode jako UI je primárně zážitek pro lidské čtení. Ukazujete, klikáte, kontrolujete, kopírujete.

Úryvky kódu generované Dev Mode jsou skutečně užitečné jako rychlé reference. Vidíte font stack, přesné tokeny mezer pokud jsou Variables nastaveny, poloměry ohraničení. Pro senior vývojáře, který jen potřebuje ověřit konkrétní hodnotu, je to rychlé.

Co je figmascope

figmascope je nástroj na straně prohlížeče — žádný backend, žádná instalace, běží v záložce — který exportuje strukturovaný kontextový balíček z jakéhokoli Figma souboru. Vložíte URL Figma a Personal Access Token (držen pouze v paměti, nikdy odeslán na server) a vytvoří .zip obsahující:

Balíček jsou prosté soubory. Žádný runtime. Žádné SDK. Vložte ho do repozitáře, commitujte ho, diffujte ho, předejte ho jakémukoli AI agentovi, který čte soubory.

Klíčový rozdíl od Dev Mode: toto není zážitek čtení uvnitř Figma. Je to export, který Figma zcela opouští.

Kde Dev Mode vyhrává

Živá inspekce. Pokud chcete kliknout na konkrétní vrstvu a hned dostat její přesnou vypočítanou hodnotu, Dev Mode je okamžitý. Žádný krok exportu, žádný zip, žádný přechod kontextu. Odpověď je v panelu.

Oficiální integrace. Figma ho builduje, udržuje a dodává vylepšení spolu se zbytkem produktu. Podpora Variables, workflow anotací, stav připraveno-pro-vývoj — jsou to nativní funkce s podporou první strany. Když Figma přidá novou schopnost design systému, Dev Mode ji dostane.

Distribuce v týmu. Každý designér a vývojář v Figma org plánu ho již má. Žádné další nástroje k instalaci, vysvětlování nebo udržování.

Nástroje pro čas návrhu. Designéři mohou označovat rámce jako připravené, zanechávat anotace na úrovni kódu a spolupracovat s vývojáři na stejném plátně. Tato zpětná vazba je skutečně dobrá pro QA cykly, kde potřebujete komentáře a aktualizace stavu.

Kde figmascope vyhrává

Výstup agnostický k agentovi, souborový. Výstup Dev Mode žije uvnitř Figma. Výstup figmascope žije v zipu, který kontrolujete. Vložte ho vedle svého kódu, nasměrujte na něj Claude Code nebo Cursor a agent má celou specifikaci — všechny obrazovky, všechny tokeny, všechny řetězce — aniž by se musel vůbec připojit k Figma.

Správa verzí. Balíček figmascope je diffovatelný. Commitujte ho. Vložte ho do PR. Přesně vidíte, které tokeny se změnily mezi loňským návrhem a dnešním. Dev Mode nemá žádný koncept historie verzí pro samotnou specifikaci — Figma má historii verzí souboru, ale ta je pro zdroj, ne pro exportovatelný snapshot záměru návrhu.

Žádný požadavek na placený plán. figmascope je licencován pod MIT a je zdarma. Používá veřejné Figma REST API, které vyžaduje pouze PAT (zdarma na jakémkoli Figma účtu). Dev Mode vyžaduje plán Professional nebo Organization. Pro sólo vývojáře nebo malé týmy pracující s designérem na bezplatném plánu je figmascope jedinou možností.

Deterministický výstup. Každý export stejného Figma souboru ve stejné verzi produkuje stejný balíček. Stejný JSON, stejné tokeny, stejné řetězce. To záleží pro reprodukovatelnost — můžete ho spustit v CI, připnout balíček k vydání, provést regresní testy proti němu.

Přenosný a offline. Jakmile máte balíček, funguje bez připojení k Figma nebo jakémukoli serveru. Kontext agenta je soběstačný. Užitečné v letadle, za firewallem nebo když prostě nechcete záviset na dostupnosti Figma během sprint buildu.

IR zachovává prostorovou sémantiku. Intermediate representation screens/*.json zachycuje druh rozvržení (stack, overlay, absolute), identitu komponent (componentId na uzlech INSTANCE) a reference textových řetězců — ne jen computed CSS. Agent může uvažovat o struktuře rozvržení, ne jen kopírovat úryvky.

Porovnání vedle sebe: stejný Figma soubor

Vezměme přihlašovací obrazovku s formulářem, primárním tlačítkem a několika textovými tokeny. Zde je, co každý nástroj dává:

Výstup Dev Mode: CSS vlastnosti pro vrstvu, na kterou jste klikli (font-size: 16px; color: #1f1d1a; border-radius: 8px). Jedna vrstva najednou. Kopírujete, co potřebujete. Pokud chcete stavy celého tlačítka, klikáte na každý. Pokud chcete název tokenu, je tam pokud designér zapojil Variables — jinak chybí.

Výstup balíčku figmascope: CONTEXT.md s celou specifikací přihlašovací obrazovky. tokens.json s color.text.primary, spacing.4, radius.md — klíčované, typované, pocházející z Variables nebo odvozené. screens/login.json se stromem IR: stack kontejner obsahující INSTANCI formuláře odkazující na componentId: "abc123", potomkovské listové uzly s stringRef.key: "auth.login.cta". strings.json mapující tento klíč na "Přihlásit se". screens/login.png ve 2×.

Předáte balíček Cursor. Přečte CONTEXT.md, vytáhne názvy tokenů z tokens.json, sestaví komponentu z IR. Vůbec nepotřebuje otevřít Figma.

Srovnání

Dimenze Figma Dev Mode figmascope
Cena Placený (plán Professional / Org) Zdarma, MIT open source
Formát výstupu Panel uvnitř Figma, úryvky CSS/iOS/Android .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
Model integrace Uvnitř UI Figma, inspekce vrstvy po vrstvě Export prohlížečem, poté prosté soubory kdekoli
Kompatibilní s agentem Přes MCP server (samostatná funkce) Jakýkoli agent čtoucí soubory (Claude Code, Cursor, Aider, Copilot…)
Přátelský ke správě verzí Ne (výstup žije v Figma) Ano — balíček je diffovatelný, commitovatelný
Deterministický výstup Ne (per-klik, vázaný na sezení) Ano — stejná verze souboru → stejný balíček
Offline / přenosný Ne — vyžaduje připojení k Figma Ano — balíček funguje bez jakéhokoli připojení
Anotace pro čas návrhu Ano — připraveno-pro-vývoj, komentáře Ne
Prostorový / layout IR Ne — ploché CSS pro vybranou vrstvu Ano — stack/overlay/absolute/leaf s identitou komponent
Získávání tokenů Z Figma variables pokud jsou nastaveny Figma variables → odvozeno z frekvence → žádné
Klíče i18n řetězců Ne Ano — stringRef.key v IR + strings.json
Vyžaduje instalaci pluginu Ne (zabudován do Figma) Ne (záložka prohlížeče, REST API)

Kdy co použít

Použijte Dev Mode, když: potřebujete ověřit konkrétní hodnotu, jste uprostřed design review a chcete vyhledat token, váš tým je již na placeném plánu Figma a žije uvnitř Figma, nebo chcete workflow anotací designéra a stavové markery připraveno-pro-vývoj.

Použijte figmascope, když: předáváte kontext AI agentovi pro sprint buildu, chcete verzovat spec návrhu spolu s kódem, jste na bezplatném plánu Figma, potřebujete plný layout IR (ne jen CSS vrstvy po vrstvě), nebo chcete deterministický, reprodukovatelný výstup, který můžete připnout k vydání nebo diffovat v PR.

Nevzájemně se vylučují. Používejte Dev Mode pro inspekci při budování, exportujte balíčky figmascope k ukotvení spec návrhu ve vašem repozitáři. Oba se nepříbuzní — pokrývají různé části workflow.