Figma Code Layers and Specs: Handing Your Coding Agent a Spec Instead of a Screenshot

Most solo builders hand designs to a coding agent the same way: take a screenshot, paste it into the prompt, and hope the agent guesses the spacing, the states and the edge cases. It works for a single screen. It falls apart once a feature has loading states, empty states, a design system and a few decisions that only live in your head.

At Config India on October 15, 2026, Figma shipped two things aimed squarely at that gap:

• Code layers moved into open beta: interactive, code-backed prototypes that live on the Figma canvas.
• Figma Specs launched in open beta: a collaborative Markdown editor for intent and technical detail, which your coding agent can read.

There's also a clock: creating and editing inside code layers is free on paid plans through November 4, 2026. After that, it uses AI credits. Here's what's confirmed, what to try before the deadline, and a handoff workflow you can use on a small Next.js or SwiftUI project.

What was actually announced

From Figma's Config India recap and the help center summary:

• Code layers: open beta, rolling out to all plans over the next few weeks.
• Specs: open beta, rolling out to paid plans over the next few weeks.
• Figma MCP improvements: available now on all plans, with faster performance, support for more Figma products, and 20 new partner integrations. Agents can now create code layers and edit specs through it.
• Guidelines for published libraries: open beta on paid plans.
• Code sources (importing GitHub repos or npm packages so the agent builds with your real components): closed beta.
• Payload in Figma Make: scaffolds a Payload backend (CMS, database, auth, admin) hosted by Figma, rolling out across all plans.

Because both headline features are rolling out gradually, you may not see them yet. Figma says you'll know code layers is on when a Code icon appears in the Figma Design toolbar, and Specs when you can create a Spec from the file browser.

Code layers: what they are and what they cost

A code layer is an interactive prototype backed by running code that sits directly on the canvas. According to Figma's code layers help article and beta features page, you can start one by:

• Adding an empty code layer and prompting the Figma agent.
• Connecting a GitHub repo and building on an existing frontend.
• Uploading a local folder of code.
• Selecting design frames and asking the agent to turn them into a code layer.
• Capturing a live webpage with the Figma browser extension and pasting it in.
• Using the Figma MCP server from your own AI tool.

It also works in reverse. Figma's Specs launch post describes an Extract designs option that turns a code layer's current state back into editable design layers: one screen, one state or a whole flow.

Pricing, precisely:

• Code layers use AI credits during the open beta, and the amount varies with task complexity.
• Through November 4, 2026, on paid plans, generating and editing code inside a code layer doesn't use credits.
• That free window is narrow. If one prompt triggers other work by the Figma agent, that other work still uses credits.
• After November 4, all code layer tasks use AI credits, like Figma's other agentic AI features.
• Using it requires edit access to a Figma Design file. Only Enterprise admins can switch code layers off, and only by turning off all AI features.

Figma hasn't published a per-task credit price for code layers, so budget by watching your credit usage during the free window.

Specs: Markdown as the handoff format

Specs is a multiplayer Markdown editor for documenting intent. Per the Guide to Specs and the launch post:

• You can create a standalone Spec file (from the file browser, or by going to figma.com/spec/new), or drop a Spec onto a Figma Design canvas or FigJam board next to your designs.
• A spec can embed a FigJam file, a frame or any node from the canvas, so text and designs sit side by side instead of in screenshots or stale links.
• The Figma agent can turn a PRD into designs, prototypes and code, or turn designs and code back into a technical spec.
• Through MCP, a spec can pull in outside context, like your codebase via a GitHub connector, and push context back out, like updating Linear issues.
• It's available on web, desktop and mobile.

The part that matters most for indie builders is the handoff. Figma's own words: once you agree on a direction, "just copy the link to the spec, and add it to your prompt in your coding agent—all of that context, including Markdown, references to frames, diagrams, code layers, and Code Connect snippets come with it."

The mechanism behind that is the Figma MCP server. Coding agents connected to it can work with Specs using the figma-spec skill, which lets the agent read, create and update standalone Spec files as well as Specs embedded in Design files and FigJam boards. Edits are targeted, and comments stay attached to the right text. In other words, the link is only useful if your agent (Cursor, Claude Code, VS Code with an MCP client, and so on) is connected to Figma's MCP server. Without that, the agent just sees a URL.

What to try before November 4

If you're on a paid Figma plan, this is a cheap window to find out whether code layers earn a place in your workflow:

• Turn one real screen into a code layer. Pick a screen from your app that has state, like a settings page or paywall, not a static landing hero. See how close the result is to what you'd write.
• Import your repo once. Connecting a GitHub repo is the fastest way to tell whether the output respects your existing components or invents new ones.
• Prototype the interaction, not the layout. Code layers are most useful for things screenshots can't show: toggles, validation, transitions and empty states.
• Round-trip it. Use Extract designs to bring the code layer back into frames, and check what survives.
• Write one Spec for a feature you're about to build, embed the relevant frames, and hand it to your coding agent through MCP. Compare the result against your usual screenshot prompt.
• Track credit usage on the non-code-layer parts of each prompt, so you know your real cost after the free period ends.

A practical spec-to-agent workflow for indie apps

This is the workflow I'd use on a small product. Figma doesn't prescribe it; it's my suggested process built on the features above.

1. Connect your coding agent to the Figma MCP server

Follow Figma's MCP server guide for your client. As an example only, a remote MCP entry in a Cursor-style mcp.json looks like this. Check Figma's docs for the current URL and auth flow for your tool:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

2. Write the spec where the designs live

Put a Spec on the canvas next to the frames for the feature. Keep it short and decision-focused. Here's an example structure for a subscription paywall:

# Paywall v2: spec

## Goal
Raise trial starts without hiding the close button.

## Screens (embedded frames)
- Paywall / default
- Paywall / loading prices
- Paywall / purchase failed

## Behaviour
- Prices load from the store; show skeletons, never "$0.00".
- Close button visible after 0s (App Review requirement).
- "Restore purchases" always reachable.

## Constraints
- Use existing <Button> and <PriceCard> components.
- No new colors; tokens only.

## Out of scope
- Annual/monthly toggle animation (next iteration).

## Done means
- All three states reachable in the running app.
- Purchase failure shows retry, not a dead end.

The "Done means" section matters. It gives the agent a way to check its own work that isn't "the tests pass".

3. Hand off with the link and your repo's rules

Then prompt your coding agent with the spec link plus your codebase conventions. An example prompt:

Implement the feature described in this Figma spec:
https://www.figma.com/spec/<your-spec-id>

Use the Figma MCP server to read the spec and its embedded frames.
Stack: Next.js App Router + Tailwind. Reuse components in /components/ui.
Follow the "Done means" list exactly and tell me which items you
verified in the running app and which you couldn't.

For SwiftUI, swap the stack line for something like "SwiftUI, iOS 17+, reuse views in DesignSystem/" and ask for previews of each state.

4. Feed decisions back into the spec

When the agent or you make a decision during implementation, like dropping a state or changing copy, update the spec, or ask the agent to update it through MCP. The spec stays the source of truth instead of a stale snapshot, and your next feature starts from accurate context.

Limitations to know about

• Both features are open beta and rolling out gradually. You might not have access yet, and behaviour can change.
• Specs is paid-plan only per Figma's launch post and Config India summary. Figma's beta features page also lists Starter and Education, so check what your own account shows.
• Agent integration depends on MCP. A spec link pasted into an agent that isn't connected to the Figma MCP server gives it nothing useful.
• Cost after November 4 isn't predictable yet. Credits vary by task complexity, and there's no published per-task rate.
• Code sources (your real components inside Figma) is still closed beta, so code layers may not match your design system perfectly yet.
• A code layer is a prototype, not your production code. Treat it as a reference for behaviour, and let your own repo stay the source of truth.

When a screenshot is still fine

Not every change needs a spec:

• One-off visual tweaks, like spacing, colors or copy on a single screen.
• Bug reports where you're showing what's wrong, not defining what's right.
• Throwaway prototypes and landing pages you'll rewrite anyway.
• Projects where you're the only designer and developer and the decision fits in one sentence.

Reach for a spec when a feature has multiple states, touches shared components, or you'll come back to it in a month and need to remember why.

Quick checklist

• Check whether the Code icon and Spec option have appeared in your account.
• Before November 4, build one stateful screen as a code layer while it's free to edit.
• Connect your coding agent to the Figma MCP server.
• Write one feature spec with embedded frames and a "Done means" section.
• Hand the spec link to your agent and compare with your screenshot workflow.
• Note your credit usage so you can decide whether to keep using code layers after the free period.

If you're wiring AI coding agents into a small product team's design-to-code flow and want a second pair of eyes, get in touch.

About the author: Muhammad Tayyab is a full stack and mobile developer based in Lahore. He builds DripScore, an AI outfit rating app live on the App Store, under dawnapps.co. Find him on GitHub, LinkedIn, and X, or say hello at /#contact.

Sources

• Here's everything from Config India 2026 — Figma Forum (Oct 15, 2026)
• What's new from Config India 2026 — Figma Learn
• Introducing Specs: Markdown As a Medium — Figma Blog
• Guide to Specs in Figma — Figma Learn
• Code layers in Figma Design — Figma Learn
• What Figma features are in beta? — Figma Learn
• Guide to the Figma MCP server — Figma Learn