Figma Code Layers, Specs and Agent: what changes for teams

Figma Code Layers put working, code-backed prototypes on the same canvas as your designs, and a new feature called Specs gives teams a written home for the rules agents should follow. Both arrived on October 15 at Config India, alongside Guidelines, Code Sources and Payload inside Figma Make ^{[1, 3]}. The Figma Agent itself left beta a week earlier, on October 6 ^[3].

Taken together, this is the clearest sign yet of where design tools are heading. Code, written design rules and AI agents now live in the same file as the design. Below we break down what shipped, what is still in beta, and how we think a design and development team should respond.

Key takeaways

• Code Layers are in open beta on all plans, and Specs is in open beta on paid plans ^{[1, 3]}.
• The Figma Agent is generally available, having exited beta on October 6 ^[3].
• Guidelines and Code Sources let teams feed real design system rules and real code to the agent ^{[1, 3]}.
• The tools reward teams that write their design language down. The agent is only as consistent as the context you give it.

What Figma announced at Config India

Figma CEO Dylan Field set out the release in a post titled “Build by design” ^[1]. TechCrunch notes the news came at the company’s first Config event in India ^[2]. Here is what shipped and its status.

• Code Layers: interactive, code-backed prototypes on the canvas. You can convert a design frame, import a GitHub repo, capture a website with the Figma Chrome extension or prompt from scratch. Open beta, rolling out now ^[3].
• Specs: a Markdown-based editor for a team’s shared decisions, available on web, desktop and mobile for paid plans in open beta ^[1]. A spec can stand alone as a file or sit on the canvas next to designs ^[2].
• Guidelines: patterns and anti-patterns added to published libraries so the agent follows the design system. Open beta ^[3].
• Code Sources: import code from GitHub repositories or npm packages so the agent builds components that match your real system. Closed beta ^[3].
• Payload in Figma: Make can now scaffold a Payload backend with a CMS, database, media, APIs, auth and an admin panel, rolling out across all plans ^[3].
• Figma MCP: faster performance and 20 new partner integrations, including OpenCode, Dia, Junie by JetBrains and Meta Muse ^{[1, 3]}.

Two context points help. Figma first announced Code Layers in private beta back in June ^[2]. And Figma acquired the open source headless CMS Payload last year, whose downloads grew sixfold in the past 12 months, according to TechCrunch ^[2].

How Figma Code Layers change prototyping

Until now a Figma prototype was a set of linked frames. It could fake a flow, but it could not hold real state, real data or real edge cases. Code Layers change that by putting running code next to the design layers, and by letting you ask the agent to turn a design into code or change part of the code ^[2].

Field explains the shift in cost terms.

“For a long time, coding was expensive. Every change would cost money and time, and you planned carefully before you committed anything to code.”

For a studio, the practical gain is in the conversations before a build. A pricing toggle, a filter panel or an onboarding step can be clicked through with real behaviour before anyone writes a ticket. That shortens the loop between what the client imagines and what the product does. The risk is the opposite one: a prototype that looks finished can be mistaken for production code. It is not, and the review steps still apply.

Why Specs matter more than the agent

The headline feature is the agent, but the quieter release is Specs. Figma describes them as a container for shared decisions that can reference diagrams, code layers and designs on the canvas ^[1].

“When you give agents the right patterns and principles, they can build on the craft your team has already invested in.”

An agent can only follow rules that exist somewhere it can read them. Most design systems today are components plus a few documentation pages, and the reasoning behind them lives in people’s heads. Specs, together with Guidelines on libraries, gives that reasoning a place inside the file.

Figma’s chief design officer, Loredana Crisan, put the ambition plainly to TechCrunch.

“We see Figma as the place where software teams come to decide what they build and ship.”

She also pointed to the gap that makes this matter: 17 times more lines of code are being produced than in the past, but only 1.3 times more releases ^[2]. Writing code is no longer the slow part. Deciding what to build, and agreeing on how it should look and behave, is.

What is still in beta, and what to wait for

Most of this release is beta. Code Layers, Specs and Guidelines are open betas, and Code Sources is a closed beta ^[3]. Figma is also only previewing System Map, a view that tracks changes and dependencies across a design system, with System Check arriving alongside the library features ^[1].

That has two consequences for client work. First, we would not make a client’s production workflow depend on a closed beta. Second, beta features change, so any internal process built around them should be light enough to adjust. The agent is the exception: it is generally available, with better latency, file search and library guideline settings ^[3].

How your design and dev team should act

You do not need to adopt everything at once. This is the order we are using on our own projects.

• Start with a written spec. Tokens, layout rules, copy rules and a list of edge cases per component. It is the same document a new designer needs on day one, and it is exactly what an agent needs too.
• Add Guidelines to your published library once the spec is stable, so patterns and anti-patterns travel with the components.
• Use Code Layers for flows where behaviour matters more than pixels: filters, forms, pricing and onboarding.
• Keep developers in the loop early. If Code Sources fits your stack later, the code library they already maintain becomes the agent’s reference.
• Review agent output like a junior designer’s work. Check it against the spec, not against your memory.

The common thread is that the written layer now carries real weight. A design system that lives only as components gives an agent shapes without reasons. A design system with a spec gives it both.

FAQ

Are Figma Code Layers available on free plans? Figma says Code Layers are rolling out in open beta on all plans, across web, desktop and mobile ^[1].

What is the difference between Specs and Guidelines? Specs is a Markdown-based editor for a team’s shared decisions on the canvas or as a standalone file ^{[1, 2]}. Guidelines attach patterns and anti-patterns to a published design library so the agent follows them ^[3].

Is the Figma Agent still in beta? No. According to Figma’s release notes, the agent exited beta on October 6, 2026 ^[3].