Loading...

Figma tools · Figma Code Layers

Edit a design in Figma, then update the actual code with one click

Figma demonstrated this feature when it launched in open beta on October 15. Bring a Figma frame, GitHub repository, or webpage onto the canvas and it becomes a screen you can interact with. Extract it as design layers, edit it as usual, and apply those changes back to the code with one click. You can push the updated code to a GitHub branch and open a pull request for your team to review. Here are the official demos and examples from people who tried it early.

Oct 26, 2026·2 cases

Figma's official demo video announcing the open beta at Config India. Source: Figma on X
Figma blog — Design Together With Code Layers on the Canvas, 2026-10-15Figma Help — Code layers in Figma Design (plans, seats, free through November 4, phased rollout)Figma on X — Code Layers open beta launch video, 2026-10-15 (6,706,822 views on October 26)

Figma's 35-second video announcing the Code Layers open beta at Config India on October 15 had passed 6.7 million views on Figma's official X account as of October 26. A week later, Figma posted a separate 10-minute video showing four ways to use Code Layers. After trying it on his company's blog, Murat Bayral of the YouTube channel 02ui, who has more than 20 years of design experience, said, "this thing is basically changing Figma entirely".

You can bring a Figma frame, a GitHub repository, a folder on your computer, a webpage imported with the Chrome extension, or code sent by a coding agent connected to Figma through Figma MCP onto the canvas. You can interact with the screen, duplicate it to compare options side by side, and leave comments on it. Updated code can be pushed to a GitHub branch and submitted in a pull request for team review.

It is currently available to people with a Full seat and edit access to a Design file. According to Figma Help, creating and editing code layers on paid plans does not use AI credits through November 4. The feature is rolling out over several weeks, so some people on the same team may see the menu later than others. To import from GitHub, you must connect Figma to your GitHub account or organization. Only lightweight prototype code is supported, and importing can take more than 10 minutes. The Figma agent on the canvas creates and edits the code.

Reference 01Tutorial · 02ui, a YouTube channel run by two people with more than 20 years of design experience

He changed a blog's sizing and layout in Figma, then sent the edits back to its code layer with one click

Murat Bayral of 02ui connected Figma to GitHub and brought his company's blog repository (zero to UI blog main) onto the canvas. He could scroll through it like the live site, complete with its dark theme. Murat said, "it is as same as my website".

He then created a branch called 'new hero section' and used Extract designs to turn the screen into Figma design layers. Looking at the result, he said, "This is exactly the auto layout structure that I initially built on Figma". He changed the elements' sizing and layout using hug, fixed, and fill, then clicked Update code layer to apply those edits to the code layer.

The work was done on a new branch. The video does not show it being deployed to the live site.

The 02ui video shows a company blog repository being brought onto the Figma canvas

Reference 02Official company demo · How Cox Automotive used the feature, as described on Figma's official blog on October 23

A product manager made 19 prototype versions with about an hour of hands-on work

Lindsay Brechler, a product manager responsible for VinSolutions CRM at Cox Automotive, brought a large HTML prototype into a code layer and refined it with the Figma agent. She used it to align stakeholders on four tier options for a new dealer feature. She exported the final version as a single HTML file and uploaded it to an internal site.

In her own estimate published on Figma's blog, she made 19 versions with about one hour of hands-on work and called the process "at least 10 times more efficient, or about 90% time saved". She was comparing it with building directly in Figma herself as a non-designer; the blog does not say how long that took. Brechler added, "I'm not a designer, I'm a product manager."

The Figma blog shows the canvas but does not link to the finished work.

How people reacted

What people liked

  • “if you extract the design and do lots of iterations for hours, you don't spend any credits. That's the most powerful part of this code layers.”

    Murat Bayral · YouTube 02uiyoutube.com

  • “molto molto utile”

    Very, very useful.

    He was referring to the way a real website was imported into a code layer with its button hover and pressed states.

    Matteo Salvati · YouTubeyoutube.com

  • “This is insane”

    @LPesthectics · Figma official YouTube commentyoutube.com

What fell short

  • “si è inchiodato … ho notato che tende spesso a bloccarsi”

    It froze … I noticed it tends to freeze often.

    He said this while testing a website he had imported and pasted using the Chrome extension.

    Matteo Salvati · YouTubeyoutube.com

  • “Non sembrava funzionare bene”

    It didn't seem to work well.

    He was testing the ability to select a single element on a screen and extract it as a design.

    Matteo Salvati · YouTubeyoutube.com

  • “right now it is in beta mode, so I spent 20 AI credits. I said maybe it would be free, but it was not anyhow.”

    In a video posted October 16, the day after the open beta launched, he said this after applying edits to an extracted design back to the code layer once using Update code layer. Figma Help says creating and editing on paid plans does not use credits through November 4; the video does not explain why credits were deducted here.

    Murat Bayral · YouTube 02uiyoutube.com

  • “it is clear that Figma AI credits are very expensive and runs out fast”

    A comment from a viewer who said they had used Figma Make and the Figma agent.

    @basantrajmohan8716 · 02ui YouTube commentyoutube.com

  • “The main problem with this feature is that I can only use Figma LLM”

    @TheKarsonE · Figma official YouTube commentyoutube.com

  • “Ehm 99.9% of real design systems need compilation at build-time.”

    A comment on Florian Gampert's LinkedIn post about React code running on the canvas. He was pointing out that it can be difficult to run a company's existing design system in a code layer as is. Figma Help also says not all repositories are supported and some projects need changes before they run.

    Mattia Astorino · LinkedInlinkedin.com

  • “I dont think this is reliable for high scale applications, can be for demo purposes tho”

    @yashanand2308 · Figma official YouTube commentyoutube.com

How to start

Choose a frame in a Figma Design file and paste the prompt below into the Figma agent in Code Layers. You need a Full seat and edit access. Anyone with edit access can read the code, so do not include API keys.

  1. Starter prompt

    This article has examples made with Figma Code Layers: https://www.working-ref.com/en/reference/figma-code-layers-2026-10 Look at the frame I have selected and suggest three things I could try with Code Layers for my work. For any idea that starts with a webpage, use only my own site or a page I have rights to. Once I choose one, get started right away. If there is nothing to choose, turn this frame into an interactive code layer and add hover and pressed states to its buttons.

Share this reference

Weekly · Free

Was this reference helpful?

The week in AI: the BEST
just 3, straight to your inbox

Work Smarter with AI

421 readers get it every week

You're in See you in your inbox with the next issue.

Edit a design in Figma, then update the actual code with one click | References