Figma Agent, Code Layers and Specs for Designers

Figma had a busy October. On October 6, 2026, the Figma agent became generally available. Nine days later, at Config India, Figma launched Code Layers and Specs in open beta, added design system guidelines and code sources for the agent, brought the Payload CMS into Figma Make, and expanded its MCP server with 20 new partner integrations.

That's a lot of product news. This article sorts it out from a UI/UX designer's point of view: what each feature does, how they fit together, and what actually changes in your daily work.

In one line: Figma wants the canvas to be the place where designs, working code, written context and AI agents all meet.

The big picture: building to think, building to ship

In his launch post, Figma CEO Dylan Field describes two kinds of building. Building to think is fast and messy: you make something, often with AI-generated code, to test whether an idea holds up. Building to ship is deliberate and detailed.

AI made the first kind easy, but Figma's argument is that it also made it lonely. Vibe-coded prototypes often live on one person's machine or in a shared link, and the team can see the result but not how it got there. The October launches try to bring that work back onto a shared canvas, where the whole team, and their agents, can see and shape it.

The Figma agent is now generally available

The Figma agent is an AI assistant built into the canvas. It launched in beta in May 2026 and became generally available on October 6. According to Figma, it can automate repetitive work from prototypes to design system components, read and reply to comments, and use skills, reusable instructions that you can write yourself to package a workflow.

Where it helps most: design system upkeep

Figma's own guide focuses on the unglamorous work every design system needs:

Documentation. Draft do's and don'ts for a component, show examples of variants and states, and suggest cleaner component APIs for handoff.
Auditing. Inventory the components and tokens used on a screen, map them to their libraries, and flag a button built from scratch when a system component already exists, or a hard-coded color instead of a token.
Matching the system. Swap in the right component or token across a design in bulk, which is useful when you import an existing screen and it comes in disconnected from your library.
Cleanup. Find naming drift, such as "hover", "hovered" and "mouse-over" for the same state, and apply one convention across the whole library, with a record of changes for developers.
Token checks. Inspect whether components really use tokens, and annotate which ones they use.

Figma gives a real example: a product designer at Uber built skills that generate a component API description and a color spec showing which token each part uses across variants and states.

Who gets it. The agent is available for Full seat users on Professional, Organization, Enterprise and some Education plans, with limited availability on Starter. Collab, Dev and View seats can use it in their drafts.

Code Layers: working code on the canvas

Code Layers bring code-backed prototypes onto the Figma canvas, so you can explore an experience next to the code that powers it. You can create one by:

Converting an existing design frame into working code.
Uploading a local folder or importing from a GitHub repository.
Bringing in a coded prototype through Figma's MCP server.
Capturing what's live on your website with Figma's Chrome extension.
Prompting from scratch.

It also works in the other direction. From a code layer you can choose Extract designs to turn its current state back into editable design layers: a single screen, one state or a full flow.

Code Layers entered open beta on October 15, 2026 and is available on all plans. Figma's release notes say creating and editing inside a code layer is free on paid plans through November 4. Figma also says it plans to support more complex codebases over time, so today it's best suited to prototypes rather than full production apps.

Why it matters for designers. Many designers have started vibe coding prototypes in separate tools. Code Layers lets that work sit beside your designs, where teammates can comment and iterate together instead of passing around links.

Specs: a home for written context

As teams work more with AI agents, a lot of important thinking ends up in Markdown files: PRDs, rules, technical notes. Figma's point is that those files are usually single-player, scattered on local machines and disconnected from the designs they describe.

Specs is Figma's answer: a collaborative, Markdown-based document that lives on the canvas in Figma and FigJam. You create one by pressing D or using the Specs icon in the toolbar, or by dragging an existing Markdown file onto the canvas.

What makes Specs different from a doc

You can embed frames, FigJam boards or any canvas node inside a spec, so text and visuals sit side by side.
The Figma agent can read and reply to comments, so you can ask it to respond to every open comment with a suggested fix while teammates weigh in.
Connectors bring in outside context: pull details from a codebase with the GitHub connector, or ask the agent to run an analysis with Hex and leave the result as a comment.
You can move between formats: turn a PRD into designs, prototypes and code, or turn designs and code back into a spec.
For handoff, copy the spec link into your coding agent's prompt. Through the MCP server it receives the Markdown plus the linked frames, diagrams, code layers and Code Connect snippets.

Specs is rolling out in open beta on web, desktop and mobile for paid plans.

Why it matters for designers. Specs gives your design decisions a durable, shared place. Instead of rationale living in a chat thread or a slide, it sits next to the work and travels with it to the coding agent.

More control over design systems

Figma is also expanding what a design system can contain, so agents follow it more reliably:

Guidelines (open beta, paid plans): add written rules and patterns to published libraries. When a library is attached, the agent picks them up automatically, so you don't repeat the same instructions in every prompt.
Code sources (closed beta): import code from a GitHub repository or an npm package so the agent builds components and code layers that reflect your real system.
A preview of system management: one place to manage all libraries in a system, with a system map for changes and dependencies and a system check that looks for gaps such as missing descriptions or interactive states.

Payload in Figma Make

The team behind Payload, an open-source CMS and application framework, joined Figma last year. Now Figma Make can scaffold a Payload backend, giving an app a CMS, database, media, APIs, authentication and an admin panel, hosted by Figma. Content stays tied to your design system, marketers can edit without touching code, and you can take the app outside Figma later. It's available on all plans, rolling out over the coming weeks.

For designers who build marketing sites or simple apps in Figma Make, this closes a big gap between a pretty prototype and a site someone can actually update.

Figma MCP: more tools, more partners

The Figma MCP server lets AI tools you already use read design context from Figma and now do more on the canvas. With the October update, agents can generate code layers, work with specs, create visual assets and run published Weave workflows. Figma says improved guidance and performance reduce errors and token usage.

Figma also announced 20 new MCP partner integrations, including OpenCode, the Dia browser, Junie by JetBrains and Meta Muse.

What changes for designers, in practice

1. Your design system becomes the agent's instruction manual. Guidelines, code sources and token checks mean the quality of your system now directly affects the quality of AI output. Clear naming and documented usage rules aren't nice-to-haves anymore.

2. Prototypes move from "show" to "try". With Code Layers, a prototype can run real code on the canvas, and you can pull it back into editable design when you need to refine.

3. Writing becomes a design skill. Specs puts written intent next to visuals. Designers who can write clear decisions, edge cases and principles will hand off better, to people and agents.

4. Maintenance gets cheaper. Audits, renames and documentation that used to be postponed can now be delegated, then reviewed.

5. Review still matters. The agent can flag drift and suggest fixes, but you decide what the system should be.

How to start this month

Pick one messy library and ask the agent to audit naming and token usage. Review the changes before applying them.
Add guidelines to your most used library, starting with the core components.
Try a code layer for one interaction that's hard to explain with static frames.
Write your next feature brief as a Spec, embed the key frames, and share it for comments.
If your developers use an AI coding tool, test handing off a Spec link through the MCP server.
Note the beta labels and the November 4 date for free code layer editing on paid plans.

Limits to keep in mind

Code Layers, Specs and guidelines are in open beta, and code sources is in closed beta, so expect rough edges.
Code Layers targets prototypes today; Figma says support for more complex codebases will come over time.
Agent access depends on seat type and plan.
Payload is still rolling out to accounts over several weeks.

Conclusion

Figma's October releases aren't just new features; they describe a new shape for design work. The canvas now holds designs, running code, written specs and AI agents in one shared place. For designers, the opportunity is to own the parts agents can't: a clear system, sharp written intent and good judgment about what to build. The tools will keep changing, but those skills transfer.

Sources

Information checked on October 16, 2026. Beta features and availability may change.

Figma Agent, Code Layers and Specs: What Changes for Designers