Figma-kodelag og Specs: Hvad de er, hvordan de virker, og hvor de stopper11 min read

Figma kodelag sætter kørende kode på lærredet, og Figma Specs sætter Markdown der også. Begge gik ind i åben beta på Config India den 15. oktober 2026, så en designfil kan nu indeholde rammer, en fungerende prototype og den skriftlige plan, som en agent bygger ud fra.

Denne vejledning er til designere, PM’er og front-end-ingeniører, der beslutter, om de skal flytte prototype- og spec-arbejde til Figma. Det dækker, hvad hver funktion gør, hvordan man starter, hvad det koster i AI-kreditter, og hvor arbejdet skal forlade Figma for holdkammerater i Claude, ChatGPT eller Cursor.

I AIs tidsalder er design kode. For at designe direkte i kode med AI eller for at omdanne dine Figma-designs til kode, brug Anima Playground: beskriv en skærm eller start fra et Figma-design, og fortsæt derefter med at iterere på en redigerbar app, som du kan få vist og udgive.

Design direkte i kode med AI

Design med AI: Beskriv en skærm, eller vend Figma-designs til kode.

Hvad lancerede Figma på Config India 2026?

Kodelag og Specs var overskriften, men de ankom med et sæt agentfunktioner omkring sig. Her er den aktuelle status fra Figma’s hjælpecenter:

Begge betaer lanceres over flere uger, så du kan se dem før eller efter resten af dit hold.

Hvad er Figma-kodelag?

Et kodelag er et lag, der indeholder ægte, kørende kode. I stedet for en prototype, der forfalsker interaktioner med rammelinks, får du en fungerende, kodestøttet prototype, der sidder på lærredet ved siden af ​​dine designs. Holdkammerater kan klikke sig igennem det, kommentere det og duplikere det for at prøve en anden retning side om side.

Figma giver dig fire måder at starte en på:

• Fra et design. Vælg rammer, og bed Figma-agenten om at lave dem om til et kodelag.
• Fra en live hjemmeside. Tag en side med Figma Chrome-udvidelsen og indsæt den på lærredet.
• Fra en repo. Importer en understøttet, letvægts-prototypekodebase fra GitHub eller en lokal mappe. En GitHub-import forbliver forbundet til dette lager.
• Fra bunden. Tilføj et tomt kodelag, og bed agenten om at bygge.

Du kan også bringe en prototype, du har bygget i et kodningsværktøj, på lærredet gennem Figma MCP-serveren.

Redigering sker på tre måder. Du spørger agenten, du annoterer rammer for at vise den, hvor en ændring hører hjemme, eller du åbner kodeeditoren og ændrer koden selv. Når de visuelle detaljer betyder mere end koden, Extract designs forvandler skærme fra et kodelag tilbage til redigerbare Figma-rammer. Når koden er klar til ingeniører, kan du skubbe den til en filial og åbne en pull-anmodning.

Hvad er Figma Specs?

Figma kalder Specs “et indfødt hjem for kontekst.” I praksis er det et kollaborativt Markdown-dokument, der enten lever på lærredet af en Figma Design-fil eller FigJam-kort eller som sin egen Spec-fil.

Det er hurtigt at komme i gang:

1. Opret en selvstændig Spec fra filbrowseren, eller gå til figma.com/spec/new.
2. Inde i en designfil eller FigJam-kort skal du klikke på Spec på værktøjslinjen eller trykke på D.
3. Har allerede en .md fil? Træk det over på lærredet, og det bliver en spec.
4. Skriv med den Markdown, du allerede kender: # for overskrifter, - for kugler, [] til gøremål, > for citater, tre backticks for kode. Type / til billeder, Figma indlejringer og opdelere.

Det, der gør en spec mere end en Markdown-fil, er det, der sidder omkring teksten. Du kan indlejre en ramme, et FigJam-kort eller en hvilken som helst node fra lærredet, så kravet og det design, det beskriver, forbliver ved siden af ​​hinanden. Holdkammerater kommenterer det, og Figma-agenten kan læse og svare på disse kommentarer.

Specs fungerer også uden for Figma. Kodningsagenter forbundet til Figma MCP-serveren kan læse, oprette og opdatere specifikationer ved hjælp af figma-spec dygtighed. For at aflevere en, kopierer du spec-linket til din kodningsagents prompt, og de sammenkædede rammer, diagrammer, kodelag og Code Connect-snippets følger med.

Hvorfor Markdown blev afleveringsformatet

Figma’s eget lanceringsindlæg siger det klart: Markdown er nu de facto-formatet til at dele kontekst med agenter. Hver kodningsagent læser den. De fleste produktteams opbevarer allerede planer, PRD’er og agentinstruktioner .md filer.

Min læsning er, at Specs er Figma, der accepterer, at overdragelsen til en agent er tekst, og gør derefter teksten til multiplayer. En lokal AGENTS.md eller PRD fejlede aldrig på grund af formatet. Det mislykkedes, fordi kun én person redigerede det, det drev væk fra designs, og ingen kunne se, hvilken version agenten brugte.

Inde i Figma løser Specs det. Det åbne spørgsmål er, hvad der sker uden for den. Indlejringerne, kommentarerne og live designreferencerne er Figma-funktioner, og agenter når dem gennem klienter, der er anført i Figma MCP-kataloget. Hvis dine ingeniører, din PM’s ChatGPT og dit marketingteams Claude alle har brug for den samme plan, skal du stadig beslutte, hvor den delte kopi bor.

En praktisk arbejdsgang: fra PRD til kodelag til pull-anmodning

Her er, hvordan de to funktioner passer sammen på en ægte funktion, ved kun at bruge det, Figma dokumenterer i dag.

1. Træk din PRD ind på lærredet. Din eksisterende .md fil bliver en spec. Intet bliver omskrevet, og at redigere det manuelt bruger ingen AI-kreditter.
2. Indlejr de rammer, det taler om. Brug / for at tilføje de flows, som PRD beskriver. Anmeldere ser nu kravet og skærmen sammen.
3. Gør nøglerammerne til et kodelag. Vælg dem, og spørg agenten. Hvis du allerede har en prototype-repo, skal du importere den fra GitHub i stedet.
4. Gennemgå ét sted. Saml kommentarer til specifikationen og kodelaget. Bed Figma-agenten om at svare på hver åben kommentar med en foreslået løsning, mens folk vægter de samme tråde.
5. Aflever spec. Indsæt spec-linket i Codex, Claude Code eller Cursor, der er forbundet til Figma MCP-serveren. Agenten får Markdown plus den linkede designkontekst.
6. Send prototypekoden. Skub kodelagets ændringer til en gren, og åbn en pull-anmodning, så ingeniører gennemgår, før de flettes.

Outputtet er en spec, som din kodningsagent kan læse, og en fungerende prototype, dit team faktisk har klikket igennem. Test den genererede kode som enhver anden kode. En prototype, der kører, er ikke det samme som produktionsklar kode.

Hvis næste trin er at omdanne et Figma-design til kode, du kan køre, eller designe kode fra en prompt, er det Anima Playground’ opgave.

Hvad koster kodelag og Specs?

• Kodelag bruger AI-kreditter. På betalte planer er generering og redigering inde i et kodelag gratis til den 4. november 2026. Andet agentarbejde i samme prompt bruger stadig kreditter, og efter 4. november bruger alle kodelagsopgaver kreditter.
• Specs er gratis at skrive. At skrive og redigere en spec selv bruger ikke kreditter. Brug af agenten med en spec gør det. Hold musen over kvitteringen efter hver prompt for at se, hvad den kostede.
• Payload og retningslinjer tilføjer omkostninger. Figma bemærker, at både giver agenten mere kontekst og mere arbejde, så den samme prompt kan bruge flere kreditter.

Grænser at tjekke, før du planlægger omkring dem

• Udrulning. Begge funktioner er åbne betaversioner, der udrulles over uger. Se efter kodeikonet på Figma Design-værktøjslinjen og Spec-indstillingen i filbrowseren.
• Planer. Specs har brug for en betalt plan. Begynderbrugere får kodelag, men ikke Specs. Begge har brug for redigeringsadgang for at oprette.
• Fravælger. Kun Enterprise-administratorer kan slå kodelag fra, og kun ved at slå alle Figma AI-funktioner fra.
• Repo størrelse. GitHub-importen er til lette prototyping-kodebaser, ikke en fuld produktionsapp.
• Design systemkode. At forbinde din rigtige komponentkode gennem kodekilder er stadig en lukket beta, så kodelag bruger muligvis ikke dine produktionskomponenter endnu.

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

Hvis hele dit team arbejder i Figma, er kodelag og Specs en stærk standard. Prototypen, planen og kommentarerne sidder i samme fil, og Figma’s agent og MCP-klienter kan arbejde på dem.

To almindelige situationer falder stadig uden for denne fil.

Ideen startede et andet sted. En Claude Design-prototype, en ChatGPT-genereret HTML-side eller et live-websted, du vil lære af. Figma’s MCP-server har nu en html_to_figma værktøj til agent-genereret HTML. Anima’s Buddy, vores AI-designagent i Figma, vender også HTML, Claude artefakter, billeder og URL’er i redigerbare Figma lag, hvilket er nyttigt, når du vil fortsætte med at designe på disse lag med dit designsystem.

Resultatet skal forlade Figma. Din spec eller prototype skal gennemgås af folk uden for dit Figma-team, redigeres af agenter fra flere leverandører eller udgives som et live-link. Det er det job AgentGrid.io, bygget af Anima, udfører. En Markdown-artefakt på AgentGrid.io er et levende, autogemmende dokument, som personer og forbundne agenter som Claude, ChatGPT, Cursor og Grok Bot kan redigere, med hver ændring tildelt efter navn i versionshistorikken. En HTML artefakt er en kørende side, du kan kommentere på og publicere til en offentlig URL, når den er godkendt. Du kan også importere én Figma-ramme til AgentGrid.io som en appartefakt. Denne import er envejs, så senere Figma-redigeringer synkroniseres ikke.

De to konkurrerer ikke om det samme trin. Figma ejer designlærredet. AgentGrid.io er hvor Markdown og HTML artefakter går, når arbejdet krydser værktøjer og teams.

Prøv AgentGrid.io at beholde en spec eller prototype, som hver agent på dit team kan redigere og udgive.

Brug hvert værktøj når

• Brug Figma kodelag når interessenter skal klikke på en fungerende prototype ved siden af designs og sammenligne retninger side om side.
• Brug Figma Specs når planen skal leve ved siden af rammerne og læses af en kodningsagent gennem Figma MCP-serveren.
• Brug Anima Playground når du vil designe direkte i kode med AI, eller omdanne et Figma-design til en redigerbar app, du kan forhåndsvise og udgive.
• Brug Buddy når udgangspunktet er uden for Figma, og du vil have redigerbare lag på lærredet. For en mere omfattende sammenligning af bygning i Figma versus en browserbygger, se Figma Make vs Anima Playground.
• Brug AgentGrid.io når specifikationen eller prototypen skal redigeres af folk og agenter på tværs af værktøjer, gennemgås med kommentarer og offentliggøres som et livelink.

Ofte stillede spørgsmål

Hvad er kodelag i Figma?

Et kodelag er et lag på Figma lærredet, der indeholder ægte, kørende kode. Du kan oprette en fra udvalgte rammer, et live-websted, der er optaget med Figma Chrome-udvidelsen, en GitHub-prototyping-repo eller en tom prompt, og derefter klikke igennem den, kommentere den og duplikere den for at sammenligne retninger.

Er Figma Specs bare Markdown?

Specs bruger Markdown til sin tekst, og du kan trække enhver .md-fil ind på lærredet for at oprette en. Den tilføjer Figma-funktioner omkring den tekst: indlejrede rammer og FigJam-tavler, kommentarer og en agent, der kan læse og svare på disse kommentarer.

Koster Figma-kodelag AI-kreditter?

Ja. På betalte planer er generering og redigering inde i et kodelag gratis til den 4. november 2026. Andet agentarbejde i samme prompt bruger stadig kreditter, og efter 4. november bruger alle kodelagsopgaver AI-kreditter.

Kan Claude Code, Codex eller Cursor læse en Figma Spec?

Ja, hvis de er forbundet til Figma MCP-serveren. Kodningsagenter kan læse, oprette og opdatere specifikationer med figma-spec-færdigheden, og du kan indsætte et specifikationslink i din prompt for at videregive dens linkede designkontekst.

Hvilke Figma-planer inkluderer Specs?

Specs er i åben beta på betalte planer: Professional, Organisation, Enterprise og Education, plus Government ifølge Figma’s Config India artikel. Det er ikke på den gratis begynderplan. Kodelag ruller ud til alle planer, inklusive Starter.