Figma kódrétegek és Specs: mik ezek, hogyan működnek és hol állnak meg16 min read

A Figma kódrétegek futó kódot helyeznek a vászonra, a Figma Specs pedig a Markdown-et is. Mindkettő nyílt bétaverzióba lépett a Config India-n 2026. október 15-én, így a tervfájl immáron tartalmazhat kereteket, működő prototípust és az ügynök által készített írásos tervet.

Ez az útmutató azoknak a tervezőknek, PM-eknek és front-end mérnököknek szól, akik eldöntik, hogy áthelyezik-e a prototípust és a specifikációkat a Figma-be. Tartalmazza, hogy mit csinálnak az egyes funkciók, hogyan kezdjem el, mennyibe kerül az AI kredit, és hol kell a munkát hagynia a Figma-nek a Claude, ChatGPT vagy Cursor csapattársai számára.

Az AI korában a tervezés kód. Ha közvetlenül kódban szeretne tervezni AI segítségével, vagy a Figma terveit kóddá szeretné alakítani, használja Anima Playground: írjon le egy képernyőt, vagy kezdjen egy Figma tervből, majd folytassa az iterációt egy szerkeszthető alkalmazáson, amelynek előnézetét megtekintheti és közzéteheti.

Tervezés közvetlenül kódban AI-val

Tervezés mesterséges intelligenciával: Írjon le egy képernyőt, vagy alakítsa át a Figma terveket kódolássá.

Mit dobott ki a Figma a Config India 2026-on?

A kódrétegek és a Specs voltak a főcímek, de megérkeztek egy sor ügynökfunkcióval körülöttük. Íme a jelenlegi állapot a Figma súgójában:

Mindkét béta több hét alatt jelenik meg, így előfordulhat, hogy a csapat többi tagja előtt vagy után láthatja őket.

Mik azok a Figma kódrétegek?

A kódréteg egy olyan réteg, amely valódi, futó kódot tartalmaz. A kerethivatkozásokkal való interakciókat meghamisító prototípus helyett egy működő, kóddal támogatott prototípust kap a vásznon a tervei mellett. A csapattársak rákattinthatnak, megjegyzéseket fűzhetnek hozzá, és másolhatják, hogy más irányt próbáljanak ki egymás mellett.

A Figma négy módszert kínál az indításhoz:

• Tervezésből. Válassza ki a kereteket, és kérje meg a Figma ügynököt, hogy alakítsa át őket kódréteggé.
• Élő weboldalról. Rögzítsen egy oldalt a Figma Chrome kiterjesztéssel, és illessze be a vászonra.
• Repóból. Importáljon támogatott, könnyű prototípus-kódbázist a GitHub-ből vagy egy helyi mappából. A GitHub importálás csatlakozik ehhez a lerakathoz.
• A semmiből. Adjon hozzá egy üres kódréteget, és kérje meg az ügynököt a létrehozásra.

A Figma MCP szerveren keresztül egy kódolóeszközben épített prototípust is átvihet a vászonra.

A szerkesztés háromféleképpen történik. Felkéri az ügynököt, megjegyzésekkel látja el a kereteket, hogy megmutassa, hol van a változás, vagy megnyitja a kódszerkesztőt, és maga módosítja a kódot. Amikor a vizuális részletek fontosabbak, mint a kód, Extract designs a képernyőket egy kódrétegből szerkeszthető Figma keretekké alakítja vissza. Amikor a kód készen áll a mérnökök számára, leküldheti egy ágra, és megnyithat egy lehívási kérelmet.

Mi az a Figma Specs?

A Figma a Specs-et „a kontextus natív otthonának” nevezi. A gyakorlatban ez egy kollaboratív Markdown dokumentum, amely vagy egy Figma Design fájl vagy FigJam kártya vásznán, vagy saját Spec fájlként él.

Az indulás gyors:

1. Hozzon létre egy önálló Spec-et a fájlböngészőből, vagy lépjen a következő helyre figma.com/spec/new.
2. A tervezési fájlban vagy a FigJam kártyán belül kattintson a Spec elemre az eszköztáron, vagy nyomja meg a D.
3. Már van egy .md fájl? Húzza a vászonra, és specifikációvá válik.
4. Írjon a már ismert Markdown-el: # címsorokhoz, - golyókért, [] tennivalókhoz, > idézőjeleknél három backtick a kódnál. Írja be / képekhez Figma beágyaz és elválasztó.

Amitől egy specifikáció több, mint egy Markdown fájl, az a szöveg körül van. A vászonból beágyazhat keretet, FigJam táblát vagy bármilyen csomópontot, így a követelmény és az általa leírt kialakítás egymás mellett marad. A csapattársak megjegyzéseket fűznek hozzá, a Figma ügynök pedig el tudja olvasni ezeket a megjegyzéseket, és válaszolni is tud rájuk.

A Specs a Figma kívül is működik. A Figma MCP szerverhez csatlakoztatott kódoló ügynökök a specifikációkat olvashatják, hozhatják létre és frissíthetik a figma-spec készség. Az egyik átadásához másolja be a specifikációs hivatkozást a kódoló ügynök parancssorába, és a csatolt keretek, diagramok, kódrétegek és a Code Connect kódrészletek hozzá tartoznak.

Miért lett a Markdown átadási formátum?

A Figma saját indítóbejegyzése egyértelműen kijelenti: a Markdown mára az ügynökökkel való kontextusmegosztás de facto formátuma. Minden kódoló ügynök elolvassa. A legtöbb termékcsapat már őrzi a terveket, a PRD-ket és az ügynöki utasításokat .md fájlokat.

Azt olvasom, hogy a Specs a Figma, és elfogadja, hogy az ügynöknek való átadás szöveges, majd ezt a szöveget többjátékossá teszi. Egy helyi AGENTS.md vagy a PRD soha nem sikerült a formátum miatt. Nem sikerült, mert csak egy személy szerkesztette, eltávolodott a tervektől, és senki sem láthatta, melyik verziót használta az ügynök.

A Figma belsejében a Specs javítja ezt. A nyitott kérdés az, hogy mi történik azon kívül. A beágyazások, megjegyzések és élő tervezési hivatkozások a Figma jellemzői, és az ügynökök a Figma MCP katalógusban felsorolt ​​ügyfeleken keresztül érik el őket. Ha a mérnökeinek, a PM ChatGPT-jének és a marketingcsapatának Claude-jának ugyanazon tervre van szüksége, akkor is el kell döntenie, hogy hol található a megosztott példány.

Praktikus munkafolyamat: a PRD-től a kódrétegen át a lehívási kérésig

Íme, hogyan illeszkedik egymáshoz a két funkció egy valós szolgáltatásban, csak a Figma ma dokumentumokat használva.

1. Húzza a PRD készüléket a vászonra. A meglévő .md fájl specifikációvá válik. Semmit sem írnak át, és a kézi szerkesztés nem használ mesterséges intelligencia krediteket.
2. Beágyazhatja azokat a kereteket, amelyekről beszél. Használja / a PRD által leírt folyamok hozzáadásához. A bírálók most együtt látják a követelményt és a képernyőt.
3. A kulcskereteket kódréteggé alakítsa. Válassza ki őket, és kérje meg az ügynököt. Ha már rendelkezik prototípus repo-val, importálja azt a GitHub-ből.
4. Értékelés egy helyen. Gyűjtsön megjegyzéseket a specifikációhoz és a kódréteghez. Kérje meg a Figma ügynököt, hogy válaszoljon minden nyitott megjegyzésre egy javasolt javítással, miközben az emberek ugyanazokat a szálakat vizsgálják.
5. Add le a specifikációt. Illessze be a specifikációs hivatkozást a Figma MCP szerverhez csatlakoztatott Codex, Claude Code vagy Cursor mappába. Az ügynök megkapja a Markdown fájlt, valamint a kapcsolódó tervezési környezetet.
6. Küldje el a prototípus kódját. Tolja át a kódréteg módosításait egy ágba, és nyissa meg a lekérési kérelmet, hogy a mérnökök áttekintsék az egyesítés előtt.

A kimenet egy specifikáció, amelyet a kódoló ügynök tud olvasni, és egy működő prototípus, amelyen a csapata ténylegesen átkattintott. Tesztelje a generált kódot, mint bármely más kódot. A futó prototípus nem azonos a gyártásra kész kóddal.

Ha a következő lépés egy Figma terv futtatható kóddal történő átalakítása, vagy a kódban történő tervezés promptból, akkor ez a Anima Playground feladata.

Mennyibe kerülnek a kódrétegek és a Specs?

• A kódrétegek AI-krediteket használnak. Fizetős csomagok esetén a kódrétegen belüli generálás és szerkesztés ingyenes 2026. november 4-ig. Az ugyanabban a promptban végzett egyéb ügynöki munkák továbbra is jóváírást használnak, november 4-e után pedig minden kódréteg-feladat kreditet használ.
• A Specs szabadon írhat. Egy specifikáció saját beírása és szerkesztése nem használ krediteket. Az ügynök specifikációval való használata igen. Vigye az egérmutatót a nyugtára minden felszólítás után, hogy megtudja, mennyibe került.
• A Payload és az irányelvek költséget jelentenek. A Figma megjegyzi, hogy mindkettő több kontextust és több munkát biztosít az ügynöknek, így ugyanaz a prompt több kreditet használhat fel.

A korlátok, amelyeket ellenőrizni kell, mielőtt körülöttük tervezel

• Közzététel. Mindkét funkció nyílt béta, amely heteken át vezet. Keresse meg a Kód ikont a Figma Design eszköztárban és a Spec opciót a fájlböngészőben.
• Tervek. A Specs fizetős csomagra van szüksége. A kezdő felhasználók kódrétegeket kapnak, de a Specs-et nem. Mindkettőhöz szerkesztési hozzáférés szükséges.
• Leiratkozás. Csak a vállalati rendszergazdák kapcsolhatják ki a kódrétegeket, és csak a Figma AI összes funkciójának kikapcsolásával.
• Repo méret. A GitHub importálás a könnyű prototípus-kódbázisokhoz való, nem pedig egy teljes éles alkalmazáshoz.
• Tervezési rendszerkód. A valódi komponenskód összekapcsolása kódforrásokon keresztül még zárt béta, így előfordulhat, hogy a kódrétegek még nem használják az éles összetevőket.

Hol áll meg a Figma, és hol illeszkedik a Anima és a AgentGrid.io

Ha az egész csapat a Figma-ben dolgozik, a kódrétegek és a Specs erős alapértelmezett. A prototípus, a terv és a megjegyzések ugyanabban a fájlban vannak, és a Figma ügynöke és a MCP kliensek dolgozhatnak rajtuk.

Két gyakori helyzet még mindig kívül esik ezen a fájlon.

Az ötlet valahol máshol kezdődött. Egy Claude Design prototípus, egy ChatGPT által generált HTML oldal vagy egy élő webhely, amelyről tanulni szeretne. A Figma MCP szervere már rendelkezik egy html_to_figma eszköz az ügynök által generált HTML-hez. A Anima Buddy, a Figma-ben lévő mesterséges intelligencia-tervező ügynökünk szintén megfordul HTML, Claude műtermékek, képek és URL-ek szerkeszthető Figma rétegekbe, ami akkor hasznos, ha ezeken a rétegeken szeretne tervezni a tervezési rendszerével.

Az eredménynek meg kell hagynia a Figma-et. Specifikációját vagy prototípusát a Figma csapatán kívüli személyeknek kell felülvizsgálniuk, több szállító ügynökeinek kell szerkeszteniük, vagy élő hivatkozásként kell közzétenniük. Ez a AgentGrid.io feladata, amelyet a Anima készített. A Markdown műtermék a AgentGrid.io-en egy élő, automatikusan mentő dokumentum, amelyet az emberek és a kapcsolt ügynökök, például Claude, ChatGPT, Cursor és Grok Bot szerkeszthetnek, és minden változás név szerint szerepel a verzióelőzményekben. A HTML melléktermék egy futó oldal, amelyhez megjegyzést fűzhet, és jóváhagyása után közzéteheti egy nyilvános URL-címen. Egy Figma keretet alkalmazástermékként is importálhat a AgentGrid.io-be. Ez az importálás egyirányú, így a későbbi Figma szerkesztések nem szinkronizálódnak.

A kettő nem ugyanazért a lépésért verseng. A tervezővászon a Figma tulajdonosa. AgentGrid.io az, ahol a Markdown és HTML műtermékek mennek, amikor a munka keresztezi az eszközöket és a csapatokat.

Próbáld ki a AgentGrid.io-et olyan specifikáció vagy prototípus megtartásához, amelyet a csapat minden ügynöke szerkeszthet és közzétehet.

Minden eszközt akkor használjon, amikor

• Használjon Figma kódrétegeket amikor az érdekelt feleknek egy működő prototípusra kell kattintaniuk a tervek mellett, és egymás mellett kell összehasonlítaniuk az irányokat.
• Használja a Figma Specs-et amikor a tervnek a keretek mellett kell lennie, és egy kódoló ügynöknek be kell olvasnia a Figma MCP szerveren keresztül.
• Használja Anima Playground Ha közvetlenül kódban szeretne tervezni mesterséges intelligencia segítségével, vagy egy Figma tervet szerkeszthető alkalmazássá szeretne alakítani, megtekintheti és közzéteheti.
• Használja Buddy amikor a kiindulási pont a Figma-n kívül van, és szerkeszthető rétegeket szeretne a vásznon. A Figma-ben és a böngészőkészítőben való felépítés teljesebb összehasonlításához lásd: Figma Make vs Anima Playground.
• Használja a AgentGrid.io-et amikor a specifikációt vagy a prototípust embereknek és ügynököknek kell szerkeszteniük az eszközökön keresztül, át kell tekinteniük megjegyzésekkel, és élő hivatkozásként kell közzétenniük.

Gyakran ismételt kérdések

Mik azok a kódrétegek a Figma-ben?

A kódréteg egy olyan réteg a Figma vásznon, amely valódi, futó kódot tartalmaz. Létrehozhat egyet a kiválasztott képkockákból, a Figma Chrome bővítménnyel rögzített élő webhelyből, egy GitHub prototípus repoból vagy egy üres promptból, majd rákattinthat, megjegyzést fűzhet hozzá, és megkettőzhet az útvonalak összehasonlításához.

A Figma Specs csak a Markdown?

A Specs a Markdown fájlt használja a szöveghez, és bármilyen .md fájlt ráhúzhat a vászonra, hogy létrehozzon egyet. Figma funkciókat ad hozzá a szöveghez: beágyazott keretek és FigJam táblák, megjegyzések és egy ügynök, amely képes elolvasni és válaszolni a megjegyzésekre.

A Figma kódrétegek AI-kreditekbe kerülnek?

Igen. Fizetős csomagok esetén a kódrétegen belüli generálás és szerkesztés ingyenes 2026. november 4-ig. Az ugyanabban a promptban végzett egyéb ügynöki munkák továbbra is krediteket használnak, november 4-e után pedig minden kódréteg-feladat AI-krediteket használ.

A Claude Code, Codex vagy Cursor tudja olvasni a Figma Spec-et?

Igen, ha a Figma MCP szerverhez csatlakoznak. A kódoló ügynökök a figma-spec készségekkel képesek elolvasni, létrehozni és frissíteni a specifikációkat, Ön pedig beilleszthet egy specifikációs hivatkozást a promptba, hogy továbbadja a kapcsolódó tervezési környezetet.

Melyik Figma csomag tartalmazza a Specs-et?

A Specs nyílt bétaverzióban van a fizetős csomagokon: Professzionális, Szervezeti, Vállalati és Oktatási, valamint kormányzat a Figma Config India cikkében. Nem szerepel az ingyenes Kezdő csomagban. A kódrétegek minden tervben megjelennek, beleértve a Kezdőt is.