Figma opent Specs en Code Layers in open bèta

Figma zet Specs en Code Layers vandaag in open bèta, met Specs op betaalde plannen, zodat teams ontwerpregels met AI-agenten delen en interactieve codeprototypes op hetzelfde canvas testen.

Een productteam kan ontwerpbesluiten daardoor eerder toetsen aan een versie die reageert, in plaats van alleen aan een stilstaand scherm. Voor een Nederlandse organisatie die software bouwt of laat bouwen, verhuist een deel van de afstemming tussen ontwerp en engineering naar hetzelfde bestand. De eerste prototypebespreking kan plaatsvinden voordat een volledige implementatie wordt ingepland.

Specs zet ontwerpintentie naast het canvas

Figma Specs is een gedeelde Markdown-container op het canvas voor ontwerpintentie en technische context. Teams kunnen een bestaand .md-bestand erop slepen en een FigJam-bestand, frame of canvasobject in de spec opnemen. Figma zegt dat de agent commentaar in een spec kan lezen en beantwoorden, zodat de geschreven bedoeling en de schermen waarnaar die verwijst in hetzelfde teamproces blijven.

De release bevat ook andere delen van die context. Guidelines voor gepubliceerde ontwerpbibliotheken komen in open bèta. Teams kunnen daarin markdownbestanden met regels, goede voorbeelden en patronen die ze willen vermijden toevoegen. Een centrale bundeling van ontwerpbibliotheken, codebibliotheken en richtlijnen staat nog als preview vermeld. De onderdelen hebben dus verschillende toegangsniveaus: Specs is open bèta voor betaalde plannen, terwijl de centrale bundeling nog niet algemeen openstaat.

Code Layers maakt een scherm interactief

Een Code Layer is een interactief prototype met uitvoerbare code op het Figma-canvas. Een team kan beginnen met een leeg codevlak, een bestaand ontwerpframe omzetten, een GitHub-repository verbinden of een lokale map uploaden. Ook kan een webpagina via een Figma-extensie als code layer worden vastgelegd. Daardoor kan een prototype aansluiten op de bestaande front-end in plaats van alleen op een prompt.

Op het canvas kunnen collega’s de interactie afspelen, varianten naast elkaar zetten en aanpassingen aan de agent vragen. Een team kan een geselecteerde toestand of volledige gebruikersstroom weer terughalen als bewerkbare ontwerplagen. Figma beschrijft ook hoe wijzigingen vanuit de code-editor terug naar de code layer en vervolgens naar de repository gaan. Dat maakt de laag bruikbaar voor gezamenlijke verkenning en beoordeling, terwijl het ontwerp en de broncode in hetzelfde bestand zichtbaar blijven.

De uitrol verloopt per account. Figma noemt toegang voor Education (K-12), Starter, Professional, Organization en Enterprise. Gebruikers hebben bewerkrechten op het bestand nodig.

Op betaalde plannen zijn het maken en aanpassen van code layers tot en met 4 november gratis. Daarna verbruiken code layer-taken AI-credits. De hoeveelheid hangt af van de opdracht; ander agentwerk in dezelfde prompt kan ook credits kosten. De helpdocumentatie beschrijft de toegang, uitrol en kredietregels.

De juni-proef krijgt een openbare uitrol

Code Layers zelf is geen geheel nieuwe aankondiging. In juni begon Figma met de functie in gesloten bèta, naast animatie, 3D en AI-shaders op het canvas. De eerste code layers, animatie en AI-shaders op Figma’s canvas vormden toen een besloten proef; nu schuift de codefunctie naar open bèta. Ook Figma’s eerdere canvas-aankondiging met code, animatie en AI-shaders laat zien dat dit een volgende fase is van hetzelfde productspoor.

De nieuwe stap raakt ook agenten buiten Figma. Anthropic lanceerde Claude Design in april als onderzoeksversie voor prototypes en ander visueel werk. De dienst leest codebases en ontwerpbestanden om een teamdesignsysteem op projecten toe te passen. Pro-, Max-, Team- en Enterprise-abonnees krijgen toegang. Figma zet de verkenning in de gedeelde canvasomgeving en koppelt die aan meer agenthulpmiddelen. De Model Context Protocol-server (MCP) van Figma kan inmiddels code layers aanmaken en Specs aanpassen, en Figma meldt ondersteuning voor 20 nieuwe partners. Dat past naast de bredere beweging naar overdraagbare agentuitbreidingen: Agent Plugins 1.0 maakt uitbreidingen bruikbaar in ChatGPT, Codex, Cursor, Copilot, Kiro en VS Code. Figma koppelt die interoperabiliteit aan zijn eigen canvas, waar ontwerpcontext en codeprototypes gedeeld blijven.

De cijfers meten vooral de verkenning

Figma’s chief design officer Loredana Crisan vertelde TechCrunch dat er 17 keer zoveel regels code worden geproduceerd als voorheen, terwijl het aantal releases 1,3 keer zo groot is. Zij zei ook dat een groot deel van die code bedoeld is om te ontdekken wat een product kan worden, niet om direct uit te brengen. De verhouding tussen codeproductie en releases verklaart waarom Figma meer ontwerp- en prototypewerk op hetzelfde canvas wil laten plaatsvinden.

De cijfers komen uit een uitspraak van een Figma-bestuurder. De berichtgeving noemt geen referentieperiode, steekproef of meetmethode. Ze zijn daarom geen onafhankelijke meting van productiviteitswinst. Ook de productdocumentatie noemt Code Layers interactieve prototypes; Figma publiceert bij deze uitrol geen benchmark voor codekwaliteit of de tijd tot productie.

Figma zet zo voort op de juni-proef: ontwerpers, ontwikkelaars en agenten delen meer van hetzelfde canvas en de code die daarop draait. Voor een Nederlands productteam zit de waarde voorlopig in interacties eerder kunnen vergelijken en bespreken, terwijl een meting van ontwikkeltijd ontbreekt. De licentiekant verandert ook mee, want code layer-werk verbruikt op betaalde plannen vanaf 4 november AI-credits. De productdocumentatie noemt de output een prototype; technische controle en vrijgave blijven onderdeel van de normale ontwikkelketen.