Figma-codelagen en Specs: wat ze zijn, hoe ze werken en waar ze stoppen11 min read

Figma-codelagen plaatsen actieve code op het canvas, en Figma Specs plaatst daar ook Markdown. Beiden gingen op 15 oktober 2026 de open bèta in op Config India, dus een ontwerpbestand kan nu frames, een werkend prototype en het geschreven plan bevatten waaruit een agent voortbouwt.

Deze handleiding is bedoeld voor ontwerpers, PM’s en front-end engineers die beslissen of ze prototype- en specificatiewerk naar de Figma willen verplaatsen. Het behandelt wat elke functie doet, hoe je moet beginnen, wat het kost aan AI-credits en waar het werk Figma moet achterlaten voor teamgenoten in Claude, ChatGPT of Cursor.

In het tijdperk van AI is design code. Gebruik om rechtstreeks in code met AI te ontwerpen, of om uw Figma-ontwerpen in code om te zetten Anima Playground: beschrijf een scherm of begin met een Figma-ontwerp en blijf vervolgens herhalen op een bewerkbare app die u kunt bekijken en publiceren.

Ontwerp rechtstreeks in code met AI

Ontwerp met AI: Beschrijf een scherm of zet Figma-ontwerpen om in code.

Wat werd Figma gelanceerd op Config India 2026?

Codelagen en Specs waren de kop, maar ze kwamen met een reeks agentfuncties eromheen. Hier is de huidige status van het helpcentrum van Figma:

Beide bèta’s worden over een aantal weken uitgerold, dus het kan zijn dat je ze vóór of na de rest van je team ziet.

Wat zijn Figma-codelagen?

Een codelaag is een laag die echte, actieve code bevat. In plaats van een prototype dat interacties met framelinks nabootst, krijg je een werkend, door code ondersteund prototype op het canvas naast je ontwerpen. Teamgenoten kunnen er doorheen klikken, erop reageren en het dupliceren om naast elkaar een andere richting te proberen.

Figma biedt u vier manieren om er een te starten:

• Van een ontwerp. Selecteer frames en vraag de Figma-agent om er een codelaag van te maken.
• Van een livewebsite. Leg een pagina vast met de extensie Figma Chrome en plak deze op het canvas.
• Uit een repository. Importeer een ondersteunde, lichtgewicht prototyping-codebase uit GitHub of een lokale map. Een GitHub-import blijft verbonden met die repository.
• Vanaf nul. Voeg een lege codelaag toe en vraag de agent om te bouwen.

U kunt ook een prototype dat u in een codeertool hebt gebouwd, op het canvas plaatsen via de Figma MCP-server.

Bewerken gebeurt op drie manieren. U geeft de agent een melding, u annoteert frames om aan te geven waar een wijziging thuishoort, of u opent de code-editor en wijzigt de code zelf. Wanneer de visuele details belangrijker zijn dan de code, Extract designs verandert schermen van een codelaag terug in bewerkbare Figma-frames. Wanneer de code klaar is voor engineers, kunt u deze naar een filiaal pushen en een pull-verzoek openen.

Wat is Figma Specs?

Figma noemt Specs “een thuis voor context.” In de praktijk is het een gezamenlijk Markdown-document dat op het canvas van een Figma Design-bestand of een FigJam-bord staat, of als zijn eigen Spec-bestand.

Aan de slag gaan gaat snel:

1. Maak een zelfstandige Spec vanuit de bestandsbrowser, of ga naar figma.com/spec/new.
2. Klik in een ontwerpbestand of FigJam-bord op Spec in de werkbalk of druk op D.
3. Heb al een .md bestand? Sleep het naar het canvas en het wordt een specificatie.
4. Schrijf met de Markdown die je al kent: # voor kopjes, - voor kogels, [] voor taken, > voor aanhalingstekens, drie backticks voor code. Typ / voor afbeeldingen, Figma-instortvoorzieningen en verdelers.

Wat een specificatie meer maakt dan een Markdown-bestand, is wat er rond de tekst staat. U kunt een frame, een FigJam-bord of een willekeurig knooppunt van het canvas inbedden, zodat de vereiste en het ontwerp dat het beschrijft naast elkaar blijven. Teamgenoten geven er commentaar op, en de Figma-agent kan die opmerkingen lezen en erop reageren.

Specs werkt ook buiten Figma. Codeeragenten die zijn aangesloten op de Figma MCP-server kunnen specificaties lezen, maken en bijwerken met behulp van de figma-spec vaardigheid. Om er een uit te delen, kopieert u de specificatielink naar de prompt van uw codeeragent, en de gekoppelde frames, diagrammen, codelagen en Code Connect-fragmenten worden daarbij meegeleverd.

Waarom Markdown het hand-off-formaat werd

De eigen lanceringspost van Figma zegt het duidelijk: Markdown is nu het de facto formaat voor het delen van context met agenten. Elke codeeragent leest het. De meeste productteams bewaren al plannen, PRD’s en instructies voor agenten .md bestanden.

Ik heb gelezen dat Specs Figma is, waarbij wordt geaccepteerd dat de overdracht aan een agent tekst is, en die tekst vervolgens voor meerdere spelers wordt gemaakt. Een lokaal AGENTS.md of PRD is nooit mislukt vanwege het formaat. Het mislukte omdat slechts één persoon het redigeerde, het afweek van de ontwerpen en niemand kon zien welke versie de agent gebruikte.

Binnen Figma lost Specs dat op. De open vraag is wat er daarbuiten gebeurt. De insluitingen, opmerkingen en live ontwerpreferenties zijn Figma-functies, en agenten bereiken deze via klanten die zijn vermeld in de Figma MCP-catalogus. Als uw ingenieurs, de ChatGPT van uw PM en Claude van uw marketingteam allemaal hetzelfde plan nodig hebben, moet u nog steeds beslissen waar de gedeelde kopie zich bevindt.

Een praktische workflow: van PRD, van codelaag tot pull-request

Hier ziet u hoe de twee functies samenkomen in een echte functie, waarbij alleen wordt gebruikt wat Figma vandaag documenteert.

1. Sleep uw PRD naar het canvas. Uw bestaande .md bestand wordt een specificatie. Er wordt niets herschreven en bij het handmatig bewerken zijn geen AI-credits nodig.
2. Sluit de frames in waar het over gaat. Gebruik / om de stromen toe te voegen die de PRD beschrijft. Reviewers zien nu de eis en het scherm samen.
3. Verander de sleutelframes in een codelaag. Selecteer ze en vraag de agent. Als u al een prototyperepository heeft, importeer deze dan vanuit GitHub.
4. Recensie op één plek. Verzamel opmerkingen over de specificaties en de codelaag. Vraag de Figma-agent om op elke openstaande opmerking te reageren met een voorgestelde oplossing, terwijl mensen over dezelfde discussies nadenken.
5. Geef de specificatie door. Plak de specificatielink in Codex, Claude Code of Cursor verbonden met de Figma MCP-server. De agent krijgt de Markdown plus de gekoppelde ontwerpcontext.
6. Verzend de prototypecode. Push de wijzigingen in de codelaag naar een vertakking en open een pull-verzoek zodat technici deze kunnen beoordelen voordat ze worden samengevoegd.

De uitvoer is een specificatie die uw codeeragent kan lezen en een werkend prototype waar uw team daadwerkelijk doorheen heeft geklikt. Test de gegenereerde code zoals elke andere code. Een prototype dat draait is niet hetzelfde als productieklare code.

Als de volgende stap het omzetten van een Figma-ontwerp in code is die u kunt uitvoeren, of het ontwerpen van code vanaf een prompt, is dat de taak van Anima Playground.

Wat kosten codelagen en Specs?

• Codelagen gebruiken AI-credits. Bij betaalde abonnementen is het genereren en bewerken binnen een codelaag gratis tot en met 4 november 2026. Ander agentwerk in dezelfde prompt gebruikt nog steeds credits, en na 4 november gebruiken alle codelaagtaken credits.
• Specs zijn vrij om te schrijven. Voor het zelf typen en bewerken van een specificatie worden geen credits gebruikt. Het gebruik van de agent met een specificatie werkt wel. Beweeg de kassabon na elke prompt om te zien wat het kost.
• Payload en richtlijnen brengen kosten met zich mee. Figma merkt op dat de agent zowel meer context als meer werk krijgt, zodat dezelfde prompt meer credits kan gebruiken.

Grenzen die u moet controleren voordat u er omheen plant

• Uitrol. Beide functies zijn open bèta’s die in de loop van weken worden uitgerold. Zoek naar het codepictogram in de Figma Design-werkbalk en de optie Spec in de bestandsbrowser.
• Plannen. Specs heeft een betaald abonnement nodig. Startende gebruikers krijgen codelagen, maar niet Specs. Beide hebben bewerkingsrechten nodig om te kunnen maken.
• Afmelden. Alleen Enterprise-beheerders kunnen codelagen uitschakelen, en alleen door alle Figma AI-functies uit te schakelen.
• Repo-grootte. GitHub-import is bedoeld voor lichtgewicht prototyping-codebases, niet voor een volledige productie-app.
• Ontwerp systeemcode. Het verbinden van uw echte componentcode via codebronnen is nog steeds een gesloten bèta, dus codelagen maken mogelijk nog geen gebruik van uw productiecomponenten.

Waar Figma stopt, en waar Anima en AgentGrid.io passen

Als uw hele team in Figma werkt, zijn codelagen en Specs een sterke standaard. Het prototype, het plan en de opmerkingen zitten in hetzelfde bestand en de agent van Figma en de MCP-clients kunnen eraan werken.

Twee veelvoorkomende situaties vallen nog steeds buiten dat dossier.

Het idee begon ergens anders. Een Claude Design-prototype, een door ChatGPT gegenereerde HTML-pagina of een live site waarvan u wilt leren. De MCP-server van Figma heeft nu een html_to_figma tool voor door agenten gegenereerde HTML. Anima’s Buddy, onze AI-ontwerpagent binnen Figma, verandert ook HTML, Claude-artefacten, afbeeldingen en URL’s in bewerkbare Figma-lagen, wat handig is als u met uw ontwerpsysteem op die lagen wilt blijven ontwerpen.

Het resultaat moet Figma verlaten. Uw specificatie of prototype moet worden beoordeeld door mensen buiten uw Figma-team, bewerkt door agenten van verschillende leveranciers, of gepubliceerd als een live link. Dat is het werk dat AgentGrid.io, gebouwd door Anima, doet. Een Markdown-artefact op AgentGrid.io is een live, automatisch opgeslagen document dat mensen en verbonden agenten zoals Claude, ChatGPT, Cursor en Grok Bot kunnen bewerken, waarbij elke wijziging wordt toegeschreven aan de naam in de versiegeschiedenis. Een HTML-artefact is een actieve pagina waarop u kunt reageren en die u kunt publiceren op een openbare URL zodra deze is goedgekeurd. U kunt ook één Figma-frame in AgentGrid.io importeren als app-artefact. Die import is eenrichtingsverkeer, dus latere Figma-bewerkingen worden niet gesynchroniseerd.

De twee strijden niet om dezelfde stap. Figma is eigenaar van het ontwerpcanvas. AgentGrid.io is waar de Markdown en HTML-artefacten verdwijnen wanneer het werk tools en teams kruist.

Probeer AgentGrid.io om een specificatie of prototype bij te houden die elke agent in uw team kan bewerken en publiceren.

Gebruik elk hulpmiddel wanneer

• Gebruik Figma-codelagen wanneer belanghebbenden een werkend prototype naast de ontwerpen moeten klikken en de richtingen naast elkaar moeten vergelijken.
• Gebruik Figma Specs wanneer het plan naast de frames moet staan en door een codeeragent moet worden gelezen via de Figma MCP-server.
• Gebruik Anima Playground wanneer u rechtstreeks in code met AI wilt ontwerpen, of een Figma-ontwerp wilt omzetten in een bewerkbare app die u kunt bekijken en publiceren.
• Gebruik Buddy wanneer het startpunt buiten Figma ligt en u bewerkbare lagen op het canvas wilt. Voor een uitgebreidere vergelijking van het bouwen in Figma versus een browserbuilder, zie Figma Make versus Anima Playground.
• Gebruik AgentGrid.io wanneer de specificatie of het prototype moet worden bewerkt door mensen en agenten via verschillende tools, beoordeeld met commentaar en gepubliceerd als een live link.

Veelgestelde vragen

Wat zijn codelagen in Figma?

Een codelaag is een laag op het Figma-canvas die echte, actieve code bevat. U kunt er een maken van geselecteerde frames, een live website vastgelegd met de Figma Chrome-extensie, een GitHub-repository voor prototyping of een lege prompt, er vervolgens doorheen klikken, er commentaar op geven en deze dupliceren om de routebeschrijving te vergelijken.

Is Figma Specs gewoon Markdown?

Specs gebruikt Markdown voor de tekst, en u kunt elk .md-bestand naar het canvas slepen om er een te maken. Het voegt Figma-functies rond die tekst toe: ingebedde frames en FigJam-borden, opmerkingen en een agent die deze opmerkingen kan lezen en erop kan reageren.

Kosten Figma-codelagen AI-credits?

Ja. Bij betaalde abonnementen is het genereren en bewerken binnen een codelaag gratis tot en met 4 november 2026. Ander agentwerk in dezelfde prompt gebruikt nog steeds credits, en na 4 november gebruiken alle codelaagtaken AI-credits.

Kunnen Claude Code, Codex of Cursor een Figma Spec lezen?

Ja, als ze verbonden zijn met de Figma MCP-server. Codeeragenten kunnen specificaties lezen, maken en bijwerken met de figma-spec-vaardigheid, en u kunt een spec-link in uw prompt plakken om de gekoppelde ontwerpcontext door te geven.

Welke Figma-abonnementen omvatten Specs?

Specs bevindt zich in een open bèta voor betaalde abonnementen: Professional, Organization, Enterprise en Education, plus Government, zoals beschreven in het Config India-artikel van Figma. Het valt niet onder het gratis startersplan. Codelagen worden uitgerold naar alle abonnementen, inclusief Starter.