Figma Code Layers a Specs: Co jsou, jak fungují a kde končí14 min read

Kódové vrstvy Figma umístí běžící kód na plátno a Figma Specs tam také umístí Markdown. Oba vstoupili do otevřené beta verze na Config India 15. října 2026, takže soubor návrhu nyní může obsahovat rámy, funkční prototyp a písemný plán, ze kterého agent sestaví.

Tato příručka je určena návrhářům, PM a front-endovým inženýrům, kteří se rozhodují, zda přesunout práci s prototypem a specifikacemi do Figma. Zabývá se tím, co jednotlivé funkce dělají, jak začít, kolik stojí kredity AI a kde musí práce zanechat Figma pro spoluhráče v Claude, ChatGPT nebo Cursor.

Ve věku umělé inteligence je design kód. Chcete-li navrhovat přímo v kódu pomocí AI nebo převést své návrhy Figma na kód, použijte Anima Playground: popište obrazovku nebo začněte od návrhu Figma a poté pokračujte v iteraci v upravitelné aplikaci, kterou si můžete prohlédnout a publikovat.

Navrhujte přímo v kódu s AI

Design s AI: Popište obrazovku nebo přeměňte návrhy Figma na kód.

Co bylo uvedeno na trh Figma na Config India 2026?

Vrstvy kódu a Specs byly titulky, ale dorazily se sadou funkcí agentů kolem nich. Zde je aktuální stav z centra nápovědy Figma:

Obě beta verze budou spuštěny během několika týdnů, takže je můžete vidět před nebo po zbytku vašeho týmu.

Co jsou vrstvy kódu Figma?

Kódová vrstva je vrstva, která obsahuje skutečný běžící kód. Namísto prototypu, který předstírá interakce s rámovými odkazy, získáte funkční prototyp podložený kódem, který sedí na plátně vedle vašich návrhů. Spoluhráči jej mohou proklikávat, komentovat a duplikovat, aby si vedle sebe vyzkoušeli jiný směr.

Figma vám nabízí čtyři způsoby, jak začít jeden:

• Z designu. Vyberte snímky a požádejte agenta Figma, aby je převedl na vrstvu kódu.
• Z živého webu. Zachyťte stránku s rozšířením Figma Chrome a vložte ji na plátno.
• Z repozitáře. Importujte podporovanou, odlehčenou kódovou základnu prototypů ze GitHub nebo místní složky. Import GitHub zůstane připojen k tomuto úložišti.
• Od nuly. Přidejte prázdnou vrstvu kódu a vyzvěte agenta, aby sestavil.

Pomocí serveru Figma MCP můžete také přenést prototyp, který jste vytvořili v kódovacím nástroji, na plátno.

Editace probíhá třemi způsoby. Požádáte agenta, označíte snímky, abyste jim ukázali, kam změna patří, nebo otevřete editor kódu a změníte kód sami. Když na vizuálních detailech záleží víc než na kódu, Extract designs přemění obrazovky z vrstvy kódu zpět na upravitelné snímky Figma. Když je kód připraven pro inženýry, můžete jej poslat do větve a otevřít požadavek na stažení.

Co je Figma Specs?

Figma nazývá Specs „nativní domov pro kontext“. V praxi se jedná o kolaborativní dokument Markdown, který žije buď na plátně souboru Figma Design nebo desky FigJam, nebo jako vlastní soubor Spec.

Začátek je rychlý:

1. Vytvořte samostatný Spec z prohlížeče souborů nebo přejděte na figma.com/spec/new.
2. Uvnitř souboru návrhu nebo desky FigJam klikněte na Spec na panelu nástrojů nebo stiskněte D.
3. Již máte a .md soubor? Přetáhněte jej na plátno a stane se specifikací.
4. Napište pomocí Markdown, které již znáte: # pro nadpisy, - na kulky, [] pro úkoly, > pro uvozovky tři zpětná zaškrtnutí pro kód. Typ / pro obrázky, vložky a oddělovače Figma.

To, co dělá specifikace více než soubor Markdown, je to, co sedí kolem textu. Můžete vložit rám, desku FigJam nebo jakýkoli uzel z plátna, takže požadavek a design, který popisuje, zůstanou vedle sebe. Spoluhráči to komentují a agent Figma může tyto komentáře číst a odpovídat na ně.

Specs funguje také mimo Figma. Kódovací agenti připojení k serveru Figma MCP mohou číst, vytvářet a aktualizovat specifikace pomocí figma-spec dovednost. Chcete-li jeden předat, zkopírujte odkaz na specifikaci do výzvy kódovacího agenta a propojené snímky, diagramy, vrstvy kódu a úryvky Code Connect jsou součástí dodávky.

Proč se Markdown stal formátem pro předávání

Vlastní úvodní příspěvek Figma to říká jasně: Markdown je nyní de facto formát pro sdílení kontextu s agenty. Každý kódovací agent to čte. Většina produktových týmů již uchovává plány, PRD a pokyny pro agenty .md soubory.

Četl jsem, že Specs je Figma, který akceptuje, že předání agentovi je text, a pak se tento text stane multiplayerem. Místní AGENTS.md nebo PRD nikdy selhal kvůli formátu. Selhalo to, protože to upravoval pouze jeden člověk, vzdalovalo se to od návrhů a nikdo neviděl, jakou verzi agent použil.

Uvnitř Figma to opravuje Specs. Otevřenou otázkou je, co se děje mimo něj. Vložené prvky, komentáře a odkazy na živý design jsou funkcemi Figma a agenti se k nim dostanou prostřednictvím klientů uvedených v katalogu Figma MCP. Pokud vaši inženýři, ChatGPT vašeho premiéra a Claude vašeho marketingového týmu potřebují stejný plán, stále se musíte rozhodnout, kde bude sdílená kopie žít.

Praktický pracovní postup: od PRD po vrstvu kódu až po požadavek na stažení

Zde je ukázka toho, jak tyto dvě funkce do sebe zapadají na skutečné funkci, využívající pouze to, co dnes dokumentuje Figma.

1. Přetáhněte svůj PRD na plátno. Vaše stávající .md soubor se stane spec. Nic se nepřepisuje a ruční úprava nepoužívá žádné kredity AI.
2. Vložte rámy, o kterých se mluví. Použijte / pro přidání toků, které popisuje PRD. Recenzenti nyní vidí požadavek a obrazovku společně.
3. Proměňte klíčové snímky na vrstvu kódu. Vyberte je a vyzvěte agenta. Pokud již máte prototyp repo, importujte jej ze GitHub.
4. Recenze na jednom místě. Sbírejte komentáře ke specifikaci a vrstvě kódu. Požádejte agenta Figma, aby odpověděl na každý otevřený komentář s navrženou opravou, zatímco lidé se budou zabývat stejnými vlákny.
5. Odevzdejte spec. Vložte odkaz se specifikací do Codex, Claude Code nebo Cursor připojeného k serveru Figma MCP. Agent získá Markdown plus propojený kontext návrhu.
6. Odešlete prototypový kód. Přeneste změny kódové vrstvy do větve a otevřete požadavek na stažení, aby je inženýři před sloučením zkontrolovali.

Výstupem je specifikace, kterou může váš kódovací agent přečíst, a funkční prototyp, který váš tým skutečně proklikal. Vygenerovaný kód otestujte jako jakýkoli jiný kód. Prototyp, který běží, není totéž jako kód připravený k výrobě.

Pokud je dalším krokem přeměna návrhu Figma na kód, který můžete spustit, nebo navrhování v kódu z výzvy, to je úkol Anima Playground.

Kolik stojí kódové vrstvy a Specs?

• Vrstvy kódu používají kredity AI. U placených plánů je generování a úpravy v kódové vrstvě zdarma do 4. listopadu 2026. Jiná práce agentů ve stejné výzvě stále používá kredity a po 4. listopadu všechny úlohy kódové vrstvy používají kredity.
• Specs jsou volně zapisovatelné. Vlastní psaní a úprava specifikace nepoužívá kredity. Použití agenta se specifikací ano. Po každé výzvě umístěte kurzor na účtenku, abyste viděli, kolik to stojí.
• Payload a pokyny zvyšují náklady. Figma poznamenává, že oba poskytují agentovi více kontextu a více práce, takže stejná výzva může použít více kreditů.

Limity, které je třeba zkontrolovat, než je začnete plánovat

• Zavedení. Obě funkce jsou otevřené beta verze, které se zavádějí během týdnů. Vyhledejte ikonu Kód na panelu nástrojů Figma Design a možnost Spec v prohlížeči souborů.
• Plány. Specs potřebuje placený plán. Začátečníci získají vrstvy kódu, ale ne Specs. Oba potřebují k vytvoření přístup k úpravám.
• Odhlášení. Pouze správci Enterprise mohou vypnout vrstvy kódu a pouze vypnutím všech funkcí AI Figma.
• Velikost repo. Import GitHub je určen pro lehké prototypové kódové základny, nikoli pro úplnou produkční aplikaci.
• Návrhový systémový kód. Připojení vašeho skutečného kódu komponent prostřednictvím zdrojů kódu je stále uzavřená beta, takže vrstvy kódu ještě nemusí používat vaše produkční komponenty.

Kde se Figma zastaví a kam se hodí Anima a AgentGrid.io

Pokud celý váš tým pracuje v Figma, jsou vrstvy kódu a Specs silným výchozím nastavením. Prototyp, plán a komentáře jsou ve stejném souboru a agent Figma a klienti MCP na nich mohou pracovat.

Dvě běžné situace stále spadají mimo tento soubor.

Myšlenka začala někde jinde. Prototyp Claude Design, stránka HTML vygenerovaná ChatGPT nebo živý web, ze kterého se chcete učit. Server Figma MCP nyní má html_to_figma nástroj pro agentem generovaný HTML. Buddy společnosti Anima, náš návrhářský agent AI uvnitř Figma, se také otáčí HTML, Claude artefakty, obrázky a adresy URL do upravitelných vrstev Figma, což je užitečné, když chcete pokračovat v navrhování na těchto vrstvách pomocí vašeho návrhového systému.

Výsledek musí opustit Figma. Vaše specifikace nebo prototyp musí být zkontrolovány lidmi mimo váš tým Figma, upraveny agenty několika dodavatelů nebo zveřejněny jako živý odkaz. To je úkol AgentGrid.io, postavený Anima. Artefakt Markdown na AgentGrid.io je živý, automaticky se ukládající dokument, který mohou upravovat lidé a připojení agenti, jako jsou Claude, ChatGPT, Cursor a Grok Bot, přičemž každá změna je přiřazena jménem v historii verzí. Artefakt HTML je běžící stránka, kterou můžete po schválení komentovat a publikovat na veřejné adrese URL. Můžete také importovat jeden snímek Figma do AgentGrid.io jako artefakt aplikace. Tento import je jednosměrný, takže pozdější úpravy Figma se nesynchronizují.

Ti dva nesoupeří o stejný krok. Figma vlastní designové plátno. AgentGrid.io je místo Markdown Artefakty HTML odcházejí, když se práce kříží s nástroji a týmy.

Zkuste AgentGrid.io zachovat specifikaci nebo prototyp, který může upravovat a publikovat každý agent ve vašem týmu.

Použijte každý nástroj, když

• Použijte vrstvy kódu Figma když zúčastněné strany potřebují kliknout na funkční prototyp vedle návrhů a porovnat směry vedle sebe.
• Použijte Figma Specs kdy by měl plán žít vedle rámců a být načten kódovacím agentem prostřednictvím serveru Figma MCP.
• Použijte Anima Playground když chcete navrhovat přímo v kódu pomocí AI nebo přeměnit návrh Figma na upravitelnou aplikaci, kterou si můžete prohlédnout a publikovat.
• Použijte Buddy když je počáteční bod mimo Figma a chcete na plátně upravitelné vrstvy. Pro úplnější srovnání sestavení v Figma versus tvůrce prohlížeče viz Figma Make vs Anima Playground.
• Použijte AgentGrid.io kdy musí být specifikace nebo prototyp upraveny lidmi a agenty napříč nástroji, zkontrolovány s komentáři a publikovány jako živý odkaz.

Často kladené otázky

Co jsou vrstvy kódu v Figma?

Kódová vrstva je vrstva na plátně Figma, která obsahuje skutečný běžící kód. Můžete vytvořit jeden z vybraných rámců, živou webovou stránku zachycenou pomocí rozšíření Figma Chrome, prototypové úložiště GitHub nebo prázdnou výzvu, poté ji proklikat, okomentovat a duplikovat pro porovnání směrů.

Je Figma Specs jen Markdown?

Specs používá Markdown pro svůj text a můžete přetáhnout libovolný soubor .md na plátno a vytvořit jej. Kolem tohoto textu přidává funkce Figma: vložené rámce a desky FigJam, komentáře a agenta, který může tyto komentáře číst a odpovídat na ně.

Stojí kódové vrstvy Figma kredity AI?

Ano. U placených plánů je generování a úpravy v kódové vrstvě zdarma do 4. listopadu 2026. Ostatní práce agentů ve stejné výzvě stále používají kredity a po 4. listopadu všechny úlohy kódové vrstvy používají kredity AI.

Mohou Claude Code, Codex nebo Cursor číst Figma Spec?

Ano, pokud jsou připojeni k serveru Figma MCP. Kódovací agenti mohou číst, vytvářet a aktualizovat specifikace pomocí dovednosti figma-spec a vy můžete do výzvy vložit odkaz na specifikace a předat tak související kontext návrhu.

Které plány Figma zahrnují Specs?

Specs je v otevřené beta verzi pro placené plány: Professional, Organization, Enterprise a Education, plus vláda podle článku Figma Config India. Není v bezplatném plánu Starter. Vrstvy kódu se zavádějí do všech plánů, včetně Starteru.