Figma 2026 Update: Specs Editor, AI Agent Platform, and Code Layers Beta

Updated 18 Oct 2026: Updated to include Sarvam in Figma’s MCP partner network. See what changed ↓

Figma now offers built‑in low‑code development, web hosting, and AI‑agent guidance tools, expanding the platform beyond design. The updates target design teams, developers, and anyone using AI‑assisted design, and are now available to a wider user base.

Visit the official Figma website →

What changed

Figma added three major features:

• Specs editor: A Markdown document that can live inside a Figma file or as a standalone asset. It lets teams define design language, embed FigJam diagrams, reference canvas elements, and attach code or design libraries.
• AI agent platform expansion: The on‑canvas AI agent, previously limited, is now open to more users. It can follow the rules set in Specs, turn designs into code, and adjust existing code snippets.
• Code Layers beta: Public beta of a feature that lets designers add editable code directly on the canvas, creating more interactive prototypes. Users can ask the AI agent to generate or modify code within these layers.

Who gets it and when

The new low‑code, hosting, and AI‑agent tools are being rolled out to paid‑plan users first, following the October 2026 announcement. Code Layers has been superseded by the integrated low‑code environment, which is now part of the paid offering and does not require a separate beta.

How to use it

Getting started with each feature follows a similar workflow:

• Specs editor
  1. Open a Figma file and choose New Specs from the menu.
  2. Write Markdown to describe colors, typography, component usage, or any design rule.
  3. Use the embed tool to pull in canvas elements, FigJam boards, or code layers.
  4. Save the Specs file; it can be linked from other files or shared as a reference.
• AI agent platform
  1. Activate the agent via the AI button on the toolbar.
  2. Ask the agent to follow the Specs guidelines, generate components, or convert designs to code.
  3. Review the agent’s suggestions and edit as needed; the agent can also adjust code within Code Layers.
• Code Layers
  1. Select a frame or component and choose Add Code Layer.
  2. Write or paste HTML, CSS, or JavaScript directly in the layer.
  3. Use the preview mode to see interactive behavior on the canvas.
  4. Ask the AI agent to modify the code, for example to change a button style or add a transition.

What it means if you are choosing Figma

The Specs editor gives design systems a single source of truth that lives inside the design file, reducing the need for separate documentation tools. The AI agent’s tighter integration with Specs means teams can enforce brand rules more consistently, while still benefiting from generative assistance. Code Layers brings developers closer to the design surface, allowing rapid prototyping without switching to a separate IDE.

These additions make Figma a stronger all‑in‑one platform for product teams that want design, documentation, and interactive prototyping in one place. However, teams that rely heavily on dedicated documentation platforms (like Confluence) or full‑stack development environments may still prefer a split workflow. Alternatives such as Adobe XD (which offers its own design system manager) and Sketch with plugins for code export remain viable for users who need more granular control over code generation or who prefer a macOS‑only ecosystem.

FAQ

Can I use Specs without the AI agent?

Yes. Specs is a standalone Markdown file that any team member can read and edit, independent of the AI features.

Is Code Layers suitable for production code?

Code Layers is intended for prototyping and design‑to‑code experiments. It is not a replacement for a full development pipeline, but it speeds up early‑stage interaction testing.

Do I need a paid plan to access these features?

The new low‑code environment, hosting, and AI‑agent tools are available to paid‑plan users; they are not part of a free beta. Pricing details are unchanged; check the official site for the latest plan information.

Bottom line

Figma’s 2026 update ties design documentation, AI assistance, and code prototyping together, offering a smoother workflow for product teams. If you value an integrated system and want to experiment with AI‑driven design, the new features are worth exploring. Teams that need heavy‑duty code management or prefer separate documentation tools may still look at other platforms.

Sources

• www.msn.com: Figma announces new features to define how agents work on its platform

Visit the official Figma website →