Figma Code Layers at Specs: Ano Sila, Paano Sila Gumagana, at Saan Sila Huminto14 min read

Ang mga layer ng Figma code ay naglalagay ng running code sa canvas, at ang Figma Specs ay naglagay din ng Markdown doon. Parehong pumasok sa open beta sa Config India noong Oktubre 15, 2026, kaya ang isang file ng disenyo ay maaari na ngayong maglaman ng mga frame, isang gumaganang prototype at ang nakasulat na plano kung saan binuo ng isang ahente.

Ang gabay na ito ay para sa mga designer, PM at front-end engineer na nagpapasya kung ililipat ang prototype at spec work sa Figma. Sinasaklaw nito kung ano ang ginagawa ng bawat feature, kung paano magsisimula, kung ano ang halaga nito sa mga AI credit, at kung saan dapat umalis ang trabaho sa Figma para sa mga kasamahan sa koponan sa Claude, ChatGPT o Cursor.

Sa edad ng AI, ang disenyo ay code. Upang direktang magdisenyo sa code gamit ang AI, o upang gawing code ang iyong mga disenyo ng Figma, gamitin Anima Playground: ilarawan ang isang screen o magsimula sa isang Figma na disenyo, pagkatapos ay patuloy na mag-ulit sa isang nae-edit na app na maaari mong i-preview at i-publish.

Direktang Disenyo sa Code na may AI

Disenyo gamit ang AI: Ilarawan ang isang screen o gawing code ang mga disenyo ng Figma.

Ano ang inilunsad ng Figma sa Config India 2026?

Ang mga layer ng code at Specs ang headline, ngunit dumating ang mga ito na may kasamang hanay ng mga feature ng ahente sa paligid nila. Narito ang kasalukuyang status mula sa help center ng Figma:

Ang parehong mga beta ay inilunsad sa loob ng ilang linggo, kaya maaari mong makita ang mga ito bago o pagkatapos ng natitirang bahagi ng iyong koponan.

Ano ang Figma code layers?

Ang layer ng code ay isang layer na naglalaman ng tunay, tumatakbong code. Sa halip na isang prototype na nagpapanggap ng mga pakikipag-ugnayan sa mga link ng frame, makakakuha ka ng isang gumagana at naka-back code na prototype na nakaupo sa canvas sa tabi ng iyong mga disenyo. Maaaring i-click ito ng mga kasamahan sa koponan, magkomento dito, at i-duplicate ito upang subukan ang ibang direksyon nang magkatabi.

Binibigyan ka ng Figma ng apat na paraan upang magsimula ng isa:

• Mula sa isang disenyo. Pumili ng mga frame at hilingin sa ahente ng Figma na gawing code layer ang mga ito.
• Mula sa isang live na website. Kumuha ng page na may extension na Figma Chrome at i-paste ito sa canvas.
• Mula sa isang repo. Mag-import ng suportado, magaan na prototyping codebase mula sa GitHub o isang lokal na folder. Ang GitHub import ay mananatiling konektado sa repositoryong iyon.
• Mula sa simula. Magdagdag ng walang laman na layer ng code at i-prompt ang ahente na bumuo.

Maaari ka ring magdala ng prototype na ginawa mo sa isang coding tool papunta sa canvas sa pamamagitan ng Figma MCP server.

Ang pag-edit ay nangyayari sa tatlong paraan. Ipo-prompt mo ang ahente, i-annotate mo ang mga frame upang ipakita ito kung saan kabilang ang isang pagbabago, o buksan mo ang editor ng code at ikaw mismo ang magpalit ng code. Kapag ang mga visual na detalye ay mas mahalaga kaysa sa code, Extract designs ginagawang nae-edit na Figma frame ang mga screen mula sa isang layer ng code. Kapag handa na ang code para sa mga inhinyero, maaari mo itong itulak sa isang sangay at magbukas ng pull request.

Ano ang Figma Specs?

Tinatawag ng Figma ang Specs na “isang katutubong tahanan para sa konteksto.” Sa pagsasagawa, ito ay isang collaborative na Markdown na dokumento na makikita sa canvas ng Figma Design file o FigJam board, o bilang sarili nitong Spec file.

Mabilis ang pagsisimula:

1. Gumawa ng standalone na Spec mula sa file browser, o pumunta sa figma.com/spec/new.
2. Sa loob ng isang Design file o FigJam board, i-click ang Spec sa toolbar o pindutin ang D.
3. Mayroon nang isang .md file? I-drag ito sa canvas at ito ay naging spec.
4. Sumulat gamit ang Markdown na alam mo na: # para sa mga pamagat, - para sa mga bala, [] para sa mga dapat gawin, > para sa mga quote, tatlong backtick para sa code. Uri / para sa mga larawan, Figma embed at divider.

Ang dahilan kung bakit ang isang spec ay higit pa sa isang Markdown file ay kung ano ang nasa paligid ng text. Maaari kang mag-embed ng isang frame, isang FigJam board o anumang node mula sa canvas, kaya ang kinakailangan at ang disenyo na inilalarawan nito ay mananatiling magkatabi. Nagkomento dito ang mga kasamahan sa koponan, at ang ahente ng Figma ay maaaring magbasa at tumugon sa mga komentong iyon.

Gumagana rin ang Specs sa labas ng Figma. Ang mga ahente ng coding na konektado sa Figma MCP server ay maaaring magbasa, gumawa at mag-update ng mga detalye gamit ang figma-spec kasanayan. Upang ibigay ang isa, kokopyahin mo ang spec link sa prompt ng iyong coding agent, at kasama nito ang mga naka-link na frame, diagram, code layer at Code Connect snippet.

Bakit Markdown ang naging hand-off na format

Malinaw na sinasabi ng sariling post ng paglulunsad ng Figma: Markdown na ngayon ang de facto na format para sa pagbabahagi ng konteksto sa mga ahente. Binabasa ito ng bawat coding agent. Karamihan sa mga team ng produkto ay nagpapanatili na ng mga plano, PRD at mga tagubilin sa ahente .md mga file.

Ang nabasa ko ay ang Specs ay Figma na tinatanggap na ang hand-off sa isang ahente ay text, pagkatapos ay gagawing Multiplayer ang text na iyon. Isang lokal AGENTS.md o PRD ay hindi kailanman nabigo dahil sa format. Nabigo ito dahil isang tao lang ang nag-edit nito, naalis ito sa mga disenyo, at walang makakita kung aling bersyon ang ginamit ng ahente.

Sa loob ng Figma, inaayos iyon ng Specs. Ang bukas na tanong ay kung ano ang nangyayari sa labas nito. Ang mga embed, komento at live na sanggunian sa disenyo ay mga feature ng Figma, at inaabot sila ng mga ahente sa pamamagitan ng mga kliyenteng nakalista sa Figma MCP catalog. Kung ang iyong mga inhinyero, ang ChatGPT ng iyong PM at ang Claude ng iyong marketing team ay nangangailangan ng parehong plano, kailangan mo pa ring magpasya kung saan nakatira ang nakabahaging kopya.

Isang praktikal na daloy ng trabaho: mula sa PRD hanggang sa layer ng code upang humiling ng kahilingan

Narito kung paano magkatugma ang dalawang feature sa isang tunay na feature, gamit lang ang mga dokumento ng Figma ngayon.

1. I-drag ang iyong PRD papunta sa canvas. Ang iyong umiiral .md ang file ay nagiging spec. Walang muling isinulat, at ang pag-edit nito sa pamamagitan ng kamay ay hindi gumagamit ng AI credits.
2. I-embed ang mga frame na pinag-uusapan nito. Gamitin / upang idagdag ang mga daloy na inilalarawan ng PRD. Nakikita na ngayon ng mga tagasuri ang kinakailangan at ang screen nang magkasama.
3. Gawing code layer ang mga key frame. Piliin ang mga ito at i-prompt ang ahente. Kung mayroon ka nang prototype repo, i-import ito mula sa GitHub sa halip.
4. Suriin sa isang lugar. Kolektahin ang mga komento sa spec at ang code layer. Hilingin sa ahente ng Figma na tumugon sa bawat bukas na komento na may iminungkahing pag-aayos habang tinitimbang ng mga tao ang parehong mga thread.
5. Ibigay ang spec. I-paste ang spec link sa Codex, Claude Code o Cursor na konektado sa Figma MCP server. Nakukuha ng ahente ang Markdown kasama ang naka-link na konteksto ng disenyo.
6. Ipadala ang prototype code. Itulak ang mga pagbabago sa layer ng code sa isang sangay at magbukas ng kahilingan sa paghila upang suriin ng mga inhinyero bago pagsamahin.

Ang output ay isang spec na mababasa ng iyong coding agent at isang gumaganang prototype na aktwal na na-click ng iyong team. Subukan ang nabuong code tulad ng iba pang code. Ang isang prototype na tumatakbo ay hindi katulad ng production-ready code.

Kung ang susunod na hakbang ay gawing code ang isang Figma na disenyo na maaari mong patakbuhin, o pagdidisenyo ng code mula sa isang prompt, iyon ang trabaho ng Anima Playground.

Ano ang halaga ng mga layer ng code at Specs?

• Gumagamit ang mga layer ng code ng mga AI credit. Sa mga bayad na plano, ang pagbuo at pag-edit sa loob ng isang layer ng code ay libre hanggang Nobyembre 4, 2026. Gumagamit pa rin ng mga credit ang iba pang ahente na nagtatrabaho sa parehong prompt, at pagkatapos ng Nobyembre 4 lahat ng mga gawain sa layer ng code ay gumagamit ng mga credit.
• Ang Specs ay malayang sumulat. Ang pag-type at pag-edit ng spec mismo ay hindi gumagamit ng mga credit. Ang paggamit ng ahente na may spec ay ginagawa. I-hover ang resibo pagkatapos ng bawat prompt upang makita kung magkano ang halaga nito.
• Ang Payload at mga alituntunin ay nagdaragdag ng gastos. Sinabi ng Figma na parehong nagbibigay sa ahente ng mas maraming konteksto at mas maraming trabaho, kaya ang parehong prompt ay maaaring gumamit ng higit pang mga kredito.

Mga limitasyon upang suriin bago ka magplano sa paligid nila

• Rollout. Ang parehong mga tampok ay mga bukas na beta na lumalabas sa mga linggo. Hanapin ang icon ng Code sa Figma Design toolbar at ang Spec na opsyon sa file browser.
• Mga plano. Ang Specs ay nangangailangan ng isang bayad na plano. Ang mga nagsisimulang user ay nakakakuha ng mga layer ng code ngunit hindi Specs. Parehong nangangailangan ng access sa pag-edit para makagawa.
• Nag-o-opt out. Ang mga Admin ng Enterprise lang ang makakapag-off ng mga layer ng code, at sa pamamagitan lang ng pag-off sa lahat ng feature ng Figma AI.
• Laki ng repo. Ang GitHub import ay para sa magaan na prototyping codebase, hindi isang buong production app.
• Code ng sistema ng disenyo. Ang pagkonekta sa iyong tunay na component code sa pamamagitan ng mga source source ay isa pa ring closed beta, kaya maaaring hindi pa gamitin ng mga layer ng code ang iyong production component.

Kung saan humihinto ang Figma, at kung saan magkasya ang Anima at AgentGrid.io

Kung gumagana ang iyong buong team sa Figma, ang mga layer ng code at Specs ay isang malakas na default. Ang prototype, ang plano at ang mga komento ay nasa parehong file, at ang ahente ng Figma at ang mga kliyente ng MCP ay maaaring magtrabaho sa kanila.

Dalawang karaniwang sitwasyon ang nasa labas pa rin ng file na iyon.

Nagsimula ang ideya sa ibang lugar. Isang Claude Design prototype, isang ChatGPT-generated na HTML page, o isang live na site na gusto mong matutunan. Ang MCP server ng Figma ay mayroon na ngayong isang html_to_figma tool para sa HTML na binuo ng ahente. Ang Buddy ng Anima, ang aming AI design agent sa loob ng Figma, ay lumiliko din HTML, Claude artifact, larawan at URL sa mga nae-edit na Figma na layer, na kapaki-pakinabang kapag gusto mong ipagpatuloy ang pagdidisenyo sa mga layer na iyon gamit ang iyong sistema ng disenyo.

Ang resulta ay kailangang umalis sa Figma. Ang iyong spec o prototype ay kailangang suriin ng mga tao sa labas ng iyong Figma team, na-edit ng mga ahente mula sa ilang vendor, o na-publish bilang isang live na link. Iyan ang ginagawa ng AgentGrid.io, na binuo ng Anima. Ang Markdown artifact sa AgentGrid.io ay isang live at autosaving na dokumento na maaaring i-edit ng mga tao at mga konektadong ahente gaya nina Claude, ChatGPT, Cursor at Grok Bot, sa bawat pagbabagong na-attribute ng pangalan sa history ng bersyon. Ang HTML artifact ay isang tumatakbong page na maaari mong komentohan at i-publish sa isang pampublikong URL kapag ito ay naaprubahan. Maaari ka ring mag-import ng isang Figma frame sa AgentGrid.io bilang isang artifact ng app. One-way ang import na iyon, kaya hindi nagsi-sync ang mga pag-edit ng Figma sa ibang pagkakataon.

Ang dalawa ay hindi nakikipagkumpitensya para sa parehong hakbang. Pagmamay-ari ng Figma ang design canvas. AgentGrid.io ay kung saan ang Markdown at HTML artifacts pumunta kapag ang trabaho ay tumatawid sa mga tool at team.

Subukan ang AgentGrid.io para mapanatili ang isang spec o prototype na maaaring i-edit at i-publish ng bawat ahente sa iyong team.

Gamitin ang bawat kasangkapan kapag

• Gumamit ng mga layer ng Figma code kapag kailangan ng mga stakeholder na mag-click ng gumaganang prototype sa tabi ng mga disenyo at maghambing ng mga direksyon nang magkatabi.
• Gamitin ang Figma Specs kapag ang plano ay dapat na nasa tabi ng mga frame at basahin ng isang coding agent sa pamamagitan ng Figma MCP server.
• Gamitin Anima Playground kapag gusto mong magdisenyo nang direkta sa code gamit ang AI, o gawing nae-edit na app ang Figma na disenyo, maaari mong i-preview at i-publish.
• Gamitin Buddy kapag ang panimulang punto ay nasa labas ng Figma at gusto mo ng mga nae-edit na layer sa canvas. Para sa isang mas kumpletong paghahambing ng gusali sa Figma kumpara sa isang tagabuo ng browser, tingnan Figma Make kumpara sa Anima Playground.
• Gamitin ang AgentGrid.io kapag ang spec o prototype ay dapat i-edit ng mga tao at ahente sa mga tool, suriin gamit ang mga komento, at i-publish bilang isang live na link.

Mga madalas itanong

Ano ang mga layer ng code sa Figma?

Ang code layer ay isang layer sa Figma canvas na naglalaman ng tunay at tumatakbong code. Maaari kang gumawa ng isa mula sa mga napiling frame, isang live na website na nakunan gamit ang extension na Figma Chrome, isang GitHub prototyping repo, o isang blangkong prompt, pagkatapos ay i-click ito, magkomento dito, at i-duplicate ito upang ihambing ang mga direksyon.

Ang Figma Specs lang ba ay Markdown?

Gumagamit ang Specs ng Markdown para sa text nito, at maaari mong i-drag ang anumang .md file papunta sa canvas upang lumikha ng isa. Nagdaragdag ito ng mga feature ng Figma sa paligid ng text na iyon: mga naka-embed na frame at FigJam na mga board, komento, at isang ahente na maaaring magbasa at tumugon sa mga komentong iyon.

Nagkakahalaga ba ang mga layer ng code ng Figma ng mga AI credit?

Oo. Sa mga bayad na plano, ang pagbuo at pag-edit sa loob ng isang layer ng code ay libre hanggang Nobyembre 4, 2026. Gumagamit pa rin ng mga credit ang iba pang ahente sa parehong prompt, at pagkatapos ng Nobyembre 4 lahat ng mga gawain sa layer ng code ay gumagamit ng mga AI credit.

Maaari bang basahin ng Claude Code, Codex o Cursor ang isang Figma Spec?

Oo, kung nakakonekta sila sa Figma MCP server. Maaaring magbasa, gumawa at mag-update ng mga spec ang mga ahente ng coding gamit ang kasanayang figma-spec, at maaari kang mag-paste ng link ng spec sa iyong prompt upang ipasa ang naka-link na konteksto ng disenyo nito.

Aling mga plano ng Figma ang kasama ang Specs?

Ang Specs ay nasa bukas na beta sa mga bayad na plano: Propesyonal, Organisasyon, Enterprise at Edukasyon, kasama ang Gobyerno bawat Figma na artikulo ng Config India. Wala ito sa libreng Starter plan. Ang mga layer ng code ay inilalabas sa lahat ng mga plano, kabilang ang Starter.