Figma launches Code Layers in open beta

• Code-backed prototypes now run on the shared Figma canvas, with Figma’s Config India announcement opening Code Layers to public beta.
• Live websites can become interactive Code Layers through the Chrome extension, as Figma’s capture demo shows.
• Markdown and design-system context are shipping alongside them: Figma’s launch roundup lists Specs and Guidelines in open beta, with Code Sources in closed beta.

The Chrome extension can capture a live page without access to its repository. Superside used Code Layers to build a scrollable, flippable credit-card wallet. And Extract designs can record a running prototype’s flow as editable Figma frames.

Figma began rolling out Code Layers in open beta on October 15. Each layer is an interactive prototype backed by running code inside a Figma Design file.

Playable alternatives are the best part: teammates can duplicate a prototype, prompt a different direction, and compare multiple running versions without switching branches, according to Figma’s documentation.

A Code Layer can start from:

• A blank layer: add one from the toolbar and prompt the Figma agent.
• Existing designs: select frames and use Build selection.
• GitHub: clone a connected repository.
• Local files: upload a code folder.
• A live webpage: capture it with the Chrome extension.
• A coding agent: import a project through Figma’s MCP server.

The extension offers two outputs, detailed on its feature page:

• Capture code: brings web content onto the canvas as an interactive Code Layer.
• Capture design: converts it into native, editable design layers for changing text, colors, and layout.

The capture workflow is short:

1. Install the extension, sign in, and open the webpage.
2. Choose Capture code, the button demonstrated in the capture walkthrough, then capture the full page or selected elements.
3. Paste into a Figma Design file with Command-V or Control-V.

Captured code may not fully reproduce the original site’s interactions or functionality, Figma cautions in the extension FAQ. Repository access and a coding agent are not required for capture.

Teams described several concrete uses in Figma’s launch post:

• Superside: motion design lead Leonardo Rica built a wallet where users scroll through cards, bring one forward, and flip it over. When cards stacked incorrectly, he described the cause in a prompt and the agent corrected it.
• Dell Technologies: product designer Miguel Wermuth built conversational AI prototypes where a stakeholder types a question and receives the corresponding screen. He duplicates Code Layers to compare versions side by side.
• Cox Automotive: senior product manager Lindsay Brechler imported an existing HTML prototype for stakeholder review, keeping earlier versions available to resume and iterate.
• Rocket Money: lead product designer for design systems Derek Onay turned a design into a working concept to discuss component interactions and accessibility before implementation.

These are customer examples published by Figma.

At Checkout.com, senior product designer Kris Murphy pulled a demo’s screens onto the canvas to review them together, make visual corrections, and send the edits back to the Code Layer.

Extract designs supports three modes, according to the documentation:

• Current state: extract the whole page as it currently appears.
• Select element: extract a specific element.
• Record a flow: interact with the prototype to produce a sequence of editable frames, then push changes back.

For smaller adjustments, Point and edit exposes properties such as padding, margins, colors, and typography inside the code editor. Clicking Apply sends those changes to the agent to update the Code Layer.

GitHub imports stay connected to their repository. Figma’s repository workflow lets teams:

1. Work on a clone stored by Figma.
2. Use branches for experiments.
3. Create a pull request to review and merge changes into the original repository.

External coding agents can also package a project and import it directly into a Figma file through MCP. Once imported, teammates can interact with it, extract designs, and continue iterating on the canvas.

Figma describes supported imports as “lightweight prototyping codebases”. Support for more complex codebases is planned, according to the broader launch announcement.

The same Config India rollout adds shared context for agents and content management for websites. Figma’s launch overview separates the additions by availability:

• Specs, open beta: collaborative Markdown on the canvas can reference designs, diagrams, and Code Layers. Teams can use it to generate a Code Layer or send context to a coding agent through MCP. Available on paid plans, rolling out across web, desktop, and mobile.
• Guidelines, open beta: guidance attached to published design libraries gives agents established patterns to follow. Available on paid plans.
• Code Sources, closed beta: GitHub repositories or npm packages supply implementation context for components and Code Layers. Available on paid plans.
• Payload, rolling out over the coming weeks: brings content and data management to Figma Make, including an admin panel and APIs. Available on all plans; marketers can update content without editing source code.

Access begins with Figma’s rollout announcement, but accounts will receive the feature at different times over the next few weeks. A Code icon appears in the Figma Design toolbar when it becomes available.

The Code Layers documentation specifies these conditions:

• Plans: open beta is available across all plans and requires edit access to the Design file.
• MCP imports: creating Code Layers through MCP requires a Full seat. Imports can take 10 minutes or more, and some projects need changes before they run.
• Temporary free editing: generating and editing code within Code Layers is free on paid plans through November 4, 2026. Other agent tasks within the same prompt can still consume AI credits.
• After November 4: Code Layer tasks use AI credits, with consumption varying by task complexity.

The extension FAQ says capturing website content itself does not consume AI credits. Agent work to repair or adjust a capture may consume credits, subject to the temporary paid-plan offer above.