Figma Opens Code Layers Beta, Adds AI Design Guidelines

Figma has begun rolling out Code Layers in open beta, allowing designers to place interactive prototypes powered by running code alongside regular designs in Figma Design. Announced at Config India on October 15, 2026, the update comes with new ways to guide AI agents using project specifications, published design-library rules and, for selected testers, components from existing codebases.

In its launch announcement, Figma said the changes are intended to bring design, code and the context behind product decisions closer together. But the features have different release stages, and open beta does not guarantee that every user will see Code Layers in their account immediately.

What are Code Layers, and how do they work in Figma?

Unlike a static screen connected by prototype links, a Code Layer contains running code. A team can put an interactive version of a screen on the same canvas as its visual design, try the controls and compare different approaches side by side. Figma says users can duplicate a code layer, ask its agent to develop another direction and examine the working results without leaving the file.

According to Figma's Code Layers guide, users can start with an existing design frame, a blank code layer, files uploaded from a computer, a connected GitHub repository or code captured from a webpage using Figma's Chrome extension. The guide also describes extracting editable design frames from a code-backed screen, including different states in a user flow.

Consider a team reviewing a checkout screen. Instead of examining only images of a form, members could explore a working prototype and compare how two versions behave. That is an illustrative use case, not a claim that Origin Pakistan tested the release or that every imported project will work without changes.

Who can use Code Layers, and what happens to AI credits?

Figma calls this an open beta available across plans, but access is being enabled gradually over the coming weeks. Users need edit access to the relevant Figma Design file. Its main feature guide lists Starter, Professional, Organization and Enterprise among the eligible plans, alongside some Education access. However, Figma's launch FAQ excludes K–12 Education while its separate Code Layers and Git guides list K–12 access. Those official pages conflict, so school users should confirm availability with Figma instead of relying on either list alone.

There is also a time-limited promotion. Figma's official Config India FAQ says generating and editing code inside Code Layers does not use AI credits on paid plans through November 4, 2026. If the same prompt makes the agent perform other tasks, those tasks may still consume credits. After November 4, Code Layers tasks will use Figma AI credits, with the amount varying by complexity.

That means the open beta should not be described as permanently free or without usage limits. Figma has not provided one fixed credit price applicable to every Code Layers request.

How do Specs and Guidelines direct Figma's AI agent?

Figma also introduced Specs, an open-beta space for written requirements and project context. Rather than leaving decisions in separate documents and conversations, teams can place Markdown-based specifications alongside their designs. Figma says users can bring in existing Markdown, turn designs into a technical specification or use project requirements as context for an agent creating a code layer. The launch overview names Professional, Organization and Enterprise plans, while the detailed Help Center section also lists Education and Government plans. Access is still rolling out, and viewing or editing a Spec requires the relevant file permission.

The company's Specs announcement describes it as a shared place for information that changes as a project develops. Working with the AI agent in Specs consumes credits, subject to the task and available plan.

Guidelines, also in open beta, serve a different purpose. Teams on eligible Professional, Organization and Enterprise plans can attach written guidance to published design libraries. When a library is used with the agent, those rules give it context about approved patterns and designs to avoid. For example, a team might explain which button variants, spacing rules and visual styles should be used in a new screen.

These written rules help the agent make more consistent design choices, but they do not guarantee compliance or act as security permissions. A team must still review what the agent produces. Figma warns that the additional context supplied through Guidelines may also increase a prompt's AI-credit use.

Which design-system features are still restricted?

Figma's announcements separate the new library features from the main Code Layers rollout. Adding a code source to a published design library is in closed beta, available only to selected participants. The proposed workflow lets teams link a GitHub repository or npm package so an agent can refer to real components when designing or editing. It differs from cloning a repository for use in one Code Layer, which is part of the broader Code Layers workflow.

Meanwhile, the company's proposed centralized design systems area remains a preview. It is intended to bring libraries, code sources and Guidelines together, with tools for understanding dependencies and finding gaps. Figma has shown the direction of that work but has not announced the preview as a generally available finished feature. Its October 15 release notes list the different availability stages.

What changed for AI tools connected through Figma MCP?

Figma also expanded its Model Context Protocol, or MCP, integration. MCP allows compatible AI applications to use supported tools outside their own chat interfaces. Figma says connected agents can now create code layers, read or edit Specs, generate images and run published Figma Weave workflows. The company announced 20 new MCP partner integrations.

The official feature documentation names html_to_figma, which turns agent-produced HTML into editable design layers, and generate_image, which creates images using Figma's image tools. Access and limits depend on plan, seat and compatible client. Image generation consumes Figma AI credits; published Weave workflows use Weave credits instead.

Separately, Figma announced support for the Payload backend framework in Figma Make and code-layer workflows, allowing projects to add databases, content management, authentication and APIs. Figma describes the integration as available now but still rolling out across accounts. Its backend support does not remove the need for engineering review, security checks or production testing.

What should designers and developers check before using the new features?

First, users should confirm that the Code icon has appeared in their account and that they have the necessary editing rights. The company notes that more complex imported projects may need adjustment, and that some integrations require particular seats or supported clients. An interactive prototype on the canvas should not be treated as an automatically deployed, fully tested application.

Second, teams bringing private code into Figma should review file-sharing access. Figma's Git integration guidance says people who can view a design file containing a Code Layer can see its preview and preview source code; users with edit permission can access the underlying Git-level source, even without separate permission to the original GitHub repository. That makes permissions an important practical consideration, not a newly announced agent-security feature.

Finally, the official administrative option described for disabling Code Layers is to turn off AI features for a team or organization, which also disables other Figma AI capabilities. For teams considering the update, the immediate opportunities are more interactive design review and richer guidance for agents, while availability, costs and human quality checks still matter.