Figma Opens Code Layers Beta, Adds Specs and a Backend for Make
Figma is expanding its platform beyond static design by rolling out interactive code layers, collaborative documentation, and database integrations for its Make product.
Deep dive
- Code Layers: Allows running interactive prototypes directly on the canvas, with support for GitHub imports.
- Specs: Shared Markdown documentation that integrates with AI agents via the Model Context Protocol (MCP).
- Payload Integration: Provides a managed database, CMS, and admin interface for Make projects.
- Guidelines: Allows attaching design system usage instructions as context for AI agents.
- Rollout: Features have staggered availability; some are currently in open beta while others remain in closed testing.
Decoder
- MCP (Model Context Protocol): An open standard that enables AI assistants to securely connect to data sources, tools, and local development environments.
- Payload: A headless CMS (content management system) that allows developers to manage content, authentication, and database schemas through an API.
Original article
Figma’s October 15 announcements expand what teams can keep alongside their designs: working code prototypes, written requirements and instructions for AI agents. Code layers are entering open beta, Specs introduces collaborative documents, and a Payload integration brings a backend to Figma Make. Access is rolling out at different stages.
Working prototypes on the canvas
Code layers run interactive interfaces alongside design frames. Teams can start from a design, import a GitHub project or bring in a webpage through Figma’s Chrome extension. Multiple prototypes can sit together for comparison.
The workflow also runs in the other direction: teams can extract editable design layers from a running prototype, including individual elements or captured flows. That makes it possible to inspect a particular state as a design rather than only through the live interface.
Previously announced in closed beta, code layers are now rolling out in open beta across plans. Code generation and editing within code layers are free on paid plans through November 4, 2026, inclusive. After that, these tasks will use AI credits. Other agent actions may already consume credits.
Specs puts requirements next to the interface
Figma Specs adds shared Markdown documents that can include frames, diagrams and code layers. Teams can describe requirements, constraints and expected behaviour alongside the screens they concern, then provide that context to an AI agent through MCP.
For example, a prototype might show a checkout error, while its spec records when the error should appear and which recovery options are required. Keeping both together gives reviewers something more precise to check than the appearance of a successful flow. Specs is gradually entering open beta on paid plans.
Design-system rules become agent context
Guidelines attach usage instructions to libraries, giving agents context about components and their intended use. Code sources connects implementations from GitHub or npm. Guidelines is in open beta on paid plans; Code sources remains in closed beta.
Figma also previewed a centralized design-system view with dependency mapping and checks for gaps. That preview should not be confused with a generally available feature. Expanded MCP support lets external AI tools work with code layers, Specs and image generation.
Make gains a CMS and backend
The Payload integration adds a database, content management, authentication, file storage, APIs and an admin interface to Make projects. Content can then be updated through the CMS without prompting the agent for each change.
Access will roll out across all plans over the coming weeks. Hosting is free during beta, with future pricing to be announced before it takes effect.
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi