Figma Straturi de cod și Specs: ce sunt, cum funcționează și unde se opresc13 min read

Straturile de cod Figma pun codul de rulare pe pânză, iar Figma Specs a pus și Markdown acolo. Ambii au intrat în beta deschisă la Config India pe 15 octombrie 2026, așa că un fișier de design poate conține acum cadre, un prototip funcțional și planul scris din care se construiește un agent.

Acest ghid este pentru designeri, PM și ingineri de front-end care decid dacă să mute lucrările de prototip și specificații în Figma. Acesta acoperă ce face fiecare caracteristică, cum să înceapă, cât costă în credite AI și unde trebuie să lase munca Figma pentru colegii de echipă din Claude, ChatGPT sau Cursor.

În era AI, designul este cod. Pentru a proiecta direct în cod cu AI sau pentru a transforma desenele dvs. Figma în cod, utilizați Anima Playground: descrieți un ecran sau începeți de la un design Figma, apoi continuați să repetați o aplicație editabilă pe care o puteți previzualiza și publica.

Proiectați direct în cod cu AI

Proiectați cu AI: Descrieți un ecran sau transformați desenele Figma în cod.

Ce a lansat Figma la Config India 2026?

Straturile de cod și Specs au fost titlul, dar au sosit cu un set de caracteristici de agenți în jurul lor. Iată starea actuală din centrul de ajutor al lui Figma:

Ambele beta se lansează pe parcursul mai multor săptămâni, așa că le puteți vedea înainte sau după restul echipei.

Ce sunt straturile de cod Figma?

Un strat de cod este un strat care deține cod real, care rulează. În loc de un prototip care falsifică interacțiunile cu legăturile de cadru, obțineți un prototip funcțional, susținut de cod, așezat pe pânză de lângă desenele dvs. Coechipierii pot face clic pe el, îl pot comenta și îl pot duplica pentru a încerca o direcție diferită una lângă alta.

Figma vă oferă patru moduri de a începe unul:

• Dintr-un design. Selectați cadre și cereți agentului Figma să le transforme într-un strat de cod.
• De pe un site web live. Capturați o pagină cu extensia Figma Chrome și lipiți-o pe pânză.
• Dintr-un repo. Importați o bază de cod de prototipare acceptată și ușoară din GitHub sau dintr-un folder local. Un import GitHub rămâne conectat la acel depozit.
• De la zero. Adăugați un strat de cod gol și solicitați agentului să construiască.

De asemenea, puteți aduce un prototip pe care l-ați construit într-un instrument de codare pe pânză prin serverul Figma MCP.

Editarea are loc în trei moduri. Solicitați agentului, adnotați cadre pentru a-i arăta unde aparține o modificare sau deschideți editorul de cod și modificați singur codul. Când detaliile vizuale contează mai mult decât codul, Extract designs transformă ecranele dintr-un strat de cod înapoi în cadre editabile Figma. Când codul este gata pentru ingineri, îl puteți împinge într-o sucursală și puteți deschide o cerere de extragere.

Ce este Figma Specs?

Figma îl numește pe Specs „o casă nativă pentru context”. În practică, este un document Markdown colaborativ care se află fie pe pânza unui fișier Figma Design sau a unei plăci FigJam, fie ca propriul fișier Spec.

Începerea este rapidă:

1. Creați un Spec autonom din browserul de fișiere sau accesați figma.com/spec/new.
2. În interiorul unui fișier de design sau a unei plăci FigJam, faceți clic pe Spec în bara de instrumente sau apăsați D.
3. Ai deja un .md dosar? Trageți-l pe pânză și devine o specificație.
4. Scrieți cu Markdown pe care îl cunoașteți deja: # pentru titluri, - pentru gloanțe, [] pentru sarcini de făcut, > pentru ghilimele, trei backticks pentru cod. Tip / pentru imagini, Figma înglobări și separatoare.

Ceea ce face ca o specificație să fie mai mult decât un fișier Markdown este ceea ce se află în jurul textului. Puteți încorpora un cadru, o placă FigJam sau orice nod din pânză, astfel încât cerințele și designul pe care îl descrie rămân unul lângă celălalt. Coechipierii comentează, iar agentul Figma poate citi și răspunde la aceste comentarii.

Specs funcționează și în afara Figma. Agenții de codare conectați la serverul Figma MCP pot citi, crea și actualiza specificațiile folosind figma-spec pricepere. Pentru a preda unul, copiați linkul de specificații în promptul agentului de codificare, iar cadrele, diagramele, straturile de cod și fragmentele Code Connect vin împreună cu el.

De ce Markdown a devenit formatul hand-off

Postarea de lansare a lui Figma spune clar: Markdown este acum formatul de facto pentru partajarea contextului cu agenții. Fiecare agent de codificare îl citește. Majoritatea echipelor de produse păstrează deja planurile, PRD-urile și instrucțiunile pentru agenți .md fişiere.

Am citit că Specs este Figma, acceptând că transferul către un agent este text, apoi face textul în multiplayer. Un localnic AGENTS.md sau PRD nu a eșuat niciodată din cauza formatului. A eșuat pentru că o singură persoană a editat-o, s-a îndepărtat de design și nimeni nu a putut vedea ce versiune a folosit agentul.

În interiorul Figma, Specs rezolvă asta. Întrebarea deschisă este ce se întâmplă în afara ei. Încorporarile, comentariile și referințele de design live sunt caracteristici Figma, iar agenții le ajung prin clienții listați în catalogul Figma MCP. Dacă inginerii dvs., ChatGPT de la PM și Claude de la echipa dvs. de marketing au nevoie de același plan, tot trebuie să decideți unde se află copia partajată.

Un flux de lucru practic: de la PRD la stratul de cod pentru a solicita extragerea

Iată cum se potrivesc cele două caracteristici într-o caracteristică reală, folosind doar ceea ce Figma documentează astăzi.

1. Trageți PRD pe pânză. existenta ta .md fișierul devine o specificație. Nimic nu este rescris, iar editarea manuală nu folosește credite AI.
2. Încorporați cadrele despre care vorbește. Utilizați / pentru a adăuga fluxurile descrise de PRD. Evaluatorii văd acum cerința și ecranul împreună.
3. Transformați cadrele cheie într-un strat de cod. Selectați-le și solicitați agentului. Dacă aveți deja un prototip de depozit, importați-l din GitHub.
4. Recenzie într-un singur loc. Colectați comentarii privind specificațiile și stratul de cod. Cereți agentului Figma să răspundă la fiecare comentariu deschis cu o remediere sugerată, în timp ce oamenii cântăresc aceleași fire.
5. Predați specificațiile. Lipiți linkul pentru specificații în Codex, Claude Code sau Cursor conectat la serverul Figma MCP. Agentul primește Markdown plus contextul de proiectare legat.
6. Trimiteți codul prototipului. Împingeți modificările stratului de cod într-o ramură și deschideți o cerere de extragere, astfel încât inginerii să examineze înainte de fuzionare.

Rezultatul este o specificație pe care agentul dvs. de codificare poate citi și un prototip de lucru pe care echipa dvs. a accesat efectiv. Testați codul generat ca orice alt cod. Un prototip care rulează nu este același cu codul pregătit pentru producție.

Dacă următorul pas este transformarea unui design Figma în cod, puteți rula sau proiectarea în cod dintr-un prompt, acesta este sarcina lui Anima Playground.

Cât costă straturile de cod și Specs?

• Straturile de cod folosesc credite AI. În planurile plătite, generarea și editarea în interiorul unui strat de cod este gratuită până pe 4 noiembrie 2026. Alți agenți care lucrează în același prompt folosesc în continuare credite, iar după 4 noiembrie toate sarcinile stratului de cod folosesc credite.
• Specs sunt liberi să scrie. Tastarea și editarea unei specificații personal nu utilizează credite. Folosirea agentului cu o specificație face. Treceți cu mouse-ul pe chitanță după fiecare solicitare pentru a vedea cât costă.
• Payload și liniile directoare adaugă costuri. Figma observă că ambele oferă agentului mai mult context și mai multă muncă, astfel încât același prompt poate folosi mai multe credite.

Limite de verificat înainte de a planifica în jurul lor

• Lansare. Ambele funcții sunt beta deschise care se lansează peste săptămâni. Căutați pictograma Cod în bara de instrumente Figma Design și opțiunea Spec în browserul de fișiere.
• Planuri. Specs are nevoie de un plan plătit. Utilizatorii începători primesc straturi de cod, dar nu Specs. Ambele au nevoie de acces de editare pentru a crea.
• Renunțarea. Doar administratorii Enterprise pot dezactiva straturile de cod și numai dezactivând toate funcțiile Figma AI.
• Dimensiunea repo. Importul GitHub este pentru baze de coduri ușoare de prototipare, nu o aplicație de producție completă.
• Cod sistem de proiectare. Conectarea codului dvs. de componentă real prin surse de cod este încă o versiune beta închisă, așa că este posibil ca straturile de cod să nu utilizeze încă componentele dvs. de producție.

Unde se oprește Figma și unde se potrivește Anima și AgentGrid.io

Dacă întreaga echipă lucrează în Figma, straturile de cod și Specs sunt implicite puternice. Prototipul, planul și comentariile se află în același fișier, iar agentul Figma și clienții MCP pot lucra la ele.

Două situații comune încă nu se încadrează în acest dosar.

Ideea a început altundeva. Un prototip Claude Design, o pagină HTML generată de ChatGPT sau un site live de la care doriți să învățați. Serverul MCP al lui Figma are acum un html_to_figma instrument pentru HTML generat de agent. Anima Buddy, agentul nostru de proiectare AI din interiorul Figma, se transformă, de asemenea, HTML, artefacte Claude, imagini și adrese URL în straturi editabile Figma, care este util atunci când doriți să continuați să proiectați pe acele straturi cu sistemul dvs. de proiectare.

Rezultatul trebuie să părăsească Figma. Specificațiile sau prototipul dvs. trebuie să fie revizuite de persoane din afara echipei Figma, editate de agenți de la mai mulți furnizori sau publicate ca link live. Acesta este treaba AgentGrid.io, construită de Anima. Un artefact Markdown pe AgentGrid.io este un document live, cu salvare automată, pe care oamenii și agenții conectați, cum ar fi Claude, ChatGPT, Cursor și Grok Bot, îl pot edita, fiecare modificare fiind atribuită după nume în istoricul versiunilor. Un artefact HTML este o pagină care rulează pe care o puteți comenta și publica la o adresă URL publică atunci când este aprobată. De asemenea, puteți importa un cadru Figma în AgentGrid.io ca artefact de aplicație. Importarea este unidirecțională, așa că editările ulterioare Figma nu se sincronizează.

Cei doi nu concurează pentru același pas. Figma deține pânza de design. AgentGrid.io este locul unde Markdown și artefactele HTML merg atunci când munca încrucișează instrumente și echipe.

Încercați AgentGrid.io pentru a păstra o specificație sau un prototip pe care fiecare agent din echipa dvs. îl poate edita și publica.

Folosiți fiecare instrument când

• Utilizați straturi de cod Figma atunci când părțile interesate trebuie să facă clic pe un prototip de lucru lângă desene și să compare direcțiile una lângă alta.
• Utilizați Figma Specs când planul ar trebui să trăiască lângă cadre și să fie citit de un agent de codare prin serverul Figma MCP.
• Utilizați Anima Playground când doriți să proiectați direct în cod cu AI sau să transformați un design Figma într-o aplicație editabilă pe care o puteți previzualiza și publica.
• Utilizați Buddy când punctul de plecare este în afara Figma și doriți straturi editabile pe pânză. Pentru o comparație mai completă a construcției în Figma față de un generator de browser, consultați Figma Make vs Anima Playground.
• Utilizați AgentGrid.io când specificațiile sau prototipul trebuie editate de oameni și agenți prin instrumente, revizuite cu comentarii și publicate ca link live.

Întrebări frecvente

Ce sunt straturile de cod în Figma?

Un strat de cod este un strat de pe pânza Figma care deține cod real, care rulează. Puteți crea unul din cadrele selectate, un site web live capturat cu extensia Figma Chrome, un depozit de prototip GitHub sau un prompt gol, apoi faceți clic pe el, comentați-l și duplicați-l pentru a compara indicațiile.

Figma Specs este doar Markdown?

Specs folosește Markdown pentru text și puteți trage orice fișier .md pe pânză pentru a crea unul. Acesta adaugă caracteristici Figma în jurul acestui text: cadre încorporate și panouri FigJam, comentarii și un agent care poate citi și răspunde la aceste comentarii.

Straturile de cod Figma costă credite AI?

Da. În planurile plătite, generarea și editarea în interiorul unui strat de cod este gratuită până pe 4 noiembrie 2026. Alți agenți care lucrează în același prompt folosesc în continuare credite, iar după 4 noiembrie toate sarcinile stratului de cod folosesc credite AI.

Poate Claude Code, Codex sau Cursor să citească un Figma Spec?

Da, dacă sunt conectați la serverul Figma MCP. Agenții de codare pot citi, crea și actualiza specificațiile cu abilitățile figma-spec și puteți lipi un link pentru specificații în solicitarea dvs. pentru a transmite contextul de proiectare legat.

Ce planuri Figma includ Specs?

Specs este în versiune beta deschisă pentru planurile plătite: Professional, Organization, Enterprise and Education, plus Guvern conform articolului Config India al lui Figma. Nu se află în planul Starter gratuit. Straturile de cod sunt implementate în toate planurile, inclusiv pentru Starter.