Figma Code Layers: 7 Essential Features to Know (2026)

Figma Code Layers is a Config 2026 feature that turns any design layer into live, editable code without leaving the canvas, treating code as a design material alongside shapes, text, and components. Announced at Figma’s Config 2026 conference in San Francisco, it lets designers and developers move between a visual frame and its underlying React code in a single click. This guide covers how it works, how it compares to Dev Mode, and when you can try it.

What Is Figma Code Layers?

Figma Code Layers is a new layer type that behaves like any other object on the canvas, except it renders real, running code instead of static shapes. Figma introduced the idea at Config 2026, framing code as “material for design” alongside vectors, text, and components. Instead of exporting a frame and handing it to a developer, you convert the frame itself into a code layer that keeps rendering on the canvas.

Once a layer becomes a code layer, it stops being a flat drawing and starts being a small, self-contained piece of software. You can still move it, resize it, and drop it into a frame next to ordinary design layers. The difference is that double-clicking it opens real source code instead of unlocking individual shapes.

This matters because the traditional design-to-development handoff has always involved a translation step. A designer builds a static mockup, a developer rebuilds it in code, and the two versions quietly drift apart as one gets updated without the other. Figma Code Layers is built to close that gap by making the code the single source of truth that both roles can see and edit.

It also changes what a design system team maintains. Instead of keeping a component library in Figma and a separate, hand-coded component library in a repository, a team using Figma Code Layers can treat the code layer itself as the canonical component. A button’s hover state, its disabled behavior, and its spacing rules all live in one place, so a fix applied in the composer is the same fix that ships, rather than a note that someone has to remember to port over later.

That single-source approach is the main reason Figma is positioning Code Layers as a Config 2026 headline feature rather than a minor update. Previous attempts at design-to-code tooling, inside Figma and from third parties, have mostly generated code as an export: useful as a starting point, but not something you could keep editing inside the design tool itself. Figma Code Layers is explicitly built to avoid that one-way trip.

How Do You Turn a Design Layer Into Code?

You convert a design layer into a code layer in one of two ways: a single click on a selected frame, or a written prompt describing what you want the layer to do. The one-click path works best when you already have a finished visual design and just want it to become interactive, such as turning a static button into one with real hover and click states.

The prompt-based path is closer to generating a component from scratch. You describe the behavior in plain language, such as “a pricing card that toggles between monthly and annual billing,” and Figma generates a working code layer that matches your existing design tokens and styles. The result still lives on the canvas as a layer you can select, duplicate, and reposition.

Conversion also runs in reverse. A code layer can be turned back into flat design layers, which is useful when you want to hand a static version to someone who only needs to review the visuals rather than the underlying logic. Figma’s recap describes this back-and-forth as moving between “code and design layers,” with changes in one updating the other on request rather than silently forking.

How Does the Composer Let You Edit Code Directly?

Figma’s composer is the panel where you read and edit a code layer’s actual source, not a visual approximation of it. It sits next to the canvas the way the properties panel does today, so you can watch a change in the code update the layer live on the canvas beside it.

The composer is meant for both audiences. A developer can write or paste real logic, such as form validation or conditional rendering, directly into the layer. A designer who isn’t comfortable writing code can instead describe the change in the same panel and let Figma’s AI update the code, similar to how Figma’s agent skills already let non-developers trigger automated actions inside a file.

Because the composer edits the same code that renders the layer, there’s no separate “export and rebuild” step. Saving a change in the composer is the same action as updating the design, which is the core promise behind treating code as a first-class design material rather than an output format.

Can You Import an Existing Codebase or GitHub Repository?

Yes. Figma Code Layers supports cloning a GitHub repository or uploading a local codebase directly into a file, then converting parts of it into design layers you can edit visually. This is aimed at teams that already have a production React codebase and want designers to be able to open and adjust real components without learning the build tooling around them.

Once a repository is connected, individual components can be represented as code layers that mirror the actual files in the project, rather than recreated approximations. That’s a meaningful shift from tools like Figma Weave, which focus on generating new AI-assisted design and prototyping workflows rather than syncing with an existing repository.

For teams with an established design system, this creates a tighter loop: a component updated in code can be reflected back into the design file, and a visual tweak made in Figma can be pushed back toward the codebase, instead of the two living as permanently separate artifacts.

How Do Code Layers Work Inside Figma Sites?

Inside Figma Sites, code layers run as actual custom React code on the published page rather than as a static export of a design. That means a code layer built for a Sites project behaves like a real interactive component in the browser, not a rendered image of one.

This is a natural extension of how Figma Sites already works: it publishes design files as live websites, and Code Layers gives that publishing path access to genuine interactivity, such as custom animations or data-driven layouts, without routing through a separate development project. It pairs well with motion work built using Figma Motion’s timeline animation tools, since a code layer can hold logic that a timeline alone can’t express.

For small marketing sites or product landing pages, this narrows the gap between a Figma prototype and a shipped site even further, since the interactive parts no longer need to be rebuilt by a developer after the design is approved.

Figma Code Layers vs. Dev Mode: What’s the Difference?

Figma Code Layers and Dev Mode solve related but different problems. Dev Mode, which Figma introduced at Config 2023, is an inspection and handoff workspace: developers select a frame and get generated code, measurements, and design-system references for building the equivalent component outside Figma, as TechRadar reported when it launched. Code Layers, by contrast, keeps the code living inside the file as an editable layer rather than a one-way export.

In practice, many teams will likely use both. Dev Mode remains useful for annotating a large, finished design system, while Code Layers fits earlier in the process, when a component’s behavior is still being worked out and rebuilding it outside Figma every time would slow the team down. If you’re comparing Figma’s broader toolset against other platforms, our Canva vs Figma breakdown covers where each product fits for non-developer teams.

What Are the Current Limitations of Figma Code Layers?

Figma Code Layers is an early-access feature, and the coverage from Config 2026 points to a handful of real constraints rather than a finished, general-purpose tool. Knowing these upfront saves time deciding whether to request access now or wait for a wider release.

• Framework support is narrow at launch. Early reporting on Figma Code Layers centers on React, so teams working in Vue, Svelte, or a native mobile stack won’t get the same workflow yet.
• Complex state and backend logic aren’t the target use case. Code Layers is built for the kind of UI logic a component actually needs, such as toggles, hover states, and conditional layouts, not for wiring up a database or an authentication flow.
• Access is gated by a waitlist. Even teams eager to try Figma Code Layers today have to sign up and wait rather than turning it on inside an existing file.
• File performance with heavy code layers is still unproven. Figma hasn’t published guidance on how a file with dozens of active code layers behaves compared with one built from ordinary design layers.

None of these rule out adopting Figma Code Layers early. They do mean a pilot on one or two components, rather than a full design system migration, is the more realistic first step for most teams.

How Does Figma Code Layers Compare to Other AI Design-to-Code Tools?

A handful of third-party tools, including Locofy and Anima, already convert Figma frames into exported React or HTML code, and AI coding assistants like v0 can generate a component from a screenshot or a prompt. What sets Figma Code Layers apart is that the code never leaves the file: it’s a native layer type inside Figma itself, not an integration that reads a design and writes code to a separate project.

That distinction matters for maintenance. An exported component from a third-party plugin is a snapshot: useful the day it’s generated, but disconnected from the design the moment either side changes. A Figma Code Layer stays connected, because the design and the code are, structurally, the same object viewed two ways. For teams that have tried export-based tools and found themselves re-exporting the same component repeatedly as designs evolved, that’s the specific pain point Figma Code Layers is built to remove.

The tradeoff is scope. Export-based tools work across many design tools and frameworks precisely because they don’t need deep platform integration. Figma Code Layers, at least at launch, only works inside Figma and only targets React, which narrows who can use it even as it deepens what’s possible for the teams who can.

When Can You Access Figma Code Layers, and What Does It Cost?

Figma Code Layers entered early access shortly after its Config 2026 announcement, through a waitlist rather than a general rollout. Figma held Config 2026 in San Francisco from June 23 to 25, 2026, at the Moscone Center, and coverage of the keynote described early access to Code Layers opening the following month for teams who sign up.

Figma hasn’t published which subscription plans will include Code Layers once it moves out of early access, or whether it will carry its own usage-based pricing the way some of Figma’s AI features do. If your team wants in before a wider release, joining the waitlist through Figma’s own Config page is the only confirmed path right now.

Because the feature is still in early access, expect rough edges: limited framework support beyond React, and workflows that favor teams already comfortable with component-driven code. Figma has a track record of widening access to Config announcements gradually, so treat the current rollout as a preview rather than the finished feature set.

Is Figma Code Layers Worth Learning Now?

If your team already ships React and your designers want more control over interactive details, learning Figma Code Layers now is worth the time, even in early access. Getting comfortable with the composer before it reaches general availability means your team won’t be learning a new workflow at the same time everyone else is.

If your stack doesn’t use React, or your team is small enough that a developer can turn around component changes quickly anyway, it’s reasonable to wait. Code Layers is solving a coordination problem that mostly shows up at scale, where a slow handoff loop between design and engineering actually costs time.

Either way, it’s worth watching how Figma expands framework support and pricing once early access ends, since both will determine whether Code Layers becomes a default part of the Figma workflow or stays a specialized tool for React-heavy teams.

For a freelancer or a small agency, the calculation is different from a large product team’s. If you bill clients for both design and front-end build work, Figma Code Layers could shorten the gap between a design review and a working prototype you can hand over, which is a real business advantage even while the feature is rough around the edges. If you only ever deliver static design files and someone else’s engineering team builds the product, the feature is worth knowing about but not urgent to adopt yet.

Larger teams evaluating Figma Code Layers should also weigh how it fits existing design-ops processes. A team with a mature Dev Mode and Code Connect setup already has a working, if slower, handoff pipeline; swapping part of that for Code Layers mid-project is riskier than trying it on a new, smaller initiative first. Starting with an internal tool or a single marketing component, rather than a core product surface, is the lower-risk way to learn where Figma Code Layers actually saves time for your specific team.

Frequently Asked Questions About Figma Code Layers

Is Figma Code Layers free to use?

Figma hasn’t announced final pricing for Code Layers. It’s currently available through early access via waitlist, and Figma has not said which plan tiers will include it once that access expands.

Does Figma Code Layers replace Dev Mode?

No. Dev Mode still exists for inspecting designs and generating handoff code for developers working outside Figma. Code Layers adds a different workflow where code lives and runs inside the file itself, and the two are meant to complement each other.

What programming languages does Figma Code Layers support?

Early coverage of the Config 2026 announcement points to React as the primary supported framework at launch. Figma hasn’t published a full list of supported languages or frameworks for the early access period.

Can designers use Figma Code Layers without knowing how to code?

Yes, to a degree. The composer accepts plain-language prompts that generate or modify the underlying code, so a designer can describe a behavior change without writing it directly, though a developer’s review still helps for anything shipping to production.

Can I import my team’s existing GitHub repository into Figma?

Yes. Figma Code Layers supports cloning a GitHub repository or uploading a local codebase, then converting selected components into editable code layers that mirror the real project files.

Where can I sign up for early access to Figma Code Layers?

Figma’s own Config 2026 recap and event pages are the authoritative place to join the waitlist, since third-party coverage of the announcement doesn’t control access to the feature itself.