Technology
Figma Adds Specs, Code Layers, and Guidelines So Agents Follow a Brand’s Rules
Figma is trying to stop its agent from inventing a design system every time someone prompts it.
At its first Config event in India, the company launched a set of features meant to define how agents work on the platform. The centerpiece is Figma Specs, a native Markdown editor where a team writes its design language, requirements, and implementation notes in one place. Specs can live as a standalone file or sit on the canvas next to the work. They can reference other Figma elements, embed FigJam diagrams, pull in code layers, and point at designs. The document is meant to be read by people and by agents. Dylan Field’s framing, in the company blog, is that design, code, and context should all land on the same canvas so an agent has something firmer than a chat history to follow.
The agent itself went generally available in the past week, with lower latency, the ability to search Figma files from chat, and configurable guidelines. Config India is the layer on top of that: the rules the agent is supposed to obey.
What Specs and Guidelines Actually Do
Specs are the written intent. Guidelines are the library-level rules. Teams can add Markdown files — patterns, anti-patterns, best practices — to a published design library. The agent reads them whenever a prompt runs with that library enabled. Code sources let a team import a GitHub repository or an npm package so the agent builds and edits components against the real system, not a guessed one. A centralized design-system view that bundles design libraries, code libraries, and guidelines is in preview only.
This is Figma’s answer to the non-determinism problem it named out loud. An agent that can draw will draw something. Without a spec and a library, it draws an average of the internet. With them, it is supposed to draw the company’s buttons, spacing, and component names. Whether it does is the test that starts now that Specs are in open beta on paid plans and guidelines are in open beta.
Code Layers and the Path From Frame to Prototype
Code layers, announced in private beta in June, moved to open beta. A user can turn a design frame into an interactive, code-backed prototype, import a GitHub repo, capture a live site with the Figma Chrome extension, or prompt from scratch. The agent can convert a design into code or edit part of the code to iterate. Creating and editing inside a code layer is free on paid plans through November 4. That is a trial window, not a permanent price.
The practical change is that a prototype no longer has to leave Figma to become something a developer can run. It also means the agent is writing code on the canvas, which is why the guidelines and the code sources exist. An agent that emits components needs to know which components the repo already has.
MCP and the 20 New Partners
All of this is exposed through the Figma agent and through MCP, the Model Context Protocol. The updated MCP lets outside agents generate code layers, edit specs, and create images on the canvas. Figma is adding 20 partner integrations. Named ones include OpenCode, Dia, Meta Muse, and India’s Sarvam. OpenCode’s pitch is the cleanest: give a coding agent the Figma design-system context so the code it writes matches, then send the prototype back into Figma for review. Enterprise and Organization admins can already manage MCP connections through an identity provider, so individual consent prompts are not the only control.
Payload, the open-source headless CMS Figma acquired, is being wired into Figma Make so generated sites can pull real content and be managed from Payload’s admin. That is the content half of the same idea: the agent should not invent the event listings if the CMS already has them.
Who This Is For
The launches are aimed at teams that already keep a design system in Figma and are now letting an agent touch it. Uber, Granola, and Atlassian are the customer examples Figma cited for agent use on craft and speed. A solo designer prompting for a landing page gets less from Specs than a system team that has spent years naming its tokens. The open-beta flags and the November 4 free window on code layers are how Figma is measuring whether the system teams will actually write the Markdown.
The competitive context is every other design and coding tool adding an agent. Figma’s differentiation, if the features work, is that the agent sits on the file the company already uses as the source of truth, with the library and the spec attached. An agent in a separate chat does not have that file unless someone pastes it.
What to Watch
Whether Specs get used as living documents or as one-time setup.
Adoption of code layers after the November 4 free period ends.
Which of the 20 MCP partners produce real round-trips, not just a logo on a slide.
How often the agent still ignores a guideline, which is the failure mode the whole release is built to reduce.
Payload’s Make integration in production sites, not demos.
Figma’s new features are an attempt to define how agents behave on its platform: a Markdown spec, library guidelines, imported code, and an MCP that lets outside agents read and write the canvas. The agent is generally available. The rules around it are in beta. The bet is that a design system written down is more reliable than a prompt.
Comments (0)
Please log in to comment
No comments yet. Be the first!