From Canvas to Running Code: Figma Code Layers Enters Public Beta, Specs Give Agents Your Design Context

On October 15, Figma held its first-ever Config conference in India, Config India 2026, in Bengaluru. More than 30,000 people registered online and in person, making it the largest international conference Figma has ever hosted — India is already Figma's biggest user market outside the United States and its second-largest by daily active users. CEO Dylan Field showed up in person with a telling line: in a world where code is becoming commoditized, design is increasingly the differentiator.

Timed with the event, Figma published "Build by Design: New Workflows for New Ways of Building" on its official blog (published 2026-10-15), announcing a bundle of agent-facing updates: Code Layers moving from private to public beta, the brand-new Specs Markdown spec editor, design system extensions, 20 new MCP partner integrations, and the integration of open-source CMS Payload into Figma Make. This isn't a scattered feature drop — it's a complete new workflow of "design → spec → agent → code." The stretch vibe coders care about most — the translation loss between a design file and running code — is something Figma has decided to productize itself.

Code Layers Public Beta: Running Code on the Canvas

Code Layers was announced in private beta back in June, and on October 15 it graduated to public beta, available on all plans. The concept in one sentence: bring running code onto the Figma canvas so teams can explore ideas in code, on the canvas, instead of writing in an IDE in isolation.

The official announcement lists five ways to get code onto the canvas: convert an existing design into an interactive code layer, upload from a local folder, bring in a coded prototype from a third-party coding tool via the Figma MCP server, import from GitHub (the code layer stays connected to the repository), or capture what's live on your website with Figma's Chrome extension. These five entry points cover nearly every starting point of a prototype: from a design, from existing code, from an agent-generated prototype, from a live product.

On the canvas, the advantage of code layers is that versions can sit side by side. When you iterate with a coding agent in an IDE, it's easy to latch onto your first idea and never look back; code layers let multiple versions of a prototype coexist on the canvas, so the team can duplicate one and try a different approach without switching windows. Like the visual part of a screen but don't want to touch code? Extract designs turns a screen or flow from a code layer into editable Figma layers. Ready to sync changes back? Push the update to a branch and the team can review it as a pull request before merging into the shared project.

The blog includes several customer stories with numbers worth noting. Merkle, a global customer experience agency, uses code layers across its entire design-and-build process, from blank-canvas ideation to iterating on features already built in code: 30% faster iteration and feature development, 50% less documentation such as interaction specs on tickets. Lindsay Brechler, a senior product manager at Cox Automotive, brought an HTML prototype into a code layer to align stakeholders on a new feature — because every version stayed on the canvas, she could pick up from any one of them without starting from scratch. Derek Onay, lead product designer for design systems at Rocket Money, used the design-to-code-layer path to settle interactions and accessibility early while building foundational screen components, before issues could reach users. Kris Murphy, a senior product designer at Checkout.com, built a client demo in code layers about 50% faster, calling it "a proper bridge between design and development." Matt Davey, chief experience officer at 1Password, put it in very Figma terms: the canvas's real superpower is seeing all UI elements together — "like when we used to print out all the pages of a website and stick them on a whiteboard."

On pricing, the blog is explicit: Code Layers will use AI credits, but on paid plans, creating and editing within code layers is free through November 4, 2026. It's a window strategy — get everyone on board first, start metering after November. The engine of the whole workflow is the agent itself: the Figma agent embedded on the canvas is now generally available, and Figma says improved agent guidance and MCP server performance reduce errors and token usage.

Figure 1: In the traditional pipeline, designs reach code through manual translation and the thinking behind decisions is lost in a prototype link. The new pipeline keeps design, running code, and specs on the canvas, handing coding agents full context over MCP.

Specs: A Markdown-Native Spec Editor

The most interesting piece of this launch is Specs. Figma's diagnosis: as teams increasingly collaborate with agents, Markdown is everywhere — but Markdown files have no relationship to each other, or to the projects they're attached to, and their references to images, URLs, or other Markdown files are often opaque to collaborators. So Figma built "a new native home for context" — Specs.

Specs is a Markdown-native editor for recording a company's design language and standards. Its power is concentrated in referencing: you can reference canvas elements and embed FigJam diagrams, code layers, and designs. Beyond writing specs, it does several jobs: seeding generation of new directions, creating data reports, writing high-fidelity PRDs, or handing off context to agents. You can bring in outside context with an agent, work together to turn rough ideas into a detailed spec — or use a spec to build a code layer and refine as you learn.

But the killer use case is Specs plus MCP: once the team confirms a direction, share the spec link with a coding agent, and Figma's MCP server hands it the entire context — the Markdown, frame references, images, code layers, Code Connect snippets. No more re-explaining requirements verbally; the link itself is a context-rich work order. The blog also mentions using the GitHub connector to draft technical specs, such as a technical spec for a bundled delivery feature. Specs starts rolling out today in open beta on web, desktop, and mobile, available on all paid plans.

What matters here is that specs turn "standards" from static documents into agent-executable input. Design guidelines used to live in Notion where agents couldn't see them; now they live next to the canvas, readable by agents over MCP, and their constraints have a channel to be enforced automatically for the first time.

Design System Extensions and 20 MCP Partner Integrations

Figma states the logic plainly in the blog: design systems have always been the foundation of product consistency, and as teams start creating more and more with agents, that foundation becomes even more important — give agents the right patterns and principles, and they can build on the craft your team has already invested in. So design systems in Figma can now include more: code sources and guidelines, so the agent has all the information it needs wherever it works.

Three pieces. First, Guidelines enters open beta: add guidelines to published design libraries so agents can more easily follow established patterns. Second, code sources starts in closed beta: import code sources from a GitHub repository or an npm package to help agents build and edit better components and code layers. Third, a dedicated place to manage design systems is in preview: a system map helps track changes and dependencies, while system check scans for gaps like missing descriptions and interactive states. Guidelines (open beta) and code sources (closed beta) are available on all paid plans.

The MCP-side updates are equally dense. The Figma MCP now supports generating code layers and working with specs directly from the AI tools you already use, plus creating visual assets and running published Weave workflows. Improved agent guidance and server performance reduce errors and token usage, says Figma. Arriving with this launch are 20 new MCP partner integrations:

• OpenCode: give your coding agent Figma design system context to generate more accurate code, then send prototypes back into Figma for review;
• Dia: explore ideas in an AI-native browser and bring web UI into Figma as editable design layers;
• JetBrains Junie: bring coded prototypes into Figma as code layers to iterate and polish with your team;
• Meta Muse: let small business owners bring the brand they've designed in Figma into Muse to generate more visuals and run Weave workflows;
• Sarvam: an MCP partnership with the Indian AI startup, matching Figma's expansion in India.

There's also an acquisition bearing fruit: Payload, the open-source content framework that joined Figma last year, is now integrated with Figma Make. Payload downloads grew 6x in the past 12 months, making it the fastest growing open source CMS on NPM. With the integration, marketing teams can manage website content without touching source code or waiting on engineers — and the content stays bound to the design system to accurately represent the brand. Content, workflows, APIs, and an admin panel live in one place, hosted by Figma, and you can take the app outside of Figma too. Payload is available on all plans, rolling out to accounts over the coming weeks.

Figure 2: How Specs works — the team writes Markdown specs referencing canvas elements and confirms the direction, then a spec link hands the coding agent the full context via the Figma MCP server: document text, frame references, diagrams, code layers, and Code Connect snippets.

Opinion: Figma Is Answering "Vibe Coding Made Thinking Invisible"

The most interesting passage in the blog isn't the feature list — it's Figma's diagnosis of vibe coding. The post distinguishes two kinds of building: building to think and building to ship. AI has made the first radically cheap, but that path is often single-player, with tunnel vision. Figma's words: when we're all off vibe coding prototypes, it can feel like designing in isolation; collaboration today sometimes looks like sharing a link to a prototype or a video — you can see the end result, but you can't see how you got there. "We're building to think, but the thinking has become invisible." A customer's summary cuts deeper: "It's fast, fast, fast... then slow."

This is the first time a major vendor has stated the cost of vibe coding this clearly: the prototype phase is fast, the shipping phase is slow, and what's lost in between is the thinking behind the decisions. Figma's answer isn't to make agents write faster — it's to keep the thinking on the canvas: designs, running code, and spec documents reference each other, decisions land as shared decisions, and a spec link hands the agent the entire context. The last mile of "design → code" used to be manual human translation; Figma has now productized it into a pipeline — Specs is the work order, MCP is the conveyor belt, the design system is the guardrail.

For vibe coders, the direct value comes in two layers. The first is the personal workflow: no more choosing between Figma and the IDE — code layers let you run prototypes on the canvas, compare versions side by side, roll back, with the thinking archived automatically. The second is the collaboration paradigm: the prompt you give an agent used to be "make a landing page"; now it can be a spec link containing your confirmed direction, referenced design frames, embedded interaction diagrams, and code snippets. The quality ceiling of a prompt shifts from "how well you describe" to "how clearly your spec is written."

Of course, Figma's own calculus is clear too: the canvas is its home turf. When every human-and-agent workflow passes through the canvas, Figma graduates from "design tool" to "the shared workbench for humans and agents." A 30,000-registrant Config India is less a product launch than an announcement to its second-largest market: Figma intends to define the design entry point of the agent era itself.

Three Unanswered Questions

First: after November 4, how much do AI credits actually cost? The official line only says creating and editing code layers is free on paid plans through November 4, after which AI credits apply. The metering granularity, free quotas, and real monthly cost for a mid-size team are all unknown. The window strategy is clever, but teams need to do the math before committing long-term — especially when the caller of code layers shifts from humans to agents, and consumption could far exceed expectations.

Second: can agents actually digest "full context"? The more a spec carries over MCP, the higher the transfer and inference token cost — who pays, and how much, goes unmentioned. More importantly, more context doesn't mean the agent remembers or uses it correctly. A vague spec produces vaguely-contextualized, vague code — Specs makes "spec quality" the ceiling of the entire pipeline, while most teams' spec-writing skills are still at the "written for humans" stage.

Third: code sources is still in closed beta, with no timeline for "more complex codebases." The blog says Figma plans to support more complex codebases over time, but how GitHub imports handle repository scale, private dependencies, and monorepos is unclear. Between lightweight prototyping codebases and real production code lies a wall — how long Figma takes, and how, to cross it will decide how far this workflow can go.

Either way, the direction is clear: design tools are evolving from "drawing software" into "software for assigning work to agents." Code Layers in public beta, Specs, and 20 MCP integrations — this combination shows Figma doesn't want to be a bystander in the agent ecosystem. Before vibe coders complain that "the agent doesn't understand my design," they might first ask themselves: is your spec in Specs yet?

Primary sources: Figma's official blog "Build by Design: New Workflows for New Ways of Building" (published 2026-10-15), "Design Together with Code Layers on the Canvas" (published 2026-10-15), and "Figma Deepens Investment in India With Largest International Config Yet."