Locofy dělá to zřejmé: vezme Figma soubor, produkuje React. Je to přirozený první instinkt. Návrhy dovnitř, kód ven. Proč přemýšlet složitěji?

Zde je poctivá odpověď: pro některé workflow byste složitěji přemýšlet neměli. Locofy je rychlý a reálný. Ale model má limity, které se s růstem vaší kódové základny stupňují. figmascope dělá jinou sázku — dodejte strukturu, nechte agenta zvládnout codegen. Zda tato sázka vyjde, závisí na tom, co stavíte a kdo to staví.

Co dělá Locofy

Locofy je Figma plugin (dostupný také jako samostatná aplikace), který převádí Figma návrhy na produkčně-ish kód v React, Next.js, Vue, HTML/CSS nebo Tailwind. Nainstalujete plugin, opatříte vrstvy Locofy anotacemi (označíte, co je vstup, tlačítko, kontejner), spustíte export a dostanete soubory komponent, které můžete vložit do projektu.

Podporuje responzivní breakpointy, základní stavy interakce a nějaké zpracování assetů. Výstup má být výchozím bodem, ne finálním kódem — ale pro jednoduché marketingové stránky nebo landing sekce vás může dostat na 60-80 % bez dotyku textového editoru.

Locofy má bezplatnou úroveň s omezenými exporty a placené plány pro vyšší objem a týmové funkce. Plugin vyžaduje instalaci přes Figma Community a běží uvnitř sandboxovaného plugin runtime Figma.

Kde Locofy vyhrává

Žádný agent není potřeba. Nepotřebujete Claude, Cursor ani žádného AI coding asistenta. Konverze je soběstačná uvnitř Locofy pluginu. Pro designéra, který chce odeslat landing page bez zapojení vývojáře, může Locofy tuto mezeru uzavřít.

Rychlý první výstup. Pro jednoduchá rozvržení s málo komponentami produkuje Locofy použitelný kód během minut. Pokud prototypujete nebo produkujete jednorázové marketingové stránky, rychlost je reálná.

Dogmatická struktura. Locofy dělá rozhodnutí za vás: zde je váš strom komponent, zde je pojmenování props. Tato dogmatičnost je funkce, pokud tato rozhodnutí nechcete dělat sami.

Výstup zaměřený na framework. Kód cílí přímo na váš stack. Nedostáváte generický JSON, který pak musíte interpretovat — dostáváte soubor .tsx s import příkazy, scaffoldovanými hooky a aplikovanými třídami CSS modulů nebo Tailwind.

Kde Locofy prohrává

Jednorázový, ne iterativní. Locofy produkuje snapshot. Když se návrh změní — a návrhy se vždy mění — znovu spustíte plugin a odsouhlasíte nový výstup s vaší stávající kódovou základnou. Žádný diff model neexistuje. Strojový výstup ručně slučujete s lidským výstupem, což se rychle prodraží.

Uzamčen na Locofy názory. Volba frameworku, konvence pojmenování komponent, signatury props — ty pocházejí z modelu Locofy, ne z konvencí vaší kódové základny. Pokud máte design systém s konkrétními API komponent, Locofy o nich neví. Generuje vlastní. Trávíte čas odsouhlasováním světa Locofy s vaší kódovou základnou.

Závislost na pluginu. Každý vývojář, který chce spustit export, potřebuje nainstalovaný plugin, Locofy účet a přístup k Figma souboru. Nehodí se do CLI workflow, CI pipeline ani prostředí uživatele, který Figma nepoužívá.

Přidaná zátěž anotací. Dobrý výstup z Locofy vyžaduje, aby designéři přidali do vrstev Locofy-specifické tagy. To je technický dluh nástroje: anotace musí být udržovány, přidávají hluk do Figma souboru a mimo Locofy nic neznamenají.

Černá skříňka. Logika codegenování je proprietární. Když je výstup špatný — a někdy špatný je — nevidíte proč. Ladíte názvy vrstev, znovu spouštíte, doufáte. Neexistuje žádná intermediate representation, kterou byste mohli inspektovat nebo auditovat.

Jiný úhel pohledu figmascope

figmascope negeneruje kód. Generuje kontext.

Balíček — CONTEXT.md, tokens.json, screens/*.json, components/inventory.json, strings.json — popisuje návrh přesně a nechává vámi zvoleného agenta provést codegen. Ten agent zná vaši kódovou základnu, vaše API komponent, vaše konvence pojmenování, vaše vzory testů. Locofy nic z toho nezná. Váš agent ano, protože četl váš kód.

Intermediate representation v screens/*.json zachycuje sémantiku rozvržení: stack vs. absolute vs. overlay, identitu komponent přes componentId na uzlech INSTANCE a textové řetězce přes stringRef.key. Když řeknete Claude Code "implementuj tuto obrazovku pomocí našich stávajících komponent Button a Input," má prostorovou strukturu, reference komponent a názvy tokenů, aby to udělal správně. Neinferuje ze screenshotu — čte specifikaci.

Získávání tokenů kaskáduje: Variables Figma jako první (pokud je design systém zapojen), odvozeno z frekvence jako druhé (figmascope sleduje, které hodnoty se opakují a povyšuje je), žádné pokud ani jedno neplatí. Výstup tokens.json je typovaný a strojově čitelný. Agent může přímo vyhledat color.surface.brand místo parsování screenshotu pro hex hodnotu.

Tento model je také iterativní. Když se návrh změní, re-exportujete balíček a commitujete novou verzi. Diff v tokens.json nebo screens/login.json vám přesně říká, co se změnilo. Předáte diff agentovi: "tokens.json se změnil — border-radius přešel z 8px na 6px napříč všemi interaktivními prvky — aktualizujte dotčené komponenty." To je cílený, diffovatelný workflow. Nevyžaduje odsouhlasení dvou sad generovaných souborů komponent.

Proč "struktura pro agenta" bije "kód z pluginu" v roce 2026 pro mnoho týmů

Premisa za Locofy — a podobnými nástroji — je, že codegen z návrhu je vyřešený nebo téměř vyřešený problém. Vygenerujte kód, opravte ho, odešlete. Fungovalo to lépe, když byl krok "opravte ho" levný.

Realita v roce 2026: váš AI coding agent je velmi dobrý v psaní idiomatického kódu ve vaší kódové základně, pokud má dobrý kontext. Je špatný v odsouhlasování vlastního výstupu s výstupem Locofy, když jsou v konfliktu. Dávat agentovi strukturovaný, inspektovatenlný kontext a nechat ho provést plný codegen — v souladu s vašimi konvencemi, oproti vašim komponentám — produkuje méně práce na odsouhlasování, ne více.

Výstup Locofy je také finální pro framework. Jakmile máte JSX komponentu od Locofy, upravujete JSX. Výstup figmascope je agnostický k frameworku. Stejný balíček funguje s Claude Code píšícím React, Aider píšícím Vue nebo Cursor píšícím Web Components. Agent volí idiom. Kontext zůstává konstantní.

Srovnání

Dimenze Locofy figmascope
Typ výstupu Soubory kódu React / Vue / HTML/CSS / Tailwind Kontextový balíček: CONTEXT.md, tokens.json, screens/*.json, *.png
Vyžaduje agenta Ne Ano — balíček je vstupem pro AI agenta
Dogmatičnost frameworku Vysoká — výstup cílí na konkrétní framework Žádná — agent volí framework
Zná vaši kódovou základnu Ne Váš agent ano
Iterativní workflow Obtížné — re-export + ruční odsouhlasení Ano — diffy balíčku jsou strukturované a inspektovatenlné
Zátěž anotací Ano — vyžadovány Locofy tagy vrstev pro dobrý výstup Ne
Správa verzí Ne (pouze generovaný kód) Ano — balíček je diffovatelný, commitovatelný
Open source / soběstačný Ne — proprietární SaaS MIT, běží celý v prohlížeči
Vyžaduje instalaci pluginu Ano Ne
Cena Bezplatná úroveň + placené plány Zdarma, bez nutnosti účtu
Povědomí o tokenech / design systému Částečné — mapuje styly Figma Plné — tokens.json s typovanými hodnotami a záložním zdrojováním
Klíče i18n řetězců Ne Ano — stringRef.key v IR + strings.json

Kdy je Locofy správná volba

Buďme upřímní: Locofy si své místo zaslouží pro nekódující designéry odesílající marketingové stránky, landing sekce nebo jednorázové prototypy. Pokud nemáte AI agent setup, nechcete ho a jen potřebujete React soubor k předání dodavateli — Locofy tuto práci dělá. Kód je průměrný, ale existuje, a průměrný kód, který můžete odeslat, bije perfektní kontext, na který váš tým nemůže jednat.

Je také skutečně užitečný pro rychlou validaci mockupů: "vytvoří toto rozvržení smysluplné HTML?" Spusťte Locofy, podívejte se na výstup, zahoďte ho. Rychlá zpětná vazba bez nastavování plného agent workflow.

figmascope je lepší volba, když stavíte produkční UI se stávající kódovou základnou, design systémem s reálnými tokeny a AI coding agentem v smyčce. Balíček dává agentovi přesnost, kterou potřebuje k psaní kódu, který se hodí do vašeho projektu — ne generický boilerplate, který musí přepsat.