Figma-kodelag og Specs: Hva de er, hvordan de fungerer og hvor de stopper11 min read

Figma-kodelag legger løpende kode på lerretet, og Figma Specs legger Markdown der også. Begge gikk inn i åpen beta på Config India 15. oktober 2026, så en designfil kan nå inneholde rammer, en fungerende prototype og den skriftlige planen en agent bygger fra.

Denne veiledningen er for designere, PM-er og front-end-ingeniører som bestemmer om de skal flytte prototype- og spesifikasjonsarbeid til Figma. Den dekker hva hver funksjon gjør, hvordan du starter, hva den koster i AI-poeng, og hvor arbeidet må forlate Figma for lagkamerater i Claude, ChatGPT eller Cursor.

I AI-tiden er design kode. For å designe direkte i kode med AI, eller for å gjøre om Figma-designene dine til kode, bruk Anima Playground: beskriv en skjerm eller start fra en Figma-design, fortsett deretter å iterere på en redigerbar app du kan forhåndsvise og publisere.

Design direkte i kode med AI

Design med AI: Beskriv en skjerm eller snu Figma-design til kode.

Hva lanserte Figma på Config India 2026?

Kodelag og Specs var overskriften, men de kom med et sett agentfunksjoner rundt seg. Her er gjeldende status fra Figmas hjelpesenter:

Begge betaene ruller ut over flere uker, så du kan se dem før eller etter resten av teamet ditt.

Hva er Figma-kodelag?

Et kodelag er et lag som inneholder ekte, løpende kode. I stedet for en prototype som forfalsker interaksjoner med rammelenker, får du en fungerende, kodestøttet prototype som sitter på lerretet ved siden av designene dine. Lagkamerater kan klikke gjennom den, kommentere den og duplisere den for å prøve en annen retning side ved side.

Figma gir deg fire måter å starte en på:

• Fra et design. Velg rammer og be Figma-agenten om å gjøre dem om til et kodelag.
• Fra en live nettside. Ta en side med Figma Chrome-utvidelsen og lim den inn på lerretet.
• Fra en repo. Importer en støttet, lett prototyping-kodebase fra GitHub eller en lokal mappe. En GitHub-import forblir koblet til det depotet.
• Fra bunnen av. Legg til et tomt kodelag og be agenten om å bygge.

Du kan også ta med en prototype du har bygget i et kodeverktøy på lerretet gjennom Figma MCP-serveren.

Redigering skjer på tre måter. Du spør agenten, du merker rammer for å vise den hvor en endring hører hjemme, eller du åpner kodeeditoren og endrer koden selv. Når de visuelle detaljene betyr mer enn koden, Extract designs gjør skjermer fra et kodelag tilbake til redigerbare Figma-rammer. Når koden er klar for ingeniører, kan du skyve den til en gren og åpne en pull-forespørsel.

Hva er Figma Specs?

Figma kaller Specs «et innfødt hjem for kontekst.» I praksis er det et samarbeidende Markdown-dokument som lever enten på lerretet til en Figma Design-fil eller FigJam-kort, eller som sin egen Spec-fil.

Det er raskt å komme i gang:

1. Lag en frittstående Spec fra filleseren, eller gå til figma.com/spec/new.
2. Inne i en designfil eller FigJam-kort klikker du på Spec i verktøylinjen eller trykker på D.
3. Har allerede en .md fil? Dra den inn på lerretet og den blir en spesifikasjon.
4. Skriv med Markdown du allerede kjenner: # for overskrifter, - for kuler, [] for gjøremål, > for sitater, tre tilbakestikk for kode. Type / for bilder, Figma embeds og dividers.

Det som gjør en spesifikasjon mer enn en Markdown-fil, er det som sitter rundt teksten. Du kan bygge inn en ramme, et FigJam-brett eller en hvilken som helst node fra lerretet, slik at kravet og designet det beskriver forblir ved siden av hverandre. Lagkamerater kommenterer det, og Figma-agenten kan lese og svare på disse kommentarene.

Specs fungerer også utenfor Figma. Kodeagenter koblet til Figma MCP-serveren kan lese, opprette og oppdatere spesifikasjoner ved å bruke figma-spec ferdighet. For å overlevere kopierer du spesifikasjonslenken til kodeagentens ledetekst, og de koblede rammene, diagrammene, kodelagene og Code Connect-snuttene følger med.

Hvorfor Markdown ble overleveringsformatet

Figma sitt eget lanseringsinnlegg sier det tydelig: Markdown er nå de facto-formatet for å dele kontekst med agenter. Hver kodeagent leser den. De fleste produktteam har allerede planer, PRD-er og agentinstruksjoner .md filer.

Jeg har lest at Specs er Figma som aksepterer at overleveringen til en agent er tekst, og deretter gjør teksten flerspiller. En lokal AGENTS.md eller PRD mislyktes aldri på grunn av formatet. Det mislyktes fordi bare én person redigerte det, det drev bort fra designene, og ingen kunne se hvilken versjon agenten brukte.

Inne i Figma fikser Specs det. Det åpne spørsmålet er hva som skjer utenfor den. Innebyggingene, kommentarene og live designreferansene er Figma-funksjoner, og agenter når dem gjennom klienter oppført i Figma MCP-katalogen. Hvis ingeniørene dine, PM’s ChatGPT og markedsføringsteamets Claude alle trenger den samme planen, må du fortsatt bestemme hvor den delte kopien bor.

En praktisk arbeidsflyt: fra PRD til kodelag til pull-forespørsel

Her er hvordan de to funksjonene passer sammen på en ekte funksjon, og bruker bare det Figma dokumenterer i dag.

1. Dra din PRD inn på lerretet. Din eksisterende .md filen blir en spesifikasjon. Ingenting er skrevet om, og redigering for hånd bruker ingen AI-kreditter.
2. Bygg inn rammene den snakker om. Bruk / for å legge til strømmene PRD beskriver. Anmeldere ser nå kravet og skjermen sammen.
3. Gjør nøkkelrammene til et kodelag. Velg dem og spør agenten. Hvis du allerede har en prototype repo, importer den fra GitHub i stedet.
4. Gjennomgå på ett sted. Samle kommentarer om spesifikasjonen og kodelaget. Be Figma-agenten svare på hver åpne kommentar med en foreslått løsning mens folk veier inn i de samme trådene.
5. Gi bort spesifikasjonen. Lim inn spesifikasjonskoblingen i Codex, Claude Code eller Cursor koblet til Figma MCP-serveren. Agenten får Markdown pluss den koblede designkonteksten.
6. Send prototypekoden. Skyv kodelagets endringer til en gren og åpne en pull-forespørsel slik at ingeniører vurderer før sammenslåing.

Utdataene er en spesifikasjon som kodeagenten din kan lese og en fungerende prototype som teamet ditt faktisk har klikket seg gjennom. Test den genererte koden som enhver annen kode. En prototype som kjører er ikke det samme som produksjonsklar kode.

Hvis neste trinn er å gjøre om et Figma-design til kode du kan kjøre, eller designe inn kode fra en ledetekst, er det jobben til Anima Playground.

Hva koster kodelag og Specs?

• Kodelag bruker AI-kreditter. På betalte planer er generering og redigering inne i et kodelag gratis til og med 4. november 2026. Annet agentarbeid i samme ledetekst bruker fortsatt kreditter, og etter 4. november bruker alle kodelagsoppgaver kreditter.
• Specs er gratis å skrive. Å skrive og redigere en spesifikasjon selv bruker ikke kreditter. Å bruke agenten med en spesifikasjon gjør det. Hold pekeren på kvitteringen etter hver forespørsel for å se hva den kostet.
• Payload og retningslinjer legger til kostnader. Figma bemerker at både gir agenten mer kontekst og mer arbeid, slik at den samme ledeteksten kan bruke flere kreditter.

Begrensninger å sjekke før du planlegger rundt dem

• Rollout. Begge funksjonene er åpne betaversjoner som rulles ut over uker. Se etter kodeikonet i Figma Design-verktøylinjen og alternativet Spec i filleseren.
• Plans. Specs trenger en betalt plan. Nybegynnere får kodelag, men ikke Specs. Begge trenger redigeringstilgang for å lage.
• Velge bort. Bare Enterprise-administratorer kan slå av kodelag, og bare ved å slå av alle Figma AI-funksjoner.
• Repo size. GitHub-import er for lette prototyping-kodebaser, ikke en full produksjonsapp.
• Design systemkode. Å koble til den virkelige komponentkoden gjennom kodekilder er fortsatt en lukket beta, så det kan hende at kodelag ikke bruker produksjonskomponentene dine ennå.

Hvor Figma stopper, og hvor Anima og AgentGrid.io passer

Hvis hele teamet ditt jobber i Figma, er kodelag og Specs en sterk standard. Prototypen, planen og kommentarene ligger i samme fil, og Figmas agent og MCP-klienter kan jobbe med dem.

To vanlige situasjoner faller fortsatt utenfor denne filen.

Ideen startet et annet sted. En Claude Design-prototype, en ChatGPT-generert HTML-side, eller et live-nettsted du ønsker å lære av. Figma sin MCP server har nå en html_to_figma verktøy for agentgenerert HTML. Animas Buddy, vår AI-designagent i Figma, snur også HTML, Claude-artefakter, bilder og URL-er i redigerbare Figma-lag, som er nyttig når du vil fortsette å designe på disse lagene med designsystemet ditt.

Resultatet må forlate Figma. Spesifikasjonen eller prototypen din må gjennomgås av personer utenfor Figma-teamet ditt, redigeres av agenter fra flere leverandører, eller publiseres som en direktekobling. Det er jobben AgentGrid.io, bygget av Anima, gjør. En Markdown-artefakt på AgentGrid.io er et levende, automatisk lagringsdokument som personer og tilkoblede agenter som Claude, ChatGPT, Cursor og Grok Bot kan redigere, med hver endring tilskrevet etter navn i versjonshistorikken. En HTML-artefakt er en løpende side du kan kommentere og publisere til en offentlig URL når den er godkjent. Du kan også importere én Figma-ramme til AgentGrid.io som en appartefakt. Denne importen er enveis, så senere Figma-redigeringer synkroniseres ikke.

De to konkurrerer ikke om samme trinn. Figma eier designlerretet. AgentGrid.io er der Markdown og HTML-artefakter går når arbeidet krysser verktøy og team.

Prøv AgentGrid.io å beholde en spesifikasjon eller prototype som hver agent i teamet ditt kan redigere og publisere.

Bruk hvert verktøy når

• Bruk Figma kodelag når interessenter må klikke på en fungerende prototype ved siden av designene og sammenligne veibeskrivelser side ved side.
• Bruk Figma Specs når planen skal leve ved siden av rammene og leses av en kodeagent gjennom Figma MCP-serveren.
• Bruk Anima Playground når du vil designe direkte i kode med AI, eller gjøre om et Figma-design til en redigerbar app du kan forhåndsvise og publisere.
• Bruk Buddy når startpunktet er utenfor Figma og du vil ha redigerbare lag på lerretet. For en mer fullstendig sammenligning av bygging i Figma versus en nettleserbygger, se Figma Make vs Anima Playground.
• Bruk AgentGrid.io når spesifikasjonen eller prototypen må redigeres av folk og agenter på tvers av verktøy, gjennomgås med kommentarer og publiseres som en direktekobling.

Ofte stilte spørsmål

Hva er kodelag i Figma?

Et kodelag er et lag på Figma-lerretet som inneholder ekte, løpende kode. Du kan lage en fra utvalgte rammer, et live-nettsted tatt med Figma Chrome-utvidelsen, en GitHub-prototyping-repo eller en tom ledetekst, deretter klikke deg gjennom den, kommentere den og duplisere den for å sammenligne veibeskrivelser.

Er Figma Specs bare Markdown?

Specs bruker Markdown for sin tekst, og du kan dra en hvilken som helst .md-fil til lerretet for å lage en. Den legger til Figma-funksjoner rundt den teksten: innebygde rammer og FigJam-tavler, kommentarer og en agent som kan lese og svare på disse kommentarene.

Koster Figma-kodelag AI-kreditter?

Ja. På betalte planer er generering og redigering inne i et kodelag gratis til og med 4. november 2026. Annet agentarbeid i samme ledetekst bruker fortsatt kreditter, og etter 4. november bruker alle kodelagsoppgaver AI-kreditter.

Kan Claude Code, Codex eller Cursor lese en Figma Spec?

Ja, hvis de er koblet til Figma MCP-serveren. Kodeagenter kan lese, lage og oppdatere spesifikasjoner med ferdighetene figma-spec, og du kan lime inn en spesifikasjonslenke i ledeteksten for å sende dens koblede designkontekst.

Hvilke Figma-planer inkluderer Specs?

Specs er i åpen beta på betalte planer: Professional, Organization, Enterprise og Education, pluss regjeringen i henhold til Figma sin Config India-artikkel. Det er ikke på den gratis startplanen. Kodelag ruller ut til alle planer, inkludert Starter.