Figma Kodlager och Specs: Vad de är, hur de fungerar och var de slutar12 min read

Figma kodlager sätter löpande kod på duken, och Figma Specs placerade Markdown där också. Båda gick in i öppen beta på Config India den 15 oktober 2026, så en designfil kan nu innehålla ramar, en fungerande prototyp och den skriftliga plan som en agent bygger från.

Den här guiden är till för designers, PM:s och front-end-ingenjörer som bestämmer sig för om de ska flytta prototyp- och specifikationer till Figma. Den täcker vad varje funktion gör, hur man börjar, vad den kostar i AI-poäng och var arbetet måste lämna Figma för lagkamrater i Claude, ChatGPT eller Cursor.

I AI-tiden är design kod. För att designa direkt i kod med AI, eller för att omvandla dina Figma-designer till kod, använd Anima Playground: beskriv en skärm eller utgå från en Figma-design och fortsätt sedan att iterera på en redigerbar app som du kan förhandsgranska och publicera.

Designa direkt i kod med AI

Designa med AI: Beskriv en skärm eller vänd Figma-designer till kod.

Vad lanserades Figma på Config India 2026?

Kodlager och Specs var rubriken, men de kom med en uppsättning agentfunktioner runt sig. Här är den aktuella statusen från Figma:s hjälpcenter:

Båda betaversionerna rullas ut under flera veckor, så du kan se dem före eller efter resten av ditt lag.

Vad är Figma kodlager?

Ett kodlager är ett lager som innehåller riktig, löpande kod. Istället för en prototyp som förfalskar interaktioner med ramlänkar, får du en fungerande, kodstödd prototyp som sitter på duken bredvid dina mönster. Lagkamrater kan klicka igenom den, kommentera den och duplicera den för att prova en annan riktning sida vid sida.

Figma ger dig fyra sätt att starta ett:

• Från en design. Välj ramar och be Figma-agenten att förvandla dem till ett kodlager.
• Från en livewebbplats. Fånga en sida med tillägget Figma Chrome och klistra in den på duken.
• Från en repo. Importera en stödd, lätt prototypkodbas från GitHub eller en lokal mapp. En GitHub-import förblir ansluten till det förvaret.
• Från grunden. Lägg till ett tomt kodlager och be agenten att bygga.

Du kan också ta med en prototyp som du byggt i ett kodningsverktyg på duken via Figma MCP-servern.

Redigering sker på tre sätt. Du frågar agenten, du kommenterar ramar för att visa var en ändring hör hemma, eller så öppnar du kodredigeraren och ändrar koden själv. När de visuella detaljerna betyder mer än koden, Extract designs förvandlar skärmar från ett kodlager tillbaka till redigerbara Figma-ramar. När koden är klar för ingenjörer kan du skjuta den till en gren och öppna en pull-begäran.

Vad är Figma Specs?

Figma kallar Specs ”ett inhemskt hem för sammanhang.” I praktiken är det ett kollaborativt Markdown-dokument som finns antingen på duken av en Figma Design-fil eller FigJam-kort, eller som sin egen Spec-fil.

Det går snabbt att komma igång:

1. Skapa en fristående Spec från filläsaren eller gå till figma.com/spec/new.
2. Inuti en designfil eller FigJam-kort, klicka på Spec i verktygsfältet eller tryck på D.
3. Har redan en .md fil? Dra det till duken och det blir en spec.
4. Skriv med Markdown som du redan känner till: # för rubriker, - för kulor, [] för att göra, > för citat, tre backticks för kod. Typ / för bilder, Figma inbäddningar och avdelare.

Det som gör en spec mer än en Markdown-fil är vad som sitter runt texten. Du kan bädda in en ram, en FigJam-bräda eller valfri nod från duken, så kravet och designen den beskriver stannar bredvid varandra. Lagkamrater kommenterar det, och Figma-agenten kan läsa och svara på dessa kommentarer.

Specs fungerar även utanför Figma. Kodningsagenter anslutna till Figma MCP-servern kan läsa, skapa och uppdatera specifikationer med hjälp av figma-spec skicklighet. För att lämna en, kopierar du speclänken till din kodningsagents prompt, och de länkade ramarna, diagrammen, kodlagren och Code Connect-snuttarna följer med.

Varför Markdown blev hand-off-formatet

Figma:s eget lanseringsinlägg säger det tydligt: Markdown är nu de facto-formatet för att dela sammanhang med agenter. Varje kodningsagent läser den. De flesta produktteam har redan planer, PRD:er och agentinstruktioner .md filer.

Jag har läst att Specs är att Figma accepterar att överlämnandet till en agent är text, och sedan gör den texten flerspelare. En lokal AGENTS.md eller PRD misslyckades aldrig på grund av formatet. Det misslyckades eftersom bara en person redigerade det, det drev bort från designen och ingen kunde se vilken version agenten använde.

Inuti Figma fixar Specs det. Den öppna frågan är vad som händer utanför den. Inbäddningarna, kommentarerna och livedesignreferenserna är Figma-funktioner, och agenter når dem via klienter listade i Figma MCP-katalogen. Om dina ingenjörer, din PM:s ChatGPT och ditt marknadsföringsteams Claude alla behöver samma plan, måste du fortfarande bestämma var den delade kopian ska finnas.

Ett praktiskt arbetsflöde: från PRD till kodlager till pull-förfrågan

Så här passar de två funktionerna ihop på en riktig funktion, med endast det som Figma dokumenterar idag.

1. Dra din PRD till duken. Din befintliga .md filen blir en spec. Ingenting skrivs om, och att redigera det för hand använder inga AI-krediter.
2. Bädda in ramarna det handlar om. Använd / för att lägga till de flöden som PRD beskriver. Granskarna ser nu kravet och skärmen tillsammans.
3. Förvandla nyckelramarna till ett kodlager. Välj dem och fråga agenten. Om du redan har en prototyprepo, importera den från GitHub istället.
4. Recension på ett ställe. Samla kommentarer om specifikationen och kodlagret. Be Figma-agenten att svara på varje öppen kommentar med ett förslag på korrigering medan folk väger in i samma trådar.
5. Lämna specifikationen. Klistra in specifikationslänken i Codex, Claude Code eller Cursor ansluten till Figma MCP-servern. Agenten får Markdown plus den länkade designkontexten.
6. Skicka prototypkoden. Skjut kodlagrets ändringar till en gren och öppna en pull-begäran så att ingenjörer granskar innan de sammanfogas.

Utdatan är en spec som din kodningsagent kan läsa och en fungerande prototyp som ditt team faktiskt har klickat igenom. Testa den genererade koden som vilken annan kod som helst. En prototyp som körs är inte detsamma som produktionsklar kod.

Om nästa steg är att förvandla en Figma-design till kod som du kan köra, eller designa in kod från en prompt, det är Anima Playground’ uppgift.

Vad kostar kodlager och Specs?

• Kodlager använder AI-krediter. På betalda planer är generering och redigering inuti ett kodlager gratis till och med den 4 november 2026. Annat agentarbete i samma prompt använder fortfarande krediter, och efter den 4 november använder alla kodlageruppgifter krediter.
• Specs är gratis att skriva. Att skriva och redigera en spec själv använder inte krediter. Att använda agenten med en spec gör det. Håll muspekaren över kvittot efter varje uppmaning för att se vad det kostade.
• Payload och riktlinjer ökar kostnaden. Figma noterar att både ger agenten mer sammanhang och mer arbete, så samma prompt kan använda fler krediter.

Gränser att kontrollera innan du planerar runt dem

• Utrullning. Båda funktionerna är öppna betaversioner som rullas ut under veckor. Leta efter kodikonen i Figma Design verktygsfält och alternativet Spec i filläsaren.
• Planer. Specs behöver en betald plan. Nybörjaranvändare får kodlager men inte Specs. Båda behöver redigeringsbehörighet för att skapa.
• Välja bort. Endast Enterprise-administratörer kan stänga av kodlager och endast genom att stänga av alla Figma AI-funktioner.
• Repo storlek. GitHub-importen är för lätta prototypkodbaser, inte en fullständig produktionsapp.
• Designa systemkod. Att ansluta din riktiga komponentkod via kodkällor är fortfarande en stängd beta, så kodlager kanske inte använder dina produktionskomponenter ännu.

Där Figma stannar, och där Anima och AgentGrid.io passar

Om hela ditt team arbetar i Figma är kodlager och Specs en stark standard. Prototypen, planen och kommentarerna finns i samma fil, och Figma:s agent och MCP-klienter kan arbeta med dem.

Två vanliga situationer faller fortfarande utanför den filen.

Idén började någon annanstans. En Claude Design-prototyp, en ChatGPT-genererad HTML-sida eller en live-webbplats som du vill lära dig av. Figma:s MCP-server har nu en html_to_figma verktyg för agentgenererad HTML. Anima:s Buddy, vår AI-designagent i Figma, vänder sig också HTML, Claude artefakter, bilder och webbadresser till redigerbara Figma lager, vilket är användbart när du vill fortsätta designa på dessa lager med ditt designsystem.

Resultatet måste lämna Figma. Din specifikation eller prototyp måste granskas av personer utanför ditt Figma-team, redigeras av agenter från flera leverantörer eller publiceras som en livelänk. Det är jobbet AgentGrid.io, byggt av Anima, gör. En Markdown-artefakt på AgentGrid.io är ett levande, autosparande dokument som personer och anslutna agenter som Claude, ChatGPT, Cursor och Grok Bot kan redigera, med varje ändring tillskriven efter namn i versionshistoriken. En HTML-artefakt är en löpande sida som du kan kommentera och publicera till en offentlig URL när den är godkänd. Du kan också importera en Figma-ram till AgentGrid.io som en appartefakt. Den importen är enkelriktad, så senare Figma-redigeringar synkroniseras inte.

De två tävlar inte om samma steg. Figma äger designduken. AgentGrid.io är där Markdown och HTML artefakter går när arbetet korsar verktyg och team.

Prova AgentGrid.io att behålla en spec eller prototyp som varje agent i ditt team kan redigera och publicera.

Använd varje verktyg när

• Använd kodlager Figma när intressenter behöver klicka på en fungerande prototyp bredvid designen och jämföra vägbeskrivningar sida vid sida.
• Använd Figma Specs när planen ska leva bredvid ramarna och läsas av en kodningsagent via Figma MCP-servern.
• Använd Anima Playground när du vill designa direkt i kod med AI, eller förvandla en Figma-design till en redigerbar app kan du förhandsgranska och publicera.
• Använd Buddy när startpunkten är utanför Figma och du vill ha redigerbara lager på duken. För en mer utförlig jämförelse av byggnad i Figma kontra en webbläsarbyggare, se Figma Make vs Anima Playground.
• Använd AgentGrid.io när specifikationen eller prototypen måste redigeras av människor och agenter över verktyg, granskas med kommentarer och publiceras som en livelänk.

Vanliga frågor

Vad är kodlager i Figma?

Ett kodlager är ett lager på Figma-duken som innehåller riktig, löpande kod. Du kan skapa en från utvalda ramar, en livewebbplats som tagits med Figma Chrome-tillägget, en GitHub-prototyprepo eller en tom prompt, klicka sedan igenom den, kommentera den och duplicera den för att jämföra vägbeskrivningar.

Är Figma Specs bara Markdown?

Specs använder Markdown för sin text, och du kan dra valfri .md-fil till arbetsytan för att skapa en. Den lägger till Figma-funktioner runt den texten: inbäddade ramar och FigJam-kort, kommentarer och en agent som kan läsa och svara på dessa kommentarer.

Kostar Figma kodlager AI-krediter?

Ja. På betalda planer är generering och redigering inuti ett kodlager gratis till och med den 4 november 2026. Annat agentarbete i samma prompt använder fortfarande krediter, och efter den 4 november använder alla kodlageruppgifter AI-krediter.

Kan Claude Code, Codex eller Cursor läsa en Figma Spec?

Ja, om de är anslutna till Figma MCP-servern. Kodningsagenter kan läsa, skapa och uppdatera specifikationer med figma-spec-färdigheten, och du kan klistra in en speclänk i din prompt för att skicka vidare dess länkade designkontext.

Vilka Figma-planer inkluderar Specs?

Specs är i öppen betaversion av betalda planer: Professional, Organization, Enterprise och Education, plus Government enligt Figma:s Config India-artikel. Det finns inte på den kostnadsfria startplanen. Kodlager rullas ut till alla planer, inklusive Starter.