Figma koodikerrokset ja Specs: mitä ne ovat, miten ne toimivat ja missä ne pysähtyvät10 min read

Figma-kooditasot lisäävät juoksevan koodin kankaalle, ja Figma Specs laittaa sinne myös Markdown:n. Molemmat aloittivat avoimen betavaiheen Config India:ssä 15. lokakuuta 2026, joten suunnittelutiedosto voi nyt sisältää kehyksiä, toimivan prototyypin ja kirjallisen suunnitelman, jonka perusteella agentti rakentaa.

Tämä opas on tarkoitettu suunnittelijoille, PM:ille ja käyttöliittymäinsinööreille, jotka päättävät, siirretäänkö prototyyppi- ja tekninen työ Figma:ään. Se kattaa, mitä kukin ominaisuus tekee, kuinka aloittaa, mitä se maksaa tekoälypisteinä ja missä työ on jätettävä Figma:n tiimitovereille Claudessa, ChatGPT:ssä tai Cursor:ssä.

Tekoälyn aikakaudella suunnittelu on koodia. Jos haluat suunnitella suoraan koodissa tekoälyllä tai muuttaa Figma-mallejasi koodiksi, käytä Anima Playground: kuvaile näyttöä tai aloita Figma-suunnittelusta ja jatka sitten toistamista muokattavassa sovelluksessa, jota voit esikatsella ja julkaista.

Suunnittele suoraan koodilla tekoälyllä

Suunnittele tekoälyllä: Kuvaile näyttöä tai muuta Figma-mallit koodaamaan.

Mitä Figma julkaisi Config India 2026:ssa?

Koodikerrokset ja Specs olivat otsikko, mutta niiden ympärillä oli joukko agenttiominaisuuksia. Tässä on nykyinen tila Figma:n ohjekeskuksesta:

Molemmat betat julkaistaan useiden viikkojen aikana, joten saatat nähdä ne ennen muuta tiimiäsi tai sen jälkeen.

Mitä ovat Figma-koodikerrokset?

Koodikerros on kerros, joka sisältää todellista, käynnissä olevaa koodia. Kehyslinkkien vuorovaikutusta väärentävän prototyypin sijaan saat toimivan, koodilla tuetun prototyypin, joka istuu kankaalla suunnittelujesi vieressä. Ryhmätoverit voivat napsauttaa sitä, kommentoida sitä ja kopioida sitä kokeillakseen eri suuntaa vierekkäin.

Figma tarjoaa neljä tapaa aloittaa:

• Suunnittelusta. Valitse kehykset ja pyydä Figma-agenttia muuttamaan ne koodikerrokseksi.
• Live-sivustolta. Kaappaa sivu Figma Chrome-laajennuksella ja liitä se kankaalle.
• Reposta. Tuo tuettu, kevyt prototyyppien koodikanta GitHub:stä tai paikallisesta kansiosta. GitHub-tuonti pysyy yhteydessä kyseiseen arkistoon.
• tyhjästä. Lisää tyhjä koodikerros ja kehota agenttia rakentamaan.

Voit myös tuoda koodaustyökalulla rakentamasi prototyypin kankaalle Figma MCP-palvelimen kautta.

Muokkaus tapahtuu kolmella tavalla. Kehotat agenttia, kirjoitat kehyksiä, jotka osoittavat, mihin muutos kuuluu, tai avaat koodieditorin ja muutat koodin itse. Kun visuaalisilla yksityiskohdilla on enemmän merkitystä kuin koodilla, Extract designs muuttaa näytöt koodikerroksesta takaisin muokattaviksi Figma-kehyksiksi. Kun koodi on valmis insinööreille, voit työntää sen haaraan ja avata vetopyynnön.

Mikä on Figma Specs?

Figma kutsuu Specs:tä ”kontekstin alkuperäiskodiksi”. Käytännössä se on yhteistoiminnallinen Markdown-dokumentti, joka elää joko Figma Design-tiedoston tai FigJam-levyn kankaalla tai omana Spec-tiedostona.

Aloitus on nopea:

1. Luo erillinen Spec tiedostoselaimella tai siirry osoitteeseen figma.com/spec/new.
2. Napsauta suunnittelutiedoston tai FigJam-levyn sisällä työkalupalkissa Spec tai paina D.
3. Sinulla on jo a .md tiedosto? Vedä se kankaalle ja siitä tulee spesifikaatio.
4. Kirjoita jo tuntemallasi Markdown:llä: # otsikoille, - luoteja varten, [] tehtäviä varten, > lainausmerkkejä varten, koodille kolme takamerkkiä. Kirjoita / kuville Figma upotteet ja jakajat.

Se, mikä tekee teknisistä tiedoista enemmän kuin Markdown-tiedoston, on se, mikä istuu tekstin ympärillä. Voit upottaa kankaasta kehyksen, FigJam-levyn tai minkä tahansa solmun, jolloin vaatimus ja sen kuvaama muotoilu pysyvät vierekkäin. Ryhmätoverit kommentoivat sitä, ja Figma-agentti voi lukea kommentit ja vastata niihin.

Specs toimii myös Figma:n ulkopuolella. Figma MCP-palvelimeen yhdistetyt koodausagentit voivat lukea, luoda ja päivittää tietoja käyttämällä figma-spec taito. Luovuttaaksesi yhden, kopioit spesifikaatiolinkin koodausagenttisi kehotteeseen, ja linkitetyt kehykset, kaaviot, kooditasot ja Code Connect-katkelmat tulevat sen mukana.

Miksi Markdown:stä tuli kanavanvaihtomuoto

Figma:n oma aloitusviesti sanoo sen selvästi: Markdown on nyt tosiasiallinen muoto kontekstin jakamiseen agenttien kanssa. Jokainen koodausagentti lukee sen. Useimmat tuoteryhmät pitävät jo valmiiksi suunnitelmat, PRD:t ja agenttiohjeet .md tiedostot.

Olen lukenut, että Specs on Figma, joka hyväksyy sen, että kanavanvaihto agentille on tekstiä, ja tekee tekstistä moninpelin. Paikallinen AGENTS.md tai PRD ei koskaan epäonnistunut muodon vuoksi. Se epäonnistui, koska vain yksi henkilö muokkasi sitä, se ajautui pois suunnitelmista, eikä kukaan voinut nähdä, mitä versiota agentti käytti.

Figma:n sisällä Specs korjaa tämän. Avoin kysymys on, mitä sen ulkopuolella tapahtuu. Upotukset, kommentit ja live-suunnitteluviitteet ovat Figma-ominaisuuksia, ja agentit tavoittavat ne Figma MCP-luettelossa lueteltujen asiakkaiden kautta. Jos insinöörisi, pääsihteerisi ChatGPT ja markkinointitiimisi Claude tarvitsevat kaikki saman suunnitelman, sinun on silti päätettävä, missä jaettu kopio sijaitsee.

Käytännöllinen työnkulku: PRD:stä koodikerrokseen vetopyyntöön

Näin nämä kaksi ominaisuutta sopivat yhteen todellisessa ominaisuudessa käyttämällä vain Figma:n nykyisiä dokumentteja.

1. Vedä PRD kankaalle. Olemassasi .md tiedostosta tulee spesifikaatio. Mitään ei kirjoiteta uudelleen, ja sen muokkaaminen käsin ei käytä tekoälypisteitä.
2. Upota kehykset, joista se puhuu. Käytä / lisätäksesi PRD:n kuvaamat virrat. Arvostelijat näkevät nyt vaatimuksen ja näytön yhdessä.
3. Muuta avainkehykset koodikerrokseksi. Valitse ne ja kysy edustajalta. Jos sinulla on jo prototyyppirepo, tuo se sen sijaan GitHub:stä.
4. Arvostelu yhdessä paikassa. Kerää kommentteja teknisistä tiedoista ja kooditasosta. Pyydä Figma-agenttia vastaamaan jokaiseen avoimeen kommenttiin ehdotetulla korjausehdotuksella, kun ihmiset punnittavat samoja säikeitä.
5. Luovu spec. Liitä spesifikaatiolinkki Codex-, Claude Code- tai Cursor-tiedostoon, joka on yhdistetty Figma MCP-palvelimeen. Agentti saa Markdown:n sekä linkitetyn suunnittelukontekstin.
6. Lähetä prototyyppikoodi. Työnnä koodikerroksen muutokset haaraan ja avaa vetopyyntö, jotta suunnittelijat tarkistavat sen ennen yhdistämistä.

Tulos on spesifikaatio, jonka koodausagentti voi lukea, ja toimiva prototyyppi, jonka tiimisi on todella napsauttanut. Testaa luotu koodi kuten mikä tahansa muu koodi. Ajettava prototyyppi ei ole sama asia kuin tuotantovalmis koodi.

Jos seuraava vaihe on Figma-mallin muuttaminen suoritettavaksi koodiksi tai koodin suunnittelu kehotteen perusteella, se on Anima Playground:n tehtävä.

Mitä koodikerrokset ja Specs maksavat?

• Kooditasot käyttävät tekoälykrediittejä. Maksullisissa suunnitelmissa koodikerroksen sisällä luominen ja muokkaaminen on ilmaista 4.11.2026 asti. Muut agenttityöt samassa kehotteessa käyttävät edelleen krediittejä, ja 4.11. jälkeen kaikki koodikerroksen tehtävät käyttävät krediittejä.
• Specs voivat kirjoittaa vapaasti. Teknisten tietojen kirjoittaminen ja muokkaaminen itse ei käytä krediittejä. Agentin käyttäminen spesifikaatiolla tekee. Vie hiiri jokaisen kehotteen jälkeen nähdäksesi, mitä se maksaa.
• Payload ja ohjeet lisäävät kustannuksia. Figma huomauttaa, että molemmat antavat agentille enemmän kontekstia ja enemmän työtä, joten sama kehote voi käyttää enemmän krediittejä.

Rajat tarkistettava ennen kuin suunnittelet niiden ympärille

• Käyttöönotto. Molemmat ominaisuudet ovat avoimia betaversioita, jotka julkaistaan viikkojen aikana. Etsi Koodi-kuvake Figma Design-työkalupalkista ja Spec-vaihtoehto tiedostoselaimesta.
• Suunnitelmat. Specs tarvitsee maksetun suunnitelman. Aloittelijat saavat koodikerroksia, mutta eivät Specs. Molemmat tarvitsevat muokkausoikeudet luodakseen.
• Poistuminen käytöstä. Vain yritysjärjestelmänvalvojat voivat poistaa kooditasot käytöstä ja vain poistamalla kaikki Figma AI -ominaisuudet käytöstä.
• Repo-koko. GitHub-tuonti on tarkoitettu kevyille prototyyppien koodikantoille, ei koko tuotantosovellukselle.
• Suunnittele järjestelmäkoodi. Aidon komponenttikoodin yhdistäminen koodilähteiden kautta on edelleen suljettu beta, joten koodikerrokset eivät ehkä vielä käytä tuotantokomponenttejasi.

Missä Figma pysähtyy ja mihin Anima ja AgentGrid.io sopivat

Jos koko tiimisi työskentelee Figma:ssä, koodikerrokset ja Specs ovat vahva oletusarvo. Prototyyppi, suunnitelma ja kommentit ovat samassa tiedostossa, ja Figma:n agentti ja MCP-asiakkaat voivat työskennellä niiden parissa.

Kaksi yleistä tilannetta jää edelleen tämän tiedoston ulkopuolelle.

Ajatus alkoi jostain muualta. Claude Design-prototyyppi, ChatGPT:n luoma HTML-sivu tai toimiva sivusto, josta haluat oppia. Figma:n MCP-palvelimessa on nyt html_to_figma työkalu agentin luomaan HTML. Anima:n Buddy, tekoälysuunnitteluagenttimme Figma:ssä, kääntyy myös HTML, Claude artefaktit, kuvat ja URL-osoitteet muokattaviin Figma-tasoihin, mikä on hyödyllistä, kun haluat jatkaa suunnittelua näille tasoille suunnittelujärjestelmälläsi.

Tuloksen on jätettävä Figma. Figma-tiimisi ulkopuolisten ihmisten on tarkistettava tekninen tai prototyyppisi, useiden toimittajien edustajien on muokattava tai julkaistava suorana linkkinä. Juuri tämän AgentGrid.io:n, jonka on rakentanut Anima, tekee. Markdown-artefaktti AgentGrid.io:ssä on elävä, automaattisesti tallentava asiakirja, jota ihmiset ja liitetyt edustajat, kuten Claude, ChatGPT, Cursor ja Grok Bot, voivat muokata, ja jokainen muutos on nimetty versiohistoriassa. HTML-artefaktti on käynnissä oleva sivu, jota voit kommentoida ja julkaista julkisessa URL-osoitteessa, kun se hyväksytään. Voit myös tuoda yhden Figma-kehyksen AgentGrid.io:ään sovellusartefaktina. Tuo tuonti on yksisuuntainen, joten myöhemmät Figma-muokkaukset eivät synkronoidu.

Nämä kaksi eivät kilpaile samasta askeleesta. Figma omistaa suunnittelukankaan. AgentGrid.io on paikka Markdown ja HTML artefaktit menevät, kun työ ylittää työkalut ja tiimit.

Kokeile AgentGrid.io pitääksesi spesifikaation tai prototyypin, jota jokainen tiimisi agentti voi muokata ja julkaista.

Käytä jokaista työkalua, kun

• Käytä Figma-koodikerroksia kun sidosryhmien täytyy napsauttaa toimivaa prototyyppiä mallien vieressä ja vertailla ohjeita vierekkäin.
• Käytä Figma Specs kun suunnitelman pitäisi olla kehysten vieressä ja koodausagentin pitäisi lukea se Figma MCP-palvelimen kautta.
• Käytä Anima Playground kun haluat suunnitella suoraan koodilla tekoälyllä tai muuttaa Figma-suunnittelun muokattavaksi sovellukseksi, jota voit esikatsella ja julkaista.
• Käytä Buddy kun aloituspiste on Figma:n ulkopuolella ja haluat muokattavat tasot kankaalle. Katso lisätietoja Figma:n rakentamisesta selaimen rakentamiseen Figma Make vs. Anima Playground.
• Käytä AgentGrid.io kun ihmisten ja agenttien on muokattava spesifikaatiota tai prototyyppiä eri työkaluissa, tarkistettava kommenteilla ja julkaistava live-linkkinä.

Usein kysytyt kysymykset

Mitä ovat Figma:n kooditasot?

Koodikerros on Figma-kankaalla oleva taso, joka sisältää todellista juoksevaa koodia. Voit luoda sellaisen valituista kehyksistä, Figma Chrome-laajennuksella kaapatun live-sivuston, GitHub-prototyyppivaraston tai tyhjän kehotteen, klikata sen läpi, kommentoida sitä ja kopioida sen reittiohjeiden vertailua varten.

Onko Figma Specs vain Markdown?

Specs käyttää Markdown tekstiään, ja voit luoda sellaisen vetämällä minkä tahansa .md-tiedoston kankaalle. Se lisää tekstin ympärille Figma-ominaisuuksia: upotetut kehykset ja FigJam-taulut, kommentit ja agentin, joka voi lukea kommentit ja vastata niihin.

Maksavatko Figma-koodikerrokset tekoälypisteitä?

Kyllä. Maksullisissa suunnitelmissa koodikerroksen sisällä luominen ja muokkaaminen on ilmaista 4.11.2026 asti. Muut agenttityöt samassa kehotteessa käyttävät edelleen hyvityksiä, ja 4.11. jälkeen kaikki koodikerroksen tehtävät käyttävät tekoälypisteitä.

Voiko Claude Code, Codex tai Cursor lukea Figma Spec:n?

Kyllä, jos ne on yhdistetty Figma MCP-palvelimeen. Koodausagentit voivat lukea, luoda ja päivittää teknisiä tietoja figma-spec-taitojen avulla, ja voit liittää määrityslinkin kehotteeseen välittääksesi linkitetyn suunnittelukontekstin.

Mihin Figma-suunnitelmiin sisältyy Specs?

Specs on avoimessa beta-vaiheessa maksullisissa suunnitelmissa: Professional, Organisation, Enterprise ja Education sekä hallitus Figma:n Config India-artikkelin mukaisesti. Se ei kuulu ilmaiseen aloitussuunnitelmaan. Kooditasot otetaan käyttöön kaikissa suunnitelmissa, mukaan lukien Starter.