Figma launches Code Layers open beta at Config India

Figma has launched Code Layers in open beta, allowing design teams to run real, working code directly on the design canvas for the first time. The feature moved into open beta on October 15, 2026, enabling teams to explore and build prototypes backed by code on the canvas. The announcement came during Figma’s first Config event in India, marking a significant shift in how designers and developers collaborate on product development.

What Code Layers Brings to the Design Canvas

A code layer holds real, running code, so you can turn your designs into live, interactive prototypes that sit directly on the canvas. The feature eliminates the traditional barrier between design exploration and code implementation, which previously required switching between Figma and separate development environments.

Teams can create code layers through multiple pathways. Users can capture code from webpages using the Figma Chrome extension, select design frames and prompt the agent to turn them into a code layer, clone a connected GitHub repo to build on an existing frontend codebase, or start from scratch by adding an empty code layer and prompting the agent to build.

The feature supports React-based repositories and npm packages, including motion libraries and 3D rendering frameworks. Once created, teams can interact with the prototype, duplicate it to explore different approaches, and convert code-based screens back into editable Figma frames.

Availability and Pricing Structure

Code layers are available on Education (not K-12), Starter, Professional, Organization, and Enterprise plans and require edit access. The feature uses AI credits, but Figma is offering a promotional period to help teams adopt the new capability.

On paid plans, generating and editing inside a code layer uses no credits through November 4, 2026, after which every code layer task will use credits. After the promotional period, a code layer created from frames costs around 250 AI credits or more.

The open beta is rolling out over a few weeks, so teammates may get access at different times, with a Code icon appearing in the Figma Design toolbar when available.

Additional Features Announced at Config India

Alongside Code Layers, Figma introduced several complementary features designed to improve how teams work with AI agents and design systems. The company debuted a new feature called Figma Specs, which is a markdown editor that lets users define their design language in a simple way.

The Specs feature aims to provide consistent design rules that both human designers and AI agents can follow. Through these features, the company aims to provide a definition for its own and third-party agents to adhere to a brand’s design rules better while creating with AI.

Figma also announced updates to its Model Context Protocol (MCP), which enables AI tools to work with Figma more effectively. Starting with the Config India announcement, users can generate code layers and work with specs directly from the AI tools they already use.

Strategic Shift for Design Platform

Previously, exploring in code meant working in an IDE, which is disconnected from how many Figma users want to work, while Code layers allows teams to build visually in code, with all the collaborative tools the Figma canvas provides. This represents a fundamental evolution in Figma’s role within product development workflows.

The timing of the announcement is notable, as design and development tools increasingly incorporate AI capabilities and blur traditional workflow boundaries. By bringing code execution directly into the design environment, Figma is positioning itself as a unified platform where visual design and functional code development can happen in the same collaborative space.

The announcements landed at the company’s first Config event in India, its largest user market outside the United States. The choice of venue underscores India’s growing importance to Figma’s user base and product strategy.

Key Facts

Code Layers moved into open beta on October 15, 2026, at Config India
Available on Education (not K-12), Starter, Professional, Organization, and Enterprise plans
Free promotional period for paid plans runs through November 4, 2026
After November 4, creating code layers from frames costs approximately 250+ AI credits
Feature supports GitHub repo integration, webpage capture, and AI-generated code from design frames
Rolling out gradually over several weeks to different teams
Announced alongside Figma Specs and Model Context Protocol updates

Sources

Written by

Mike Gingerich

Author

Author: Mike Gingerich, President of web firm Digital Hill, Co-Founder of TabSite .
Digital and Social Media Marketer, Speaker, and Business Consultant. Part geek, part marketer, total digital junkie! Seeking to add value, make the complex simple, and leave a positive impact.

Follow me on twitter: @mike_gingerich.