Figma has introduced a new set of AI-powered tools designed to bring software code, visual design, product specifications and AI agents into a shared collaborative workspace. Announced on October 15, 2026, the updates include Code Layers, Figma Specs and improvements to the Figma Model Context Protocol (MCP) server. The company says these tools will help teams move between early-stage experimentation and production-focused development without losing the context behind their decisions.
The announcement builds on Figma’s broader effort to become a platform where product teams can design, prototype, collaborate and work with coding agents. Code Layers is moving into open beta, while Figma Specs is beginning its rollout as a Markdown-based environment for documenting requirements and sharing context. The updates arrive as AI coding tools make it easier to generate prototypes, increasing the importance of collaboration, design consistency and the process of turning promising experiments into software that can be shipped.
Key Takeaways
- Code Layers enters open beta: Teams can bring real, interactive code-backed prototypes onto the Figma canvas.
- Figma Specs introduces shared context: A Markdown-based workspace lets teams document requirements, decisions and instructions for AI agents.
- AI agents get better integrations: Updates to the Figma MCP server allow agents to work with code layers, create and edit Specs, and interact with design assets.
- Payload integration expands Figma Make: Teams can work with real data and content when building dynamic websites.
- Access varies by feature: Code Layers is rolling out across plans, while Specs and Guidelines have more limited plan availability.
- The larger goal: Figma wants to connect experimentation, design collaboration and software implementation in one workflow.
What Figma Announced in October 2026
The new tools were announced as part of Figma’s Config India event and its broader strategy to connect design work with AI-assisted software development.
The company argues that AI has made it easier to produce working prototypes, but the process can become fragmented. A designer might generate an interface using an AI coding tool, share a video with colleagues and then struggle to incorporate their feedback into the actual code. Important decisions about layout, brand identity and product behaviour can remain scattered across chats, documents and design files.
Figma’s updated workflow is intended to make those decisions visible and accessible to the entire team.
| Feature | What it does | Availability announced |
|---|---|---|
| Code Layers | Brings interactive, code-backed prototypes onto the design canvas | Open beta, rolling out across plans |
| Figma Specs | Stores product requirements and shared context in Markdown | Open beta on paid plans |
| MCP server improvements | Connects AI agents to Figma designs, code layers and Specs | Available, with access varying by plan |
| Payload in Figma Make | Helps teams build dynamic websites with real data and content | Rolling out in Figma Make |
| Guidelines | Helps teams define rules for design and AI-assisted work | Open beta on Professional, Organization and Enterprise plans |
| Code source in libraries | Connects design-system components more closely with their code | Closed beta |
The features are designed to work together, but they do not all have the same access conditions or release status. Open beta also means a feature is still being developed and may change as Figma gathers feedback.
Code Layers Bring Interactive Code Into Figma
Code Layers is one of the central elements of the announcement. It allows teams to work with running, code-backed prototypes directly on the Figma canvas instead of treating code as something that exists only in a separate editor.
Developers and designers can bring code into a Figma file from several sources. These include an existing GitHub repository, a local folder, a live website captured through Figma’s Chrome extension or a prototype generated through an AI coding workflow. Teams can also start with a design frame and ask the Figma agent to turn it into an interactive code layer.
Once the prototype is on the canvas, collaborators can review how it behaves, compare different versions, leave feedback and refine the experience together.
This is different from simply importing a screenshot. A static image shows what an interface looks like at a particular moment, while a working prototype allows a team to explore interactions and behaviour.
From design to code and back again
Code Layers is intended to support movement in both directions. Teams can start with a visual design and generate a working implementation, or bring an existing coded interface into Figma and extract selected screens or states into editable design layers.
That flexibility can help designers explore alternatives without losing sight of the underlying implementation. It may also help developers understand how a product should behave before committing to a final version.
Figma says Code Layers is entering open beta and rolling out across plans. Its help documentation notes that availability may arrive at different times for different accounts. During the announced promotional period, creating and editing Code Layers is free on paid plans through November 4, 2026, after which AI-credit usage may apply under the relevant plan rules.
The feature does not eliminate the need for software engineering. A prototype still needs appropriate testing, code review, security checks and integration before it can be considered production-ready.
Figma Specs Gives AI Agents More Context
Figma Specs is a Markdown-based workspace for writing and organising product requirements, technical specifications and project decisions.
The idea is to give teams a shared place to explain what they are building and why. Specs can reference other work in Figma, including designs, FigJam diagrams and Code Layers. Teams can also bring in context from external tools, such as a connected GitHub repository.
An AI agent can use that information when generating or modifying code. Instead of receiving only a short prompt, the agent can be given more detailed information about the product, the existing codebase and the design decisions that should guide the implementation.
For example, a team building a new delivery feature could use Specs to document the required user journey, business rules and expected behaviour. The team could then pass that specification to a coding agent or use it to create a code-backed prototype in Figma.
This approach could reduce the amount of context that needs to be reconstructed every time a task moves between designers, product managers and developers.
Figma Specs is beginning to roll out in open beta on web, desktop and mobile for paid plans. Its longer-term value will depend on how easily teams can maintain accurate specifications and keep them aligned with the code and designs they describe.
AI Agents Can Work Across the Figma Canvas
Figma is also improving its Model Context Protocol server, which allows compatible AI tools to connect with Figma and interact with design assets and project context.
The company says the updated MCP server can help agents create interactive Code Layers, read and write Specs, and use additional tools to generate or modify design assets. New capabilities include converting agent-generated HTML into editable Figma design layers and generating images through Figma’s image models from a connected AI tool.
Figma also says its integrations support more than 20 additional tools, including coding agents and developer environments. These integrations are intended to make it easier to transfer work between an AI coding environment and the shared design canvas.
The practical benefit is that a coding agent does not have to operate without access to the team’s design context. It can work with relevant designs and specifications, while designers and product managers can review the results in a collaborative environment.
However, integrations do not guarantee that an AI agent will produce correct or brand-consistent output every time. Agents can misunderstand instructions, make unsuitable implementation choices or generate code that needs substantial revision. Teams will still need review processes, access controls and clear standards for approving changes.
Payload Integration Brings Real Data Into Figma Make
Another part of the announcement involves Payload, the open-source headless content management system that Figma acquired in 2025.
Figma is integrating Payload with Figma Make to help teams create dynamic websites that use real content and data. A headless content management system separates content management from the presentation layer, allowing websites and applications to retrieve content through APIs.
This can be useful when a team needs to test a website with realistic product listings, editorial content or other structured information rather than placeholder text.
Combining real content with AI-assisted website generation could make prototypes more representative of the experiences customers will eventually use. It may also help teams discover problems earlier, such as layouts that break with longer headlines or product cards that do not handle missing information properly.
The integration is part of Figma’s broader effort to connect design and development with the data and systems that power an application. The exact capabilities available to individual users will depend on the rollout and the relevant product configuration.
Why Figma Is Bringing Design and Coding Together
AI coding tools have lowered the barrier to creating working software prototypes. Developers can describe an idea in natural language, generate code and test a concept much faster than in traditional workflows.
But generating more code does not automatically result in better products. Teams still need to determine which ideas solve the right problem, which experiences fit the design system and which prototypes are reliable enough to develop further.
Figma’s strategy is to make the collaborative canvas a place where teams can explore alternatives, review working experiences and preserve the decisions that guide implementation.
For designers, this could mean spending less time preparing static handoff documents and more time reviewing interactive behaviour. For developers, it could make design intent easier to inspect before and during implementation. Product managers could use Specs to maintain a shared record of requirements and decisions.
The approach also creates a strategic opportunity for Figma. If teams increasingly use AI tools to generate code, Figma can remain relevant by connecting those tools to the visual and collaborative processes that shape what gets built.
The challenge is ensuring that the canvas remains useful for complex projects rather than becoming another layer in an already complicated software workflow.
What It Means for Designers, Developers and Businesses
For designers, Code Layers could make it easier to experiment with functionality rather than relying only on static mockups. They can compare working alternatives and see how design changes affect the experience.
For developers, access to design context and product specifications may reduce misunderstandings during implementation. The ability to move between code and editable design layers could also make it easier to investigate existing interfaces and propose changes.
For businesses, a shared workflow may shorten the distance between an idea and a prototype that stakeholders can actually test. It could also make it easier to involve colleagues who do not normally work in a terminal or integrated development environment.
There are limits, however. Large codebases can contain complex dependencies and architectural decisions that cannot be represented fully on a design canvas. AI-generated prototypes may need significant work before they meet production requirements. Teams must also decide how to handle permissions, confidential project information and review of agent-generated changes.
Figma’s tools can improve collaboration and visibility, but they are not a replacement for sound engineering practices or clear ownership of product decisions.
The Bigger Picture
Figma’s October 2026 announcements reflect a shift in the role of design software. As AI makes it easier to generate interfaces and working prototypes, the value of a collaborative platform increasingly lies in helping teams compare ideas, preserve context and decide what should move into production. Code Layers, Specs and MCP improvements are intended to bring those activities closer together.
The outcome will depend on adoption and execution. Teams will need the new tools to work reliably with existing repositories, design systems and development environments. They will also need to manage the distinction between an experimental prototype and production software. If Figma can make that transition more collaborative without adding unnecessary complexity, the canvas could become a more central workspace for product development.
What Happens Next?
The next signals to watch are the pace of Code Layers and Specs rollouts, feedback from teams using them in real projects and the quality of integrations with external coding agents. Developers will want to know how well the features handle larger codebases, whether generated changes remain aligned with design systems and how AI-credit costs evolve after promotional periods. Broader adoption will be a stronger indicator of success than the number of features announced.
Figma will also need to show that connecting design, code and AI agents produces practical improvements in product development. Faster prototyping is useful, but teams ultimately need better decisions, clearer collaboration and software that can be maintained and shipped. The new tools are an attempt to connect those goals within one workflow; their lasting impact will depend on how effectively they perform outside demonstrations.
Frequently Asked Questions
1. What did Figma announce in October 2026?
Figma announced updates including Code Layers, Figma Specs, improved MCP integrations, Payload integration in Figma Make and new Guidelines capabilities to connect design, code and AI-assisted workflows.
2. What are Figma Code Layers?
Code Layers let teams place interactive, code-backed prototypes directly on the Figma canvas. Users can generate code from designs, bring in existing code and collaborate on working prototypes.
3. What is Figma Specs?
Figma Specs is a Markdown-based workspace for documenting product requirements, technical details and project decisions. It can provide shared context for designers, developers and AI agents.
4. Are Figma’s new AI tools available to everyone?
Availability varies by feature. Code Layers is rolling out in open beta across plans, while Specs is rolling out on paid plans. Other capabilities have their own access conditions, and rollout timing can differ between accounts.
Get the day’s top stories in your inbox
One concise email. No spam, unsubscribe anytime.
