Figma is building the full-stack creative canvas where teams, agents, and the materials you need come together so you can build your best work, by design.
At Config India 2026, we launched new ways to build and collaborate with code, capture and share context, and build with real data and content.
In this article, we'll cover new features announced at the conference, their current availability, frequently asked questions, and additional resources.
Overview of what's new
| Feature | Availability | Access |
| Code layers | Open beta | Rolling out to all plans |
| Figma Specs | Open beta | Rolling out to Professional, Organization, and Enterprise plans |
| Payload in Figma | Available now | Rolling out to all plans in Figma Make |
| MCP improvements | Available now | Available on all plans |
| Guidelines | Open beta | Available on Professional, Organization, and Enterprise plans |
| Code source in libraries | Closed beta | - |
| Centralized design systems | Preview | Preview |
Figma Specs and code layers are supported on the Figma mobile app, in addition to desktop and web.
Code layers Open beta
Before you Start
Who can use this feature
Available on Education (not K-12), Starter, Professional, Organization, and Enterprise plans
Requires edit access
Originally announced at Config in San Francisco, code layers in Figma Design is now moving into an open beta on all plans.
A code layer holds real, running code, so you can turn your designs into live, interactive prototypes that sit directly on the canvas. With code layers, your team can interact with the product, refine ideas, and align faster together. There are a several ways to get started with code layers:
- Capture code from your webpage: Use the Figma Chrome extension to copy code and paste it onto the canvas as a code layer
- Start with design: Select design frames on the canvas and prompt the agent to turn them into a code layer
- Use a GitHub repo: Clone a connected GitHub repo to build on top of an existing frontend codebase
- Start from scratch: Add an empty code layer on the canvas and prompt the agent to build
Learn more ways to get started with code layers in Figma.
Tip: Connect multiple GitHub accounts to a single Figma account if you're on an Organization or Enterprise plan. Learn more.
Code layers promotional period
Code layers will use AI credits in the open beta. To help you get started, creating and editing within code layers is free through November 4, 2026 on paid plans. For more details, check out the Code layers FAQs below.
Code layers FAQs
When will I get access to code layers?
Code layers is in open beta and is rolling out to everyone over the next few weeks. You may gain access to this feature at a different time than your team or organization. If you don’t see code layers—please stay tuned. Once the feature is available in your account, you’ll see a Code icon in your toolbar in Figma Design.
Does code layers consume Figma AI credits?
Code layers will use AI credits in open beta. The number of credits for code layers will vary based on the complexity of the task. Learn more about how AI credits work.
As we roll out the feature, creating and editing within code layers is free through November 4, 2026 on paid plans. This is how it works:
- Generating and editing code within a code layer does not use credits through November 4.
- A single prompt can involve several tasks, and only tasks related to generating and editing within a code layer are free. The Figma agent’s other work related to your request still consumes AI credits.
After November 4, all code layer tasks will use AI credits like other agentic AI features.
How many Figma AI credits does code layers consume?
Credit consumption varies based on a number of factors, including the complexity of the task. Learn more about how AI credit consumption works for code layers.
Can I turn off code layers? Can I opt out?
Admins can disable code layers by turning off AI features from their team or organization settings. Turning off AI features also turns off all other AI features across Figma. Learn how to disable AI features.
Figma Specs Open beta
Before you Start
Who can use this feature
Available on Education, Professional, Organization, Enterprise, and Government plans
Requires view access to view, and edit access to edit
Specs is a native home for context that can move into, out of, and across Figma. For example:
- Add Specs to the canvas in Figma Design, next to your designs, so collaborators and agents have the context they need
- Draft a Spec by bringing in outside context via MCP, like your codebase or relevant data analytics
- Create a technical specification doc from your designs or turn technical specifications into code layers
- Riff on multiple Specs side-by-side on the canvas with your team to align on a direction
- Summarize team critiques in FigJam into a Spec
Figma Specs FAQs
When will I get access to Figma Specs?
Specs is in open beta and is rolling out over the next few weeks. You may gain access to this feature at a different time than your team or organization. If you don’t see Specs in your account yet, please stay tuned.
Once the feature is available in your account, you’ll see the ability to create a Spec file from the file browser, as well as a Spec icon in your toolbar in Figma Design and FigJam.
Does using Specs consume AI credits?
Yes, using the agent with Specs consumes Figma AI credits.
Credit consumption varies based on a variety of factors, including task complexity and context the agent consumes. You can hover over the receipt after each prompt in the agent to see how many credits were consumed by each prompt.
Learn more about AI credit consumption.
Note: The agent in FigJam is currently in closed beta. If you are a part of that closed beta, using the agent to create a Spec in FigJam does not consume credits at this time.
Payload in Figma Available now
Before you Start
Who can use this feature
Available on Education, Starter, Professional, Organization, Enterprise, and Government plans
Available on Figma Make and code layers
Requires edit access
Payload is the open-source, AI-native, and fully typed backend framework that powers full-stack capabilities inside of Figma Make and code layers.
With Payload, you can now stand up a backend for your website and build production-ready applications directly inside Figma. Define your schema in code and get a typed backend, admin panel, database, file storage, auth, access control, and APIs (REST, GraphQL, and Local). Self-host anywhere Node.js runs.
Learn more about Payload in Figma.
Payload in Figma FAQs
When will I get access to Payload in Figma?
Payload in Figma is rolling out to everyone over the next few weeks. You may gain access to this feature at a different time than your team or organization. If you don’t see Payload in Make or code layers, please stay tuned.
Does it cost credits to use Payload in Figma?
Adding Payload uses more credits than building without it, because the agent does more work: it loads extra guidance and skills, writes more code, and carries that context through every later call. Simple projects cost less than complex ones, and your actual usage will vary with the prompt.
What’s different about Payload in Figma?
With Payload in Figma, you can stand up a real back-end for your website and build production-ready applications directly inside Figma, powered by Payload. To get started, check out the Figma Help Center about adding a back-end to Figma Make.
You can still use the self-hosted version of Payload. The open-source experience remains the same. You can learn more about the self-hosted version of Payload in the Payload Help Center.
Does this replace Supabase as Make's backend? What happens to existing Supabase-backed Make apps?
Payload is Figma Make’s native backend moving forward. Supabase remains available as a third-party connection, and existing Supabase-backed Make apps will continue to work as they do today.
Figma MCP Server Available now
Before you Start
Who can use this feature
Available on Starter, Professional, Organization, Government, and Enterprise plans
Usage limits and access vary by plan and seat type
Requires an MCP client listed in the Figma MCP catalog
We've made improvements to the Figma MCP server. You can now:
- Complete tasks faster and more reliably, while using fewer tokens
- Generate interactive code layers on the Figma canvas
- Create visual assets and run published Weave workflows from your AI tool of choice
- Read, write, and create Specs
There are also new tools available to the Figma MCP server:
-
html_to_figma: Turn agent-generated HTML into editable design layers in Figma -
generate_image: Generate images using Figma’s image models directly from your AI tool, without opening Figma
Learn more about the Figma MCP.
MCP FAQs
Does the generate_image tool cost Figma AI credits?
Yes the generate_image tool will consume AI credits, similar to the "make an image" tool within Figma Design.
Does the Weave MCP tool cost Figma AI credits?
The Weave MCP tool will use Weave credits, but not Figma AI credits.
Centralized design systems Preview
Figma is building ways to bring design systems into a single, dedicated space to help teams manage and scale their design systems. Here's what we're working on:
- Making governance more efficient by bringing design, code libraries, and guidelines into unified design systems
- A system map to track changes and dependencies, so you understand how a change in one source could affect the others
- Diagnostic reports to get a clear view of opportunities for your design system
Guidelines Open beta
Before you Start
Who can use this feature
Available on Professional, Organization, Enterprise plans
Requires a edit access
Guidelines help the Figma agent create designs that better reflect your design system. These files help you capture information the agent can’t infer from library assets alone, such as how to follow established patterns and avoid anti-patterns.
You can add guidelines to published design libraries. When someone asks the agent to create a design using a library, the library’s guidelines files are automatically provided to the agent in the background. This additional guidance can help it produce results that align more closely with your system.
Guidelines FAQs
How might guidelines affect the cost of a prompt?
A prompt may use more AI credits when it uses a library with guidelines, because those files provide additional context for the agent.
The credit use for a prompt varies with the model, task complexity, and the quantity, size, and complexity of the guidelines. Learn more in How AI credits work.
Code sources Closed beta
Add your code sources to Figma to provide fuller context when prompting the agent. This helps the agent build and edit components and code layers that reflect your real design system instead of making generic guesses. Adding a code source to a design library can help:
- Improve design system adherence by ensuring every code layer pulls from real components
- Teams that distribute their design system as an npm package and want it reused automatically wherever that library is enabled
To get started, add a GitHub repo or an npm package to a library and then publish the library. You only need to do this once, and teammates downstream can enable the library and prompt the agent without importing or configuring anything.
Code sources FAQs
When will I get access to connecting codebases to my libraries?
Adding code sources to libraries is currently in closed beta to a small group of participants. Access to this feature, and other features for centralizing design systems, will expand as the feature develops and matures.