Figma Кодови слоеве и Specs: Какво представляват, как работят и къде спират2 min read

Слоевете с код Figma поставят работещ код върху платното, а Figma Specs поставя Markdown също там. И двете влязоха в отворена бета версия на Config India на 15 октомври 2026 г., така че проектният файл вече може да съдържа рамки, работещ прототип и писмения план, от който агентът изгражда.

Това ръководство е за дизайнери, PM и фронтенд инженери, които решават дали да преместят работата по прототипа и спецификациите в Figma. Той обхваща какво прави всяка функция, как да започнете, колко струва в AI кредити и къде трябва да остави работата Figma за съотборниците в Claude, ChatGPT или Cursor.

В ерата на AI дизайнът е код. За да проектирате директно в код с AI или да превърнете вашите Figma проекти в код, използвайте Anima Playground: опишете екран или започнете от Figma дизайн, след което продължете да итерирате в редактируемо приложение, което можете да визуализирате и публикувате.

Проектирайте директно в код с AI

Дизайн с AI: Опишете екран или превърнете дизайните на Figma в код.

Какво пусна Figma на Config India 2026?

Кодовите слоеве и Specs бяха заглавието, но те пристигнаха с набор от агентни функции около тях. Ето текущото състояние от помощния център на Figma:

И двете бета версии се разпространяват в продължение на няколко седмици, така че може да ги видите преди или след останалата част от вашия екип.

Какво представляват кодовите слоеве Figma?

Кодовият слой е слой, който съдържа реален, работещ код. Вместо прототип, който фалшифицира взаимодействия с рамкови връзки, вие получавате работещ, подкрепен с код прототип, разположен на платното до вашите проекти. Съотборниците могат да щракнат върху него, да го коментират и да го дублират, за да опитат друга посока един до друг.

Figma ви дава четири начина да започнете:

• От дизайн. Изберете рамки и помолете агента Figma да ги превърне в кодов слой.
• От уебсайт на живо. Заснемете страница с разширението Figma Chrome и я поставете върху платното.
• От репо. Импортирайте поддържана, лека кодова база за прототипиране от GitHub или локална папка. Импортирането на GitHub остава свързано с това хранилище.
• От нулата. Добавете празен кодов слой и подканете агента да изгради.

Можете също да пренесете прототип, който сте създали в инструмент за кодиране, върху платното чрез сървъра Figma MCP.

Редактирането става по три начина. Вие подканвате агента, коментирате рамки, за да му покажете къде принадлежи промяната, или отваряте редактора на код и сами променяте кода. Когато визуалните детайли са по-важни от кода, Extract designs превръща екрани от кодов слой обратно в редактируеми Figma рамки. Когато кодът е готов за инженерите, можете да го изпратите до клон и да отворите заявка за изтегляне.

Какво е Figma Specs?

Figma нарича Specs „роден дом за контекст“. На практика това е съвместен Markdown документ, който живее или върху платното на Figma Design файл или FigJam платка, или като собствен Spec файл.

Започването е бързо:

1. Създайте самостоятелен Spec от файловия браузър или отидете на figma.com/spec/new.
2. Във файл с дизайн или платка FigJam щракнете върху Spec в лентата с инструменти или натиснете г.
3. Вече имам .md файл? Плъзнете го върху платното и той става спецификация.
4. Напишете с Markdown, който вече знаете: # за заглавия, - за куршуми, [] за задачи, > за кавички, три обратни точки за код. Тип / за изображения, Figma вграждане и разделители.

Това, което прави спецификацията повече от Markdown файл, е това, което стои около текста. Можете да вградите рамка, платка FigJam или произволен възел от платното, така че изискването и дизайнът, който описва, да останат един до друг. Съотборниците го коментират и агентът Figma може да прочете и да отговори на тези коментари.

Specs също работи извън Figma. Кодиращите агенти, свързани със сървъра Figma MCP, могат да четат, създават и актуализират спецификации, използвайки figma-spec умение. За да предадете един, вие копирате спецификационната връзка в подканата на вашия кодиращ агент и свързаните рамки, диаграми, кодови слоеве и Code Connect фрагменти идват с нея.

Защо Markdown стана форматът за предаване

Собственият стартов пост на Figma го казва ясно: Markdown вече е де факто форматът за споделяне на контекст с агенти. Всеки кодиращ агент го чете. Повечето продуктови екипи вече съхраняват планове, PRD и инструкции на агенти .md файлове.

Моето четене е, че Specs е Figma, който приема, че предаването на агент е текст, след което прави този текст мултиплейър. Местен AGENTS.md или PRD никога не се провали поради формата. Не успя, защото само един човек го редактира, той се отклони от дизайна и никой не можеше да види коя версия използва агентът.

В Figma, Specs поправя това. Откритият въпрос е какво се случва извън него. Вгражданията, коментарите и референциите за дизайн на живо са функции на Figma и агентите достигат до тях чрез клиенти, изброени в каталога на Figma MCP. Ако вашите инженери, ChatGPT на вашия PM и Claude на маркетинговия ви екип се нуждаят от един и същ план, все пак трябва да решите къде живее споделеното копие.

Практичен работен процес: от PRD до кодов слой до заявка за изтегляне

Ето как двете функции се вписват в реална характеристика, използвайки само това, което Figma документира днес.

1. Плъзнете вашия PRD върху платното. Вашето съществуване .md файлът става спец. Нищо не се пренаписва и редактирането му на ръка не използва AI кредити.
2. Вградете рамките, за които говори. Използвайте / за добавяне на потоците, описани от PRD. Рецензентите вече виждат изискването и екрана заедно.
3. Превърнете ключовите кадри в кодов слой. Изберете ги и подканете агента. Ако вече имате прототип на репо, вместо това го импортирайте от GitHub.
4. Ревю на едно място. Съберете коментари за спецификацията и кодовия слой. Помолете агента Figma да отговори на всеки отворен коментар с предложена корекция, докато хората обсъждат едни и същи теми.
5. Премахнете спецификацията. Поставете връзката към спецификацията в Codex, Claude Code или Cursor, свързани със сървъра Figma MCP. Агентът получава Markdown плюс свързания контекст на дизайна.
6. Изпратете кода на прототипа. Преместете промените на кодовия слой в клон и отворете заявка за изтегляне, така че инженерите да прегледат преди сливане.

Резултатът е спецификация, която вашият кодиращ агент може да прочете и работещ прототип, който вашият екип действително е прегледал. Тествайте генерирания код като всеки друг код. Прототип, който работи, не е същото като код, готов за производство.

Ако следващата стъпка е превръщането на Figma дизайн в код, който можете да стартирате, или проектиране в код от подкана, това е работата на Anima Playground.

Какво струват кодовите слоеве и Specs?

• Кодовите слоеве използват AI кредити. При платени планове генерирането и редактирането в кодов слой е безплатно до 4 ноември 2026 г. Друга работа на агент в същата подкана все още използва кредити, а след 4 ноември всички задачи на кодов слой използват кредити.
• Specs са свободни да пишат. Въвеждането и редактирането на спецификация сами не използва кредити. Използването на агента със спецификация прави. Задръжте курсора върху разписката след всяка подкана, за да видите колко струва.
• Payload и указанията добавят разходи. Figma отбелязва, че и двете дават на агента повече контекст и повече работа, така че една и съща подкана може да използва повече кредити.

Ограничения, които трябва да проверите, преди да планирате да ги заобиколите

• Разпространение. И двете функции са отворени бета версии, които се разпространяват в продължение на седмици. Потърсете иконата на кода в лентата с инструменти Figma Design и опцията Spec във файловия браузър.
• Планове. Specs се нуждае от платен план. Началните потребители получават слоеве с код, но не и Specs. И двете се нуждаят от достъп за редактиране, за да създават.
• Отказ. Само корпоративни администратори могат да изключват слоевете с код и само като изключат всички Figma AI функции.
• Размер на репо. Импортирането на GitHub е за олекотени кодови бази за прототипиране, а не за пълно производствено приложение.
• Системен код за проектиране. Свързването на вашия реален код на компонент чрез кодови източници все още е затворена бета версия, така че слоевете на кода може все още да не използват вашите производствени компоненти.

Къде спира Figma и къде пасват Anima и AgentGrid.io

Ако целият ви екип работи в Figma, кодовите слоеве и Specs са силни по подразбиране. Прототипът, планът и коментарите се намират в един и същ файл и агентът на Figma и клиентите на MCP могат да работят върху тях.

Две често срещани ситуации все още попадат извън този файл.

Идеята започна някъде другаде. Claude Design прототип, ChatGPT генерирана HTML страница или жив сайт, от който искате да се учите. MCP сървърът на Figma вече има html_to_figma инструмент за генериран от агент HTML. Buddy на Anima, нашият AI дизайнерски агент в Figma, също се превръща HTML, Claude артефакти, изображения и URL адреси в редактируеми Figma слоеве, което е полезно, когато искате да продължите да проектирате върху тези слоеве с вашата система за проектиране.

Резултатът трябва да напусне Figma. Вашата спецификация или прототип трябва да бъде прегледан от хора извън вашия Figma екип, редактиран от агенти от няколко доставчици или публикуван като връзка на живо. Това е работата, която върши AgentGrid.io, създаден от Anima. Markdown артефакт на AgentGrid.io е жив, автоматично запазващ се документ, който хора и свързани агенти като Claude, ChatGPT, Cursor и Grok Bot могат да редактират, като всяка промяна се приписва по име в хронологията на версиите. HTML артефакт е работеща страница, която можете да коментирате и публикувате на публичен URL адрес, когато бъде одобрена. Можете също да импортирате един кадър Figma в AgentGrid.io като артефакт на приложение. Това импортиране е еднопосочно, така че по-късните редакции на Figma не ​​се синхронизират.

Двамата не се борят за едно и също стъпало. Figma притежава дизайнерското платно. AgentGrid.io е мястото, където Markdown и HTML артефактите изчезват, когато работата пресича инструменти и екипи.

Опитайте AgentGrid.io да запазите спецификация или прототип, който всеки агент от вашия екип може да редактира и публикува.

Използвайте всеки инструмент, когато

• Използвайте Figma кодови слоеве когато заинтересованите страни трябва да щракнат върху работещ прототип до дизайните и да сравнят посоките един до друг.
• Използвайте Figma Specs когато планът трябва да живее извън рамките и да бъде прочетен от кодиращ агент през сървъра Figma MCP.
• Използвайте Anima Playground когато искате да проектирате директно в код с AI или да превърнете Figma дизайн в редактируемо приложение, което можете да визуализирате и публикувате.
• Използвайте Buddy когато началната точка е извън Figma и искате редактируеми слоеве върху платното. За по-пълно сравнение на изграждането в Figma спрямо конструктор на браузър вижте Figma Make срещу Anima Playground.
• Използвайте AgentGrid.io когато спецификацията или прототипът трябва да бъдат редактирани от хора и агенти в различни инструменти, прегледани с коментари и публикувани като връзка на живо.

Често задавани въпроси

Какво представляват кодовите слоеве в Figma?

Кодовият слой е слой върху платното Figma, който съдържа реален работещ код. Можете да създадете такъв от избрани рамки, уебсайт на живо, заснет с разширението Figma Chrome, GitHub репо за прототипиране или празна подкана, след което щракнете върху него, коментирайте го и го дублирайте, за да сравните указанията.

Figma Specs само Markdown ли е?

Specs използва Markdown за своя текст и можете да плъзнете всеки .md файл върху платното, за да създадете такъв. Той добавя Figma функции около този текст: вградени рамки и FigJam дъски, коментари и агент, който може да чете и отговаря на тези коментари.

Кодовите слоеве Figma струват ли AI кредити?

да При платени планове генерирането и редактирането в кодов слой е безплатно до 4 ноември 2026 г. Другата работа на агента в същата подкана все още използва кредити, а след 4 ноември всички задачи на кодовия слой използват AI кредити.

Могат ли Claude Code, Codex или Cursor да четат Figma Spec?

Да, ако са свързани към сървъра Figma MCP. Кодиращите агенти могат да четат, създават и актуализират спецификации с умението figma-spec и можете да поставите връзка към спецификация във вашата подкана, за да предадете нейния свързан контекст на проектиране.

Кои Figma планове включват Specs?

Specs е в отворена бета версия на платени планове: Професионален, Организационен, Корпоративен и Образователен, плюс Държавен съгласно статия Config India на Figma. Не е в безплатния стартов план. Слоевете с код се разпространяват във всички планове, включително Starter.