Alternativa k Figma Inspector — Strukturovaný kontext pro AI agenty, ne pluginová rozhraní

Když vývojáři hledají „Figma inspector", obvykle chtějí jednu ze dvou věcí: způsob, jak zobrazit hodnoty vlastností uzlů bez Dev Mode přístupu, nebo způsob, jak předat obsah Figmy AI agentovi. První kategorie je dobře pokryta pluginy. Druhá kategorii neobsluhuje téměř nic — dokud nepřišel figmascope.

Tento článek porovnává obě kategorie, vysvětluje, proč řeší různé problémy, a ukazuje, jak skutečný export optimalizovaný pro agenty vypadá v praxi. Přejděte na figmascope.dev a vyzkoušejte export sami, nebo pokračujte ve čtení celého srovnání. Pro praktický postup viz Figma do Cursoru nebo Figma do Claude Code.

Co nástroje „Figma inspector" vlastně dělají

Klasický Figma inspector je pravý panel ve vlastním rozhraní Figmy. Vyberte uzel: uvidíte jeho výplň, tah, efekty, rozměry, omezení, typografii. V Dev Mode (přidán v roce 2023) zobrazí panel fragmenty kódu — vlastnosti CSS odvozené z uzlu, auto-layout vyjádřený jako flexbox, barvy s názvy proměnných, pokud jsou Variables nastaveny.

Pluginy jako Inspect, Figma to Code, Anima a desítky dalších to dále rozšiřují. Některé generují fragmenty React nebo SwiftUI z vybraných uzlů. Jiné exportují CSS soubory. Jiné anotují plátno pro kontroly handoffu.

Všechny jsou navrženy pro lidského vývojáře, který se dívá na obrazovku. Zobrazují informace na vyžádání, uzel po uzlu, vybrané osobou, která ví, který uzel ji zajímá.

Proč tento model nefunguje pro AI agenty

Jazykový model nesedí v Figmě a nekliká skrz uzly. Potřebuje celý relevantní kontext ve svém kontextovém okně, než začne generovat kód. Inspekce uzel po uzlu produkuje fragmenty. To, co agent potřebuje, je strukturovaný dokument pokrývající celou obrazovku: hierarchii, hodnoty tokenů, řetězce, reference komponent — vše najednou.

Existuje také problém formátu. Dev Mode produkuje fragmenty CSS, které jsou téměř správné, ale ne úplně — názvy vlastností se liší podle frameworků, zkrácené vlastnosti je třeba rozvinout, absolutní hodnoty pixelů je třeba namapovat na systém tokenů. Agent konzumující surový výstup Dev Mode bude znovu halucinovat názvy tokenů, vymýšlet hodnoty mezer a produkovat kód, který vypadá, jako by ho navrhl někdo, kdo viděl váš design jen jednou.

Inspekční nástroje odpovídají na otázku „co je tento uzel?" Agentní nástroje odpovídají na otázku „co je celá tato obrazovka, ve formátu, o kterém může model uvažovat?"

figmascope jako alternativa k Figma inspector

figmascope není panel uvnitř Figmy. Běží ve vašem prohlížeči, komunikuje přímo s Figma REST API a exportuje kontextový balíček — strukturovaný zip obsahující vše, co AI agent potřebuje k implementaci designu. Formát tokenů je podrobně popsán v Export designových tokenů pro AI agenty a širší filozofie handoffu je popsána v AI Design Handoff.

Export zahrnuje:

• IR rozložení pro každý frame, typovaný a zkřížený s tokeny, ne hromadu surového CSS
• Designové tokeny ve stabilním JSON formátu, ne seznam hex hodnot bez sémantických názvů
• Konsolidované řetězce UI s klíči zdrojů, ne rozptýlené textové hodnoty
• Referenční rendery ve 2×, takže agent má vizuální ground-truth vedle dat
• Specifikační dokument CONTEXT.md, který agent čte jako první, a který vysvětluje konvence pojmenování tokenů, rozsah a případné anomálie

Přímé srovnání

Figma Dev Mode — co dělá dobře a kde selhává

Panel kódu Dev Mode je skutečně užitečný pro lidské vývojáře, kteří potřebují rychle odečíst hodnotu mezer nebo zkontrolovat sadu písem. Propojení s Variables je krok správným směrem — když soubor Figmy správně používá Variables, Dev Mode zobrazuje název proměnné vedle přeložené hodnoty.

Kde selhává pro AI workflow:

• Žádný export na úrovni souboru. Můžete číst jeden uzel; nemůžete exportovat strojově čitelnou reprezentaci celé hierarchie framu.
• Fragmenty CSS jsou specifické pro framework a často nesprávné pro nevýchozí cíle (iOS, Android, React Native).
• Žádná konsolidace řetězců. Textové hodnoty jsou viditelné pro každý uzel, ale nejsou agregované.
• Žádný specifikační dokument čitelný agentem. Anotace Dev Mode jsou určeny pro čtení lidmi v aplikaci, ne pro uvažování jazykových modelů.
• Vyžaduje Dev Mode přístup (45 $/editor/měsíc ke dni 2025). figmascope potřebuje pouze Personal Access Token, který je zdarma.

Pluginy Figma inspector — krajina

Existují přibližně tři kategorie pluginů Figma inspector:

1. Prohlížeče vlastností — replikují to, co zobrazuje pravý panel Dev Mode, často pro uživatele bezplatné verze bez přístupu k Dev Mode. Příklady: Figma Inspect, Handoff.
2. Generátory kódu — produkují kód specifický pro framework z vybraných uzlů. Příklady: Figma to Code, Anima, Locofy. Tyto generují kód z individuálního výběru, ne z plného strukturovaného exportu souboru.
3. Exportéry tokenů — exportují designové tokeny z Figma Variables. Příklady: Tokens Studio (dříve Figma Tokens), Variables2JSON. Tyto řeší problém exportu tokenů, ale ne IR rozložení ani problémy specifikace pro agenta.

figmascope nepatří do žádné z těchto kategorií. Duchem je nejblíže kategorii „exportér tokenů", ale řeší širší problém: produkovat plný strukturovaný kontext, který AI agent potřebuje k správné implementaci celé obrazovky.

Viz figmascope vs Figma pluginy pro podrobnější přehled krajiny pluginů.

Kdy co použít

Tyto nástroje se navzájem nevylučují. Realistický workflow:

• Používejte Dev Mode nebo inspekční plugin, když jste vývojář kontrolující konkrétní hodnoty uzlu, potvrzující rozhodnutí o mezerách s designérem nebo ověřující, na kterou proměnnou se barva přeloží.
• Používejte figmascope, když předáváte celou obrazovku (nebo soubor) AI agentovi pro generování kódu. Spusťte ho jednou na každém milníku designu, odevzdejte balíček do repozitáře.

Rozdíl je synchronní inspekce (lidský čte jeden uzel najednou) versus dávkový export (agent dostane celý obrázek v jednom strukturovaném dokumentu).

PAT — k čemu přistupuje a k čemu ne

figmascope používá Figma Personal Access Token ke čtení souboru přes REST API. Token se zadává v prohlížeči, žije v paměti prohlížeče po dobu relace a odesílá se pouze jako hlavička do api.figma.com. Žádný server ho nepřijímá. Když zavřete záložku, je pryč.

Minimální požadovaný rozsah je Obsah souboru: pouze pro čtení. figmascope nezapisuje do Figmy, nevytváří komentáře, nepřistupuje k souborům týmu mimo to, k čemu má token oprávnění ke čtení. Viz Zabezpečení PAT a figmascope pro úplný model hrozeb.

Jak výstup vypadá ve skutečném projektu

Po exportu sedí kontextový balíček vedle vašeho zdrojového kódu:

myapp/
├── src/
│   ├── screens/
│   └── components/
├── design/
│   ├── CONTEXT.md          ← agent čte toto jako první
│   ├── tokens.json         ← typované designové tokeny
│   ├── _meta.json          ← manifest exportu, varování
│   ├── components/
│   │   └── inventory.json  ← kanonické názvy a id komponent
│   ├── screens/
│   │   ├── Home.json       ← IR rozložení
│   │   ├── Home.png        ← render ve 2×
│   │   ├── Profile.json
│   │   └── Profile.png
│   └── strings.json        ← veškeré UI texty, klíče s tečkovou notací
└── package.json

Toto je artefakt, který odevzdáváte, odkazujete v CLAUDE.md nebo .cursorrules a ukazujete na něj svého agenta. Jeden export, veškerý potřebný kontext.

Porovnejte to s typickým inspekčním workflow: vývojář otevře Figmu, prochází uzly jeden po druhém, kopíruje hodnoty do kódu, přehlédne název proměnné, špatně určí odsazení pro mobilní zařízení, stráví dvacet minut slaďováním designu s implementací. Strukturovaný export tento cyklus zcela odstraní, když implementaci provádí agent.

Odkazování na balíček v konfiguraci AI vašeho projektu

Claude Code čte CLAUDE.md na začátku relace. Cursor čte .cursorrules. Obě podporují soubor instrukcí na úrovni projektu, který orientuje AI před tím, než cokoliv udělá. Přidejte krátkou sekci o designu odkazující na váš adresář design/:

# Pro CLAUDE.md (Claude Code)
## Kontext designu

Veškerá data designu jsou v `design/`. Před implementací jakéhokoliv UI:
1. Přečtěte `design/CONTEXT.md` pro rozsah a konvence tokenů
2. Použijte `design/tokens.json` pro všechny hodnoty barev, mezer, poloměrů a typografie
3. Použijte `design/components/inventory.json` pro kanonické názvy komponent
4. Použijte `design/strings.json` pro veškeré UI texty — odkazujte pomocí klíče s tečkovou notací
5. Validujte oproti renderům `design/screens/*.png`

# Pro .cursorrules (Cursor)
Před implementací UI vždy přečtěte design/CONTEXT.md.
Hodnoty tokenů jsou v design/tokens.json — nikdy necodujte natvrdo barvy ani mezery.
Názvy komponent pocházejí z design/components/inventory.json.
UI řetězce pocházejí z design/strings.json s klíči s tečkovou notací.

Po nastavení každá relace agenta v projektu automaticky ví, že adresář designu existuje a jak ho používat — bez opakovaného promptování.

Alternativa MCP — a proč to není totéž

Vlastní server Model Context Protocol (MCP) Figmy umožňuje AI připojit se přímo k Figma API a dotazovat uzly na vyžádání. To je užitečné pro průzkumnou práci — ptát se „jaká je barva tohoto tlačítka?" v živém rozhovoru. Nevytváří to reprodukovatelný, verzovatelný artefakt. Pokaždé, když agent běží, znovu čte živý soubor Figmy, který se mohl změnit. Neexistuje žádný CONTEXT.md vysvětlující rozsah. Neexistuje předgenerovaný slovník tokenů se stabilními názvy. Neexistuje žádný systém varování pro anomální rozložení.

figmascope a Figma MCP řeší různé problémy. MCP je online, živý a dobrý pro interaktivní průzkum. figmascope produkuje offline, verzovaný, strukturovaný artefakt vhodný pro deterministické generování kódu v době implementace. Viz figmascope vs Figma MCP pro podrobné srovnání a prozkoumejte blog figmascope pro další hlubší ponoření do AI design workflow.