Figma Slojevi koda i Specs: što su, kako rade i gdje se zaustavljaju12 min read

Slojevi koda Figma stavljaju aktivni kod na platno, a Figma Specs također stavlja Markdown tamo. Oba su ušla u otvorenu beta verziju na Config India 15. listopada 2026., tako da datoteka dizajna sada može sadržavati okvire, radni prototip i pisani plan na temelju kojeg agent gradi.

Ovaj vodič je za dizajnere, PM-ove i front-end inženjere koji odlučuju hoće li premjestiti rad na prototipu i specifikacijama u Figma. Pokriva što svaka značajka radi, kako započeti, koliko košta u AI kreditima i gdje posao treba ostaviti Figma za suigrače u Claudeu, ChatGPT ili Cursor.

U doba umjetne inteligencije, dizajn je kod. Za projektiranje izravno u kodu s AI ili za pretvaranje vaših Figma dizajna u kod, koristite Anima Playground: opišite zaslon ili počnite od dizajna Figma, a zatim nastavite ponavljati na aplikaciji koja se može uređivati koju možete pregledati i objaviti.

Dizajnirajte izravno u kodu s AI

Dizajnirajte pomoću umjetne inteligencije: opišite zaslon ili pretvorite Figma dizajne u kod.

Što je Figma lansirao na Config India 2026?

Slojevi koda i Specs bili su naslov, ali su stigli s nizom značajki agenta oko sebe. Evo trenutnog statusa iz centra za pomoć Figma:

Obje beta verzije pojavljuju se tijekom nekoliko tjedana, tako da ih možete vidjeti prije ili nakon ostatka vašeg tima.

Što su slojevi koda Figma?

Sloj koda je sloj koji sadrži pravi, aktivni kod. Umjesto prototipa koji lažira interakcije s okvirnim vezama, dobivate funkcionalni prototip podržan kodom koji stoji na platnu pored vašeg dizajna. Suigrači ga mogu klikati, komentirati i duplicirati kako bi pokušali u drugom smjeru rame uz rame.

Figma vam daje četiri načina za početak jednog:

• Od dizajna. Odaberite okvire i zamolite agenta Figma da ih pretvori u sloj koda.
• Sa web stranice uživo. Snimite stranicu s ekstenzijom Figma Chrome i zalijepite je na platno.
• Iz repoa. Uvezite podržanu, laganu bazu kodova za izradu prototipova iz GitHub ili lokalne mape. Uvoz GitHub ostaje povezan s tim spremištem.
• Od nule. Dodajte prazan sloj koda i zatražite od agenta da izgradi.

Također možete unijeti prototip koji ste izgradili u alatu za kodiranje na platno putem Figma MCP poslužitelja.

Uređivanje se odvija na tri načina. Pitate agenta, komentirate okvire kako biste mu pokazali gdje promjena pripada ili otvorite uređivač koda i sami promijenite kod. Kada su vizualni detalji važniji od šifre, Extract designs pretvara zaslone iz sloja koda natrag u Figma okvire koji se mogu uređivati. Kada je kod spreman za inženjere, možete ga gurnuti u granu i otvoriti zahtjev za povlačenjem.

Što je Figma Specs?

Figma naziva Specs “rodnim domom za kontekst.” U praksi je to kolaborativni Markdown dokument koji živi ili na platnu Figma Design datoteke ili FigJam ploče, ili kao vlastita Spec datoteka.

Početak je brz:

1. Stvorite samostalni Spec iz preglednika datoteka ili idite na figma.com/spec/new.
2. Unutar datoteke dizajna ili FigJam ploče kliknite Spec na alatnoj traci ili pritisnite D.
3. Već imate .md datoteka? Povucite ga na platno i on postaje specifikacija.
4. Pišite sa Markdown koji već znate: # za naslove, - za metke, [] za obaveze, > za navodnike, tri povratne oznake za kod. Vrsta / za slike, Figma ugrađeni i razdjelnici.

Ono što specifikaciju čini više od datoteke Markdown je ono što se nalazi oko teksta. Možete ugraditi okvir, ploču FigJam ili bilo koji čvor s platna, tako da zahtjev i dizajn koji opisuje ostaju jedan pored drugog. Suigrači ga komentiraju, a agent Figma može pročitati te komentare i odgovoriti na njih.

Specs također radi izvan Figma. Agenti za kodiranje povezani na Figma MCP poslužitelj mogu čitati, stvarati i ažurirati specifikacije pomoću figma-spec vještina. Da biste ga predali, kopirate poveznicu specifikacije u prompt vašeg agenta za kodiranje, a povezani okviri, dijagrami, slojevi koda i Code Connect isječci dolaze s njom.

Zašto je Markdown postao format za predaju

Objava Figma-a o pokretanju jasno kaže: Markdown je sada de facto format za dijeljenje konteksta s agentima. Svaki agent za kodiranje to čita. Većina proizvodnih timova već čuva planove, PRD-ove i upute agenata .md datoteke.

Moje čitanje je da je Specs Figma koji prihvaća da je predaja agentu tekst, a zatim pretvara taj tekst u igru za više igrača. Mještanin AGENTS.md ili PRD nikad nije uspio zbog formata. Nije uspio jer ga je samo jedna osoba uređivala, udaljio se od dizajna i nitko nije mogao vidjeti koju je verziju agent koristio.

U Figma, Specs to popravlja. Otvoreno je pitanje što se događa izvan njega. Ugradnje, komentari i reference dizajna uživo značajke su Figma, a agenti do njih dolaze preko klijenata navedenih u Figma MCP katalogu. Ako vaši inženjeri, ChatGPT vašeg premijera i Claude vašeg marketinškog tima trebaju isti plan, još uvijek morate odlučiti gdje će se dijeliti kopija.

Praktičan tijek rada: od PRD do sloja koda do zahtjeva za povlačenje

Evo kako se dvije značajke uklapaju u stvarnu značajku, koristeći samo ono što Figma dokumentira danas.

1. Povucite svoj PRD na platno. Vaše postojeće .md datoteka postaje spec. Ništa nije prepisano, a ručno uređivanje ne koristi AI kredite.
2. Ugradite okvire o kojima govori. Koristite / za dodavanje tokova koje opisuje PRD. Recenzenti sada vide zahtjev i zaslon zajedno.
3. Pretvorite ključne okvire u sloj koda. Odaberite ih i zatražite agenta. Ako već imate prototip repoa, umjesto toga ga uvezite iz GitHub.
4. Recenzija na jednom mjestu. Prikupite komentare na specifikaciju i sloj koda. Zamolite agenta Figma da odgovori na svaki otvoreni komentar s predloženim popravkom dok ljudi raspravljaju o istim temama.
5. Odstupi od specifikacije. Zalijepite vezu specifikacije u Codex, Claude Code ili Cursor spojen na Figma MCP poslužitelj. Agent dobiva Markdown plus povezani kontekst dizajna.
6. Pošaljite kod prototipa. Gurnite promjene sloja koda u granu i otvorite zahtjev za povlačenje kako bi inženjeri pregledali prije spajanja.

Izlaz je specifikacija koju vaš agent za kodiranje može pročitati i radni prototip koji je vaš tim zapravo kliknuo. Testirajte generirani kod kao i svaki drugi kod. Prototip koji radi nije isto što i kod spreman za proizvodnju.

Ako je sljedeći korak pretvaranje Figma dizajna u kod koji možete pokrenuti ili projektiranje u kodu iz upita, to je posao Anima Playground.

Koliko koštaju slojevi koda i Specs?

• Slojevi koda koriste AI kredite. Na plaćenim planovima, generiranje i uređivanje unutar sloja koda besplatno je do 4. studenog 2026. Ostali poslovi agenta u istom upitu i dalje koriste kredite, a nakon 4. studenog svi zadaci sloja koda koriste kredite.
• Specs mogu slobodno pisati. Za samostalno upisivanje i uređivanje specifikacije ne koriste se krediti. Korištenje agenta sa specifikacijom čini. Zadržite pokazivač nakon svakog upita da biste vidjeli koliko košta.
• Payload i smjernice povećavaju troškove. Figma napominje da oba agentu daju više konteksta i više posla, tako da isti upit može koristiti više kredita.

Ograničenja koja treba provjeriti prije planiranja oko njih

• Izvođenje. Obje su značajke otvorene beta verzije koje se uvode tjednima. Potražite ikonu koda na alatnoj traci Figma Design i opciju Spec u pregledniku datoteka.
• Planovi. Specs treba plaćeni plan. Korisnici početnici dobivaju slojeve koda, ali ne i Specs. Objema je za izradu potreban pristup za uređivanje.
• Isključivanje. Samo administratori poduzeća mogu isključiti slojeve koda i to samo isključivanjem svih Figma AI značajki.
• Repo veličina. GitHub uvoz je za lagane baze kodova za izradu prototipova, a ne za punu produkcijsku aplikaciju.
• Kod projektiranja sustava. Povezivanje vašeg stvarnog koda komponente putem izvora koda još uvijek je zatvorena beta verzija, tako da slojevi koda možda još ne koriste vaše proizvodne komponente.

Gdje Figma prestaje, a gdje Anima i AgentGrid.io odgovaraju

Ako cijeli vaš tim radi u Figma, slojevi koda i Specs su jaka zadana vrijednost. Prototip, plan i komentari nalaze se u istoj datoteci, a Figma agent i MCP klijenti mogu raditi na njima.

Dvije uobičajene situacije još uvijek spadaju izvan te datoteke.

Ideja je krenula negdje drugdje. Claude Design prototip, ChatGPT generirana HTML stranica ili web stranica uživo s koje želite učiti. Figma MCP poslužitelj sada ima html_to_figma alat za HTML koji generira agent. Buddy iz Anima, naš agent za dizajn umjetne inteligencije unutar Figma, također se pretvara HTML, Claude artefakti, slike i URL-ovi u slojeve Figma koji se mogu uređivati, što je korisno kada želite nastaviti dizajnirati na tim slojevima sa svojim sustavom dizajna.

Rezultat treba ostaviti Figma. Vašu specifikaciju ili prototip moraju pregledati ljudi izvan vašeg Figma tima, urediti agenti nekoliko dobavljača ili objaviti kao živu vezu. To je posao AgentGrid.io, koji je izradio Anima. Artefakt Markdown na AgentGrid.io je živi dokument koji se automatski sprema i koji ljudi i povezani agenti kao što su Claude, ChatGPT, Cursor i Grok Bot mogu uređivati, sa svakom promjenom pripisanom imenom u povijesti verzija. HTML artefakt je aktivna stranica koju možete komentirati i objaviti na javnom URL-u kada bude odobrena. Također možete uvesti jedan okvir Figma u AgentGrid.io kao artefakt aplikacije. Taj je uvoz jednosmjeran, pa se kasnija uređivanja Figma ne sinkroniziraju.

Njih dvoje se ne natječu za isti korak. Figma posjeduje dizajnersko platno. AgentGrid.io je mjesto gdje se Markdown i HTML artefakti nestaju kada posao ukrsti alate i timove.

Pokušajte AgentGrid.io zadržati specifikaciju ili prototip koji svaki agent u vašem timu može uređivati i objavljivati.

Koristite svaki alat kada

• Koristite slojeve koda Figma kada zainteresirane strane trebaju kliknuti radni prototip pored dizajna i usporediti upute jednu pored druge.
• Koristite Figma Specs kada bi plan trebao živjeti pored okvira i čitati ga agent za kodiranje preko Figma MCP poslužitelja.
• Koristite Anima Playground kada želite dizajnirati izravno u kodu pomoću umjetne inteligencije ili pretvoriti Figma dizajn u aplikaciju koja se može uređivati koju možete pregledati i objaviti.
• Koristite Buddy kada je početna točka izvan Figma i želite uređivati slojeve na platnu. Za potpuniju usporedbu izgradnje u Figma u odnosu na alat za izgradnju preglednika, pogledajte Figma Make u odnosu na Anima Playground.
• Koristite AgentGrid.io kada specifikaciju ili prototip moraju uređivati ljudi i agenti preko alata, pregledati s komentarima i objaviti kao poveznicu uživo.

Često postavljana pitanja

Što su slojevi koda u Figma?

Sloj koda je sloj na Figma platnu koji sadrži pravi, aktivni kod. Možete izraditi jedan od odabranih okvira, web stranice uživo snimljene ekstenzijom Figma Chrome, repo za izradu prototipa GitHub ili praznog upita, a zatim kliknuti kroz njega, komentirati ga i duplicirati za usporedbu uputa.

Je li Figma Specs samo Markdown?

Specs koristi Markdown za svoj tekst, a možete povući bilo koju .md datoteku na platno da biste je stvorili. Dodaje Figma značajke oko tog teksta: ugrađene okvire i FigJam ploče, komentare i agenta koji može čitati te komentare i odgovarati na njih.

Da li Figma slojevi koda koštaju AI kredite?

da Na plaćenim planovima, generiranje i uređivanje unutar sloja koda besplatno je do 4. studenog 2026. Ostali poslovi agenta u istom upitu i dalje koriste kredite, a nakon 4. studenog svi zadaci sloja koda koriste kredite umjetne inteligencije.

Mogu li Claude Code, Codex ili Cursor čitati Figma Spec?

Da, ako su spojeni na Figma MCP poslužitelj. Agenti za kodiranje mogu čitati, stvarati i ažurirati specifikacije s vještinom figma-spec, a možete zalijepiti vezu specifikacije u svoj upit kako biste proslijedili njen povezani kontekst dizajna.

Koji planovi Figma uključuju Specs?

Specs je u otvorenoj beta verziji na plaćenim planovima: Professional, Organization, Enterprise i Education, plus State prema Config India članku Figma. Nije na besplatnom početnom planu. Slojevi koda uvode se u sve planove, uključujući Starter.