Figma Code Layers: Free on Paid Plans Until Nov 4, Then 250+ Credits per Layer From Frames

What did Figma announce on October 15?

Figma shipped seven updates at Config India, and the headline item is code layers moving into open beta. According to the Figma release notes for Config India 2026, the full list looks like this:

MCP stands for Model Context Protocol, an open standard that lets AI assistants and coding agents access Figma files. Figma's overview post Build by design says code layers are available on all plans, and the new MCP partners include OpenCode, Junie by JetBrains and the AI browser Dia.

What exactly are Figma code layers?

A code layer is a working prototype made of real code that sits on the canvas next to your designs. You can comment on it, duplicate it and put versions side by side, just like any other frame. Figma's post Design together with code layers lists five ways to create one:

• From a design: turn existing frames into a clickable prototype
• From GitHub or a local folder: but only a "supported, lightweight prototyping codebase", not a full production app
• From a website: capture a live page with the Figma extension for Chrome
• From a coding tool: pull prototypes in through the MCP server
• From a prompt: let the Figma Agent build or change it

Two features set this apart from earlier prototypes. "Extract designs" turns screens from the code back into editable Figma frames, so designers can adjust visual details in the tool they know. And you can push changes to a branch and hand them to the dev team as a pull request. The path from idea to code is no longer a one-way street.

What will code layers cost from November 5?

Code layers use AI credits; creating and editing them is free on paid plans only through November 4. The Figma help article on AI credits gives guide values, all of them minimums:

The right column is a ceiling, not a promise: more complex tasks cost more, and code layers share the same pool with Figma Make and the Figma Agent. Credits expire every month and do not roll over. Organization seats get 3,500 and Enterprise seats 4,250 credits per month. We ran the numbers on those allowances for the Figma Agent in Figma Agent now costs credits.

One catch for small teams: on the free Starter plan and for View seats, there is a daily limit of 150 credits. A single code layer from frames, at 250+, already exceeds it. The help article does not say whether Figma then cancels the action or pushes it to the next day. Our take: you can only work seriously with code layers on a full seat in a paid plan.

What do Specs and Payload add?

Specs bring the concept document onto the canvas. According to Figma's post Introducing Specs, you create a spec with the D key or drag an existing .md file onto the canvas. You can embed frames and FigJam boards in it, and the Figma Agent reads comments and replies to them. For handoff, you paste the spec link into your coding agent's prompt, and through MCP it also reads the linked frames and code layers. Brief, design and prototype then live in one place instead of being scattered across Notion, Figma and tickets.

Payload is an open source CMS whose team has joined Figma. According to Figma's post on websites with Payload in Figma, Figma Make now sets up a database, file storage, login and an admin panel at /admin as soon as you prompt an app. Hosting is free during the beta, and Figma says it will announce pricing in advance. That is interesting for landing pages with a blog. As a replacement for a maintained company website with SEO requirements, we would not use it yet: the post says nothing about domains, export or running costs.

What does this mean for your team?

If you are on a paid plan, the next three weeks are a free test window, and you should use it deliberately. Our recommendation for the free phase:

1. Convert a real flow: Take a flow with three to five screens from a current project and turn it into a code layer. Check whether spacing, fonts and components from your design system come through cleanly.
2. Test the way back: Change something in the code layer by prompt, pull the screens back with "Extract designs" and check whether the frames are named properly and still usable.
3. Rehearse the handoff: Write a spec for the flow and give the link to your dev team or a coding agent. Track how many fewer follow-up questions come back.

Count how often you create and edit code layers along the way. Project that onto a normal month using the guide values above, and you will know before November 5 whether a Professional seat is enough or whether you need to buy extra credits.

Our take: code layers do not replace development, but they shorten the path from design to a testable prototype. For stakeholder sign-off and user testing, that is a real gain. If you already build prototypes with Lovable or Make, the main advantage here is that design and prototype live in the same file. We broke down when a prototype pays off and when you need an MVP in MVP development in 2026. If you want help setting up a design system that also works for agents, get in touch.