Figma opens Code layers and Specs for teams building with AI

Figma is bringing working prototypes and shared instructions for AI agents into the same canvas. Its October 15 announcement moves Code layers into open beta and launches Specs, alongside updates to its developer integrations and design system tools.

The combination gives product teams a way to discuss what software should do while inspecting a version that runs. The useful question is how well the written decisions, visible design and implementation stay aligned as people and agents keep changing them.

Builder.io’s Agent Native beta addresses a related workflow issue by giving people and AI agents shared app actions.

Working code joins the design canvas

Code layers in Figma Design are interactive prototypes that run inside a design file. A team can create one from a prompt, existing frames, a local folder, a GitHub repository or a webpage captured with Figma’s Chrome extension. Multiple versions can run on the canvas for comparison.

Designers can also extract the current view, selected elements or a recorded flow into editable design layers. For a review, that means the team can inspect an interaction, pull out the relevant screens and annotate what needs to change. The source code remains available through the code editor.

Access is arriving over the coming weeks, so members of the same team may receive it at different times. Figma’s documentation says creating code layers requires a Full seat. Imports through MCP can take ten minutes or longer, and some projects need changes before they run.

Specs gives decisions a shared home

Specs combines written context with references to the work it describes. Teams can bring Markdown onto the canvas and embed designs, diagrams and code layers. The Figma agent can read and respond to comments, allowing people to discuss a proposed change beside the document that records it.

Figma’s launch examples include using GitHub context to draft a technical specification and asking a connected analytics tool to answer a question inside a product brief. When a direction is agreed, a link to the spec can provide a coding agent with its text and linked design context through MCP.

The Specs guide describes both standalone files and documents placed inside Figma Design or FigJam. It lists Professional, Education, Organization and Enterprise plans, with editing permission required. The release is an open beta that is rolling out over several weeks.

GitHub imports change who can see code

The Git integration works by storing a clone of a repository in Figma. Teams can experiment in branches, then push changes or open a pull request back to GitHub. Connecting an organisation requires administrator involvement, while individual users also authorise the Figma GitHub app. Public repositories can be cloned by URL without that connection. Those unconnected clones cannot push changes or create pull requests.

There is a consequential visibility detail. Anyone who can view the Figma Design file can see a code layer’s preview and its preview source. People with edit access can inspect the underlying Git source even when they lack permission to that repository in GitHub. A private repository’s original audience therefore does not automatically describe the audience of its Figma copy.

Before importing proprietary code, a team should review who can access the destination file. Figma also recommends working in a separate branch for experiments. Those checks matter when a design review includes outside collaborators or when the same file is shared more broadly than the engineering repository.

Free code editing has a defined boundary

On paid plans, generating and editing code within a code layer is free through November 4, 2026. Other agent work in the same prompt still consumes AI credits. After that date, code layer tasks use credits too.

Specs has different credit rules. Writing or editing its text manually costs no AI credits, while using the agent with Specs does. The guide notes a current exception for using the agent to create a Spec in FigJam during its closed beta. A team testing the launch should therefore track which action it is asking the agent to perform, rather than assuming the temporary code offer covers everything.

Agents still need deliberate context

Figma’s design library guidelines provide another part of that context. Teams can attach Markdown, text or JSON files to a published library, so the agent receives rules that are difficult to infer from visual assets alone. Figma recommends concentrating on recurring mistakes and ambiguous choices, such as which component or spacing token belongs in a particular situation.

The guidance is specific to its library. During beta, people must save and upload the files themselves, even if an agent helps draft them. Figma recommends three to eight focused files totalling less than 100 KB, while the upload limit is 200 KB. Additional context can also increase credit consumption. These are instructions supplied to the agent, not evidence that every generated result will follow them.

The October 15 release also lists Guidelines in open beta, Code sources in closed beta and centralised design systems as a preview. The last of those is intended to bring design libraries, code libraries and guidance together. Those labels describe different levels of access and should remain part of any evaluation plan.

MCP connects the canvas to coding tools

Figma’s MCP server exposes design information to compatible AI clients and supports writing native content back to the canvas. Figma recommends its hosted remote server for the broadest feature set. Only clients listed in its MCP catalogue can connect, so support should be checked for the specific tool a team uses.

A related code to canvas workflow captures a running interface as editable Figma frames. It supports reviewing individual screens or an entire flow, then asking an agent to implement the agreed changes. These captured design layers serve a different purpose from a running code layer. They let reviewers reorganise screens, adjust copy and mark decisions before changes return to the application.

Figma says the expanded MCP offering supports twenty new partners. The same launch includes Payload integration in Figma Make, with a hosted backend for content, data and authentication rolling out across plans.

For teams evaluating the update, the practical test is a small real change. Put the intended behaviour in a spec, inspect the prototype with collaborators, then review the resulting code. The value will depend on whether shared context makes those decisions easier to carry through consistently.

Illustrative photo by Zac Wolff on Unsplash under the Unsplash License. Published in 2022