Figma opens code layers and Markdown Specs in beta and builds Payload into Figma Make

On October 15, 2026, Figma opened two features to all users in beta. Code layers puts working prototypes built in code on the Figma canvas, where a team can duplicate, compare, and comment on them like any other design. Specs is a Markdown document on the same canvas that can be handed to a coding agent through Figma's Model Context Protocol (MCP) server, which lets outside AI tools read and edit Figma files. Figma also built Payload, the open-source content management system whose team is now part of Figma, into Figma Make, so an app generated there comes with its own backend.

Code prototypes on the canvas

Figma introduced code layers earlier in 2026 as a closed beta. A code layer is a working prototype, built in code, that lives on the canvas next to static designs. It can start from an existing Figma design or from a lightweight prototyping codebase imported from GitHub or a local folder. It can also arrive from a coding tool through the MCP server, or as a live web page captured with Figma's Chrome extension. A layer imported from GitHub stays connected to that repository.

Teammates can duplicate a code layer to try another approach, leave comments on it, or ask the Figma agent to change how the prototype behaves. The Extract designs command turns a single screen, a state, or a whole flow back into editable design layers. When the changes are ready, the updated code can be pushed to a branch and opened as a pull request for the team to review.

Code layers is available on all plans and uses AI credits. On paid plans, creating and editing code layers costs no credits through November 4, 2026. Figma's posts do not say how many credits the feature will use after that date.

Specs, guidelines, and the MCP server

Specs is a Markdown document placed on the canvas. It is created with the D key or from the toolbar in Figma and FigJam, and an existing .md file can be dragged straight onto the canvas. A spec can embed a FigJam file, a frame, or any other element, so text and designs sit side by side instead of being linked through screenshots. The Figma agent can read a spec and reply to its comments.

Figma pitches Specs as the way to hand context to an agent. According to the company, a coding agent such as Codex receives a spec's Markdown together with the frames, diagrams, code layers, and Code Connect snippets it references. For that, the agent has to be connected to Figma's MCP server and given the spec's link in the prompt. Specs is rolling out in open beta on web, desktop, and mobile, on all paid plans.

For design systems, published libraries can now carry written guidelines for the agent to follow, a feature called Guidelines that is in open beta. Code sources, which import components from a GitHub repository or a package on npm, start in closed beta. Both will be available on all paid plans.

Through the updated MCP server, outside AI tools can now create code layers, work with specs, generate images, and run published Weave workflows. Figma lists 20 new partner integrations, including OpenCode, Dia, Junie by JetBrains, and Meta Muse. The company also says the update reduces errors and token usage.

A backend in Figma Make

Figma Make builds apps from a prompt. With Payload, such an app also gets a database, file storage, user login, and an admin panel where people who do not code can edit content, and Figma hosts all of it. Developers can customize the app with Payload's open-source framework, and the app can be moved outside Figma. Payload is available on all plans, with access reaching every account over the coming weeks.

Make now also stores API keys in its settings. Figma says the keys are kept secure and are not exposed to visitors of the published site. According to the post, this used to require a separate Supabase project.