Figma Adds Specs and Code Layers to Guide AI Agents

Figma has introduced new tools designed to help AI agents produce software that aligns more closely with product requirements, design systems and brand guidelines. The updates include Figma Specs, a Markdown-based editor for documenting design intent and technical requirements, and code layers, which allow teams to create interactive prototypes directly on the design canvas.

Announced at Config India on October 15, the features address a growing challenge for product teams as AI tools accelerate software development. Generating code and interfaces is becoming easier, but ensuring that AI-generated output follows established design patterns and works as intended remains a significant concern.

Figma Specs Gives AI Agents Shared Context

Figma Specs provides a shared space where designers, developers and product managers can document what a product should do and how it should look. Teams can create standalone specification files or place them alongside designs on the Figma canvas.

The Markdown-based editor supports references to existing designs, FigJam diagrams and code layers. This allows teams to combine written instructions with visual and technical material instead of relying on disconnected documents and prompts.

The context can also be passed to compatible AI agents through Figma's Model Context Protocol (MCP) integration. Agents can use the specifications to understand product requirements, implementation details and design decisions before generating or modifying code.

The feature is rolling out in open beta, with availability dependent on the user's plan and rollout status.

Code Layers Bring Interactive Prototypes to the Canvas

Figma's code layers allow teams to build and test interactive prototypes backed by running code within the design environment. Users can start with a prompt, convert existing design frames into code-backed prototypes, import code from GitHub repositories or capture website code through Figma's browser extension.

Teams can then explore functionality and compare different implementations before committing to a development direction. The approach brings design exploration closer to the underlying code, helping designers and developers identify gaps earlier in the product development process.

Code layers are entering open beta. Figma says the feature can help teams evaluate aspects such as functionality, accessibility and design consistency before development progresses.

Design Systems Become More Important

Figma is also expanding its design-system tools to give AI agents better access to established components and implementation rules. Guidelines can be added to published design libraries, while code sources from GitHub repositories or npm packages can help agents work with existing components.

A centralised design-system management experience is also in preview. It is intended to bring design libraries, code libraries and guidelines together so teams can maintain consistency across products.

These changes reflect a broader shift in AI-assisted development: teams need to provide agents with structured context, not just prompts, if generated interfaces are to remain consistent with existing products.

Human Oversight Remains Necessary

The new tools can give AI agents clearer instructions, but they cannot guarantee that generated code will meet every product requirement. Teams will still need to review functionality, accessibility, security and visual consistency before releasing software.

Figma's approach brings written specifications, designs and code closer together in a shared workspace. Its impact will depend on whether teams can use that context effectively and reduce the rework caused by inconsistent AI-generated output.