Vrstvy kódu Figma a Specs: Čo sú, ako fungujú a kde sa zastavujú13 min read

Vrstvy kódu Figma umiestnia na plátno spustený kód a Figma Specs tam tiež umiestnia Markdown. Obidva vstúpili do otvorenej beta verzie na Config India 15. októbra 2026, takže dizajnový súbor môže teraz obsahovať rámce, funkčný prototyp a písomný plán, z ktorého agent zostavuje.

Táto príručka je určená pre dizajnérov, PM a front-end inžinierov, ktorí sa rozhodujú, či presunúť prototyp a prácu so špecifikáciami do Figma. Zahŕňa to, čo každá funkcia robí, ako začať, koľko to stojí kredity AI a kde musí práca zanechať Figma pre spoluhráčov v Claude, ChatGPT alebo Cursor.

Vo veku AI je dizajn kód. Ak chcete navrhovať priamo v kóde pomocou AI alebo premeniť svoje návrhy Figma na kód, použite Anima Playground: popíšte obrazovku alebo začnite od návrhu Figma a potom pokračujte v iterácii v upraviteľnej aplikácii, ktorú môžete zobraziť a publikovať.

Dizajn priamo v kóde s AI

Dizajn pomocou AI: Popíšte obrazovku alebo premeňte návrhy Figma na kód.

Čo spustilo Figma na Config India 2026?

Vrstvy kódu a Specs boli titulky, ale prišli so súborom funkcií agentov okolo nich. Tu je aktuálny stav z centra pomoci Figma:

Obe beta verzie budú spustené v priebehu niekoľkých týždňov, takže ich môžete vidieť pred alebo po zvyšku vášho tímu.

Čo sú vrstvy kódu Figma?

Kódová vrstva je vrstva, ktorá obsahuje skutočný bežiaci kód. Namiesto prototypu, ktorý predstiera interakcie s rámovými odkazmi, získate funkčný prototyp s podporou kódu, ktorý sedí na plátne vedľa vašich návrhov. Spoluhráči naň môžu klikať, komentovať ho a duplikovať, aby vedľa seba vyskúšali iný smer.

Figma vám ponúka štyri spôsoby, ako začať jeden:

• Z dizajnu. Vyberte snímky a požiadajte agenta Figma, aby ich premenil na vrstvu kódu.
• Zo živej webovej stránky. Nasnímajte stránku s rozšírením Figma Chrome a prilepte ju na plátno.
• Z repo. Importujte podporovanú, odľahčenú kódovú základňu prototypov zo GitHub alebo z lokálneho priečinka. Import GitHub zostane pripojený k tomuto úložisku.
• Od nuly. Pridajte prázdnu vrstvu kódu a požiadajte agenta, aby zostavil.

Môžete tiež priniesť prototyp, ktorý ste vytvorili v kódovacom nástroji, na plátno prostredníctvom servera Figma MCP.

Úprava prebieha tromi spôsobmi. Vyzvete agenta, anotujete snímky, aby ste im ukázali, kam patrí zmena, alebo otvoríte editor kódu a zmeníte kód sami. Keď na vizuálnych detailoch záleží viac ako na kóde, Extract designs premení obrazovky z kódovej vrstvy späť na upraviteľné snímky Figma. Keď je kód pripravený pre inžinierov, môžete ho poslať do pobočky a otvoriť požiadavku na stiahnutie.

Čo je Figma Specs?

Figma nazýva Specs „natívnym domovom pre kontext“. V praxi ide o kolaboratívny dokument Markdown, ktorý žije buď na plátne súboru Figma Design alebo dosky FigJam, alebo ako vlastný súbor Spec.

Začať je rýchle:

1. Vytvorte samostatný Spec z prehliadača súborov alebo prejdite na figma.com/spec/new.
2. Vo vnútri súboru dizajnu alebo dosky FigJam kliknite na paneli nástrojov na Spec alebo stlačte D.
3. Už máte a .md súbor? Presuňte ho na plátno a stane sa špecifikáciou.
4. Napíšte pomocou Markdown, ktoré už poznáte: # pre nadpisy, - na guľky, [] pre úlohy, > pre úvodzovky tri spätné začiarknutia pre kód. Typ / pre obrázky, vložky a oddeľovače Figma.

Čo robí špecifikáciu viac ako súbor Markdown, je to, čo sedí okolo textu. Môžete vložiť rám, dosku FigJam alebo akýkoľvek uzol z plátna, takže požiadavka a dizajn, ktorý opisuje, zostanú vedľa seba. Spoluhráči to komentujú a agent Figma môže tieto komentáre čítať a odpovedať na ne.

Specs funguje aj mimo Figma. Kódovací agenti pripojení k serveru Figma MCP môžu čítať, vytvárať a aktualizovať špecifikácie pomocou figma-spec zručnosť. Ak to chcete odovzdať, skopírujte odkaz na špecifikáciu do výzvy kódovacieho agenta a spolu s ním sa dodávajú prepojené snímky, diagramy, vrstvy kódu a úryvky Code Connect.

Prečo sa Markdown stal hand-off formátom

Vlastný úvodný príspevok Figma to hovorí jasne: Markdown je teraz de facto formátom na zdieľanie kontextu s agentmi. Každý kódovací agent to číta. Väčšina produktových tímov už uchováva plány, PRD a pokyny pre agentov .md súbory.

Čítal som, že Specs je Figma, ktorý akceptuje, že odovzdanie agentovi je text, a potom sa tento text stane multiplayerom. Miestny AGENTS.md alebo PRD nikdy nezlyhal kvôli formátu. Zlyhalo to, pretože ho upravovala iba jedna osoba, odklonil sa od návrhov a nikto nevidel, ktorú verziu agent použil.

Vo vnútri Figma to opravuje Specs. Otvorenou otázkou je, čo sa deje mimo nej. Vložené prvky, komentáre a odkazy na živý dizajn sú funkcie Figma a agenti sa k nim dostanú prostredníctvom klientov uvedených v katalógu Figma MCP. Ak vaši inžinieri, ChatGPT vášho premiéra a Claude vášho marketingového tímu potrebujú rovnaký plán, stále sa musíte rozhodnúť, kde bude zdieľaná kópia žiť.

Praktický pracovný postup: od PRD po vrstvu kódu až po požiadavku na stiahnutie

Tu je návod, ako tieto dve funkcie zapadajú do skutočnej funkcie, pričom sa používa len to, čo dnes dokumentuje Figma.

1. Presuňte svoj PRD na plátno. Vaša existujúca .md súbor sa stáva spec. Nič sa neprepisuje a ručná úprava nepoužíva žiadne kredity AI.
2. Vložte rámy, o ktorých hovorí. Použite / na pridanie tokov, ktoré popisuje PRD. Recenzenti teraz vidia požiadavku a obrazovku spolu.
3. Premeňte kľúčové snímky na vrstvu kódu. Vyberte ich a požiadajte agenta. Ak už máte prototyp repo, importujte ho zo GitHub.
4. Recenzia na jednom mieste. Zhromažďujte pripomienky k špecifikácii a vrstve kódu. Požiadajte agenta Figma, aby odpovedal na každý otvorený komentár s navrhovanou opravou, kým sa ľudia budú zaoberať rovnakými vláknami.
5. Odovzdajte špecifikáciu. Prilepte odkaz na špecifikáciu do Codex, Claude Code alebo Cursor pripojeného k serveru Figma MCP. Agent získa Markdown plus prepojený kontext návrhu.
6. Pošlite prototypový kód. Preneste zmeny kódovej vrstvy do vetvy a otvorte požiadavku na stiahnutie, aby inžinieri skontrolovali pred zlúčením.

Výstupom je špecifikácia, ktorú môže váš kódovací agent prečítať, a funkčný prototyp, ktorý váš tím skutočne preklikal. Otestujte vygenerovaný kód ako každý iný kód. Prototyp, ktorý beží, nie je to isté ako kód pripravený na výrobu.

Ak je ďalším krokom premena návrhu Figma na kód, ktorý môžete spustiť, alebo návrh v kóde z výzvy, to je úloha Anima Playground.

Čo stoja kódové vrstvy a Specs?

• Vrstvy kódu používajú kredity AI. Na platených plánoch je generovanie a úprava vnútri kódovej vrstvy do 4. novembra 2026 zadarmo. Iná práca agenta v rovnakom riadku stále používa kredity a po 4. novembri všetky úlohy kódovej vrstvy používajú kredity.
• Specs sú voľne zapisovateľné. Vlastné písanie a úprava špecifikácie nepoužíva kredity. Použitie agenta so špecifikáciou áno. Po každej výzve umiestnite kurzor myši na účtenku, aby ste videli, koľko to stojí.
• Payload a pokyny zvyšujú náklady. Figma poznamenáva, že obe poskytujú agentovi viac kontextu a viac práce, takže rovnaká výzva môže použiť viac kreditov.

Obmedzenia, ktoré je potrebné skontrolovať predtým, ako ich naplánujete

• Zavádzanie. Obidve funkcie sú otvorené beta verzie, ktoré sa zavádzajú niekoľko týždňov. Vyhľadajte ikonu Kód na paneli nástrojov Figma Design a možnosť Spec v prehliadači súborov.
• Plány. Specs potrebuje platený plán. Začínajúci používatelia dostanú vrstvy kódu, ale nie Specs. Obaja potrebujú na vytvorenie prístup na úpravy.
• Odhlasovanie. Vrstvy kódu môžu vypnúť iba správcovia podnikov, a to iba vypnutím všetkých funkcií AI Figma.
• Veľkosť repo. Import GitHub je určený pre ľahké prototypové kódové základne, nie pre úplnú produkčnú aplikáciu.
• Návrhový systémový kód. Pripojenie vášho skutočného kódu komponentov prostredníctvom zdrojov kódu je stále uzavretá beta verzia, takže vrstvy kódu ešte nemusia používať vaše produkčné komponenty.

Kde sa zastaví Figma a kde sa zmestia Anima a AgentGrid.io

Ak celý váš tím pracuje v Figma, vrstvy kódu a Specs sú silnou predvolenou hodnotou. Prototyp, plán a komentáre sú v rovnakom súbore a môžu na nich pracovať agent Figma a klienti MCP.

Dve bežné situácie stále spadajú mimo tohto súboru.

Myšlienka začala niekde inde. Prototyp Claude Design, stránka HTML vygenerovaná ChatGPT alebo živá stránka, z ktorej sa chcete učiť. Server Figma MCP má teraz html_to_figma nástroj pre agentom generovaný HTML. Buddy od Anima, náš dizajnérsky agent AI v Figma, sa tiež otáča HTML, Claudeove artefakty, obrázky a adresy URL do upraviteľných vrstiev Figma, čo je užitočné, keď chcete pokračovať v navrhovaní na týchto vrstvách pomocou vášho návrhového systému.

Výsledok musí opustiť Figma. Vaša špecifikácia alebo prototyp musí byť skontrolovaný ľuďmi mimo vášho tímu Figma, upravený agentmi od niekoľkých dodávateľov alebo zverejnený ako živý odkaz. To je úloha, ktorú robí AgentGrid.io, ktorý vytvoril Anima. Artefakt Markdown na AgentGrid.io je živý, automaticky sa ukladajúci dokument, ktorý môžu upravovať ľudia a pripojení agenti, ako sú Claude, ChatGPT, Cursor a Grok Bot, pričom každá zmena je priradená názvom v histórii verzií. Artefakt HTML je spustená stránka, ktorú môžete komentovať a publikovať na verejnej adrese URL, keď bude schválená. Môžete tiež importovať jeden rám Figma do AgentGrid.io ako artefakt aplikácie. Tento import je jednosmerný, takže neskoršie úpravy Figma sa nesynchronizujú.

Títo dvaja nesúťažia o rovnaký krok. Figma vlastní dizajnové plátno. AgentGrid.io je miesto Markdown Artefakty HTML odchádzajú, keď práca prekračuje nástroje a tímy.

Vyskúšajte AgentGrid.io zachovať špecifikáciu alebo prototyp, ktorý môže upravovať a publikovať každý agent vo vašom tíme.

Použite každý nástroj, keď

• Použite vrstvy kódu Figma keď zainteresované strany potrebujú kliknúť na funkčný prototyp vedľa návrhov a porovnať smery vedľa seba.
• Použite Figma Specs kedy by mal plán žiť vedľa rámcov a mal by byť prečítaný kódovacím agentom cez server Figma MCP.
• Použite Anima Playground keď chcete navrhovať priamo v kóde pomocou AI alebo premeniť dizajn Figma na upraviteľnú aplikáciu, ktorú si môžete prezrieť a publikovať.
• Použite Buddy keď je počiatočný bod mimo Figma a chcete na plátne upraviteľné vrstvy. Podrobnejšie porovnanie zostavovania v Figma oproti zostavovateľovi prehliadača nájdete na Figma Make vs Anima Playground.
• Použite AgentGrid.io keď špecifikáciu alebo prototyp musia upraviť ľudia a agenti v rámci nástrojov, skontrolovať s komentármi a zverejniť ako živý odkaz.

Často kladené otázky

Čo sú kódové vrstvy v Figma?

Kódová vrstva je vrstva na plátne Figma, ktorá obsahuje skutočný spustený kód. Môžete si vytvoriť jeden z vybraných snímok, živú webovú stránku zachytenú pomocou rozšírenia Figma Chrome, prototypové úložisko GitHub alebo prázdnu výzvu, potom na ňu kliknúť, komentovať ju a duplikovať, aby ste mohli porovnávať smery.

Je Figma Specs len Markdown?

Specs používa Markdown pre svoj text a môžete pretiahnuť ľubovoľný súbor .md na plátno a vytvoriť ho. Okolo tohto textu pridáva funkcie Figma: vložené rámce a dosky FigJam, komentáre a agenta, ktorý môže tieto komentáre čítať a odpovedať na ne.

Stojí kódové vrstvy Figma kredity AI?

áno. Na platených plánoch je generovanie a úprava vnútri kódovej vrstvy do 4. novembra 2026 zadarmo. Iná práca agentov v rovnakom riadku stále používa kredity a po 4. novembri všetky úlohy kódovej vrstvy používajú kredity AI.

Dokáže Claude Code, Codex alebo Cursor prečítať Figma Spec?

Áno, ak sú pripojené k serveru Figma MCP. Kódovací agenti môžu čítať, vytvárať a aktualizovať špecifikácie pomocou zručnosti figma-spec a do výzvy môžete prilepiť odkaz na špecifikáciu, aby ste mohli odovzdať prepojený kontext návrhu.

Ktoré plány Figma zahŕňajú Specs?

Specs je v otvorenej beta verzii na platených plánoch: Professional, Organization, Enterprise a Education, plus vláda podľa článku Figma Config India. Nie je v bezplatnom štartovacom pláne. Vrstvy kódu sa zavádzajú do všetkých plánov vrátane Starter.