Figma Specs and Code Layers: What Agents Can Now Do

By Lazar Milicevic · Published November 1, 2026 · 10 min read

You have a design system in Figma, an AI coding agent in your editor, and a handoff process that still runs on screenshots and Slack messages. Figma's October 2026 announcements (Specs, code layers in open beta, an expanded MCP server) are an attempt to close that gap, but "agent-accessible" is not the same as "reliable." This post covers what shipped, what it costs, where the facts are still disputed, and how to wire it into a pipeline that doesn't fall over.

What Figma actually announced

Figma announced Figma Specs, a Markdown-based editor for defining a company's design language, at its first Config event in India. Teams and agents can use it as a reference. Code layers also moved from private beta to open beta. Source: TechCrunch

Here is the short version of each piece:

Statuses come from Figma's "What's new from Config India 2026". Figma also said it supports more than 20 new tools through its MCP, though reports disagree on which partner tools were named, so check Figma's MCP docs for the current client list rather than trusting any single news recap.

Timeline: code layers were first announced at Config on June 24, 2026, and the open beta launch came with the Config India event in mid-October 2026.

The strategic point is the one that matters for anyone running a small business: Figma is not building one agent. It's defining how agents, including ones you bring yourself, behave inside its platform. That's the same pattern we keep seeing across SaaS. The product becomes a surface that agents read and write to, and the vendor ships controls to make that less chaotic.

Specs: giving agents rules instead of vibes

Specs is a Markdown file that holds your design language. It can be a standalone file or sit inside the canvas, where you can reference canvas elements and embed FigJam diagrams, code layers, and designs. Teams can also attach design libraries, code libraries, and guidelines to manage design-system context, and agents refer to that centralized system to follow the rules. Source: TechCrunch

Why this matters: the usual failure mode of design-to-code agents is that they invent. They pick a gray that's close to your gray, a spacing value that looks right, a button variant that doesn't exist. A spec is the text an agent reads before it improvises.

Figma is candid about the limits. Because AI is non-deterministic, the tools are meant to steer the agent toward more predictable outcomes. The goal is predictability, not guaranteed adherence. Design your process on that assumption. A spec reduces drift; it does not remove the need to check output.

What to put in a spec

A spec that works for agents looks different from a brand PDF. Write it the way you'd write a README for a new contractor who can't ask questions:

# Design Spec: Acme Billing App

## Tokens
- Use color variables from the "Acme/Core" library only. Never hardcode hex.
- Spacing: multiples of 4. Section gaps use `space-6`, form field gaps use `space-3`.

## Components
- Primary actions use `Button/Primary`. One primary action per screen.
- Destructive actions use `Button/Danger` and require a confirm step.
- Never create a new component if one exists in the library. Search first.

## Layout
- Max content width 1120px. Mobile breakpoint 640px.
- Tables use `Table/Dense` for lists over 20 rows.

## Out of scope for agents
- Do not edit the "Brand" page.
- Do not rename or delete library components.

Notes from building this kind of context file for agent workflows:

• State prohibitions explicitly. Agents follow "never hardcode hex" better than "prefer tokens."
• Name real library items. Vague guidance produces vague output.
• Include an "out of scope" block. It's your cheapest permission control.
• Keep it short. A 40-page spec gets skimmed by the model just like it gets skimmed by humans.

Reading and writing specs from your own agent

Figma's MCP docs list a figma-spec skill that lets an agent read, create, and update Specs. Writing to a spec requires the remote MCP server and edit access. Source: Figma MCP server developer docs

One caveat on availability: sources disagree on which plans get Specs. Check your own account and Figma's current help center before building a workflow around it.

Code layers: prototypes that actually run

A code layer is, per Figma's help center, an interactive prototype backed by running code that sits directly on the canvas. You can ask the agent to turn a design into code or to change part of the code. It's rolling out gradually, so access differs by account. When it's available, a Code icon appears in the Figma Design toolbar. Source: Code layers in Figma Design

Availability per Figma's help center: open beta on all plans (Starter, Professional, Education excluding K-12, Organization, Enterprise), and editing requires edit access. Figma lists it as available on all plans, but check your own account to confirm what your seat can do.

The cost clock: November 4, 2026

This is the detail most recaps will bury. Code layers use AI credits in the open beta, but creating and editing inside code layers is free on paid plans through November 4, 2026. After that, all code layer tasks use AI credits like other agentic AI features. Other agent work in the same prompt still consumes credits. Source: What's new from Config India 2026

Today is November 1, so if you want to evaluate code layers on paid-plan terms, you have a few days left. Check Figma's current AI credit documentation for how code layer tasks are metered, and treat any per-task numbers you see elsewhere as unofficial.

For budgeting, here are the official monthly credit allowances:

Credits reset monthly and don't roll over. Source: Updates to AI Credits in Figma Add-on credit pricing has changed since that blog post was written, so check Figma's current pricing page before quoting any add-on price.

A practical rule: once the free window closes, run a one-week trial with a small pool of designers, record how many credits a typical prompt-to-prototype cycle burns, and extrapolate from your usage. That beats any third-party estimate.

The MCP server: how outside agents plug in

The Figma MCP server gives AI agents design context to generate code from Figma files. It also lets agents write native Figma content back to the canvas, across Figma Design, FigJam, and Figma Slides. Source: Figma MCP server developer docs

Key facts for setup:

• Endpoint: the remote server is at `mcp.figma.com It needs no desktop app, and you sign in with a Figma account the first time you connect. Source: Get started with the Figma MCP server
• Writing needs more: writing to the canvas requires the remote server and a Full seat to write outside your drafts.
• Pricing: free during the beta, and it will eventually become a usage-based paid feature.
• Clients: the docs list Claude Code, Claude Desktop, Codex, Cursor, VS Code, Copilot CLI, Dia, OpenCode, Linear, Meta Muse, and others.

Here's a minimal config pattern for a client that reads a remote MCP server from a JSON file. The exact schema varies per client, so follow your client's docs:

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

With Claude Code, add the remote Figma MCP server following the Claude Code MCP documentation, then authenticate in the browser on first use. Check the current Claude Code and Figma docs for exact steps, since both tools change often.

Metering and limits

Most MCP tools don't use AI credits. generate_image and send_prompt do. Each use_figma tool call can return up to 20 KB of output. The send_code_to_figma tool can bring a code project into Figma as a code layer or a Figma Make file. Source: Figma MCP server FAQs

Separately, a third-party pricing guide reports rate limits measured in tool calls, with different caps per plan. That comes from uxmagic.ai, not Figma, so verify the actual limits against Figma's docs before you design around them. The practical takeaway holds either way: a chatty agent loop can hit call limits fast. Batch your reads, cache design context locally, and avoid re-fetching the whole file on every step.

A design-to-dev pipeline that doesn't drift

Here's a pipeline shape that uses these pieces without trusting any single one too much. It's built around the assumption Figma itself states: outcomes are steered, not guaranteed.

1. Spec first. Maintain a single design spec in Figma Specs. Version it. Someone owns it.
2. Agent reads spec + design. Your coding agent connects through the MCP server and pulls the spec and the target frame as context.
3. Agent generates code in a branch. Never on main. Output goes to a pull request.
4. Automated checks gate the PR. Lint for hardcoded colors and off-scale spacing; run visual regression against the design export.
5. Human reviews the diff. For a small team, this is a 5-minute review, not a rebuild.
6. Optional round trip. Use send_code_to_figma to push the running build back as a code layer so designers can react to the real thing.

Step 4 is where most teams under-invest. A simple token-drift check catches the most common agent error:

import re
import sys
from pathlib import Path

HEX = re.compile(r"#[0-9a-fA-F]{3,8}\b")
ALLOWED_FILES = {"tokens.css"}  # the only place raw hex may live

def check(root: str) -> int:
    violations = 0
    for path in Path(root).rglob("*.css"):
        if path.name in ALLOWED_FILES:
            continue
        for lineno, line in enumerate(path.read_text().splitlines(), 1):
            if HEX.search(line):
                print(f"{path}:{lineno}: hardcoded color -> {line.strip()}")
                violations += 1
    return violations

if __name__ == "__main__":
    sys.exit(1 if check(sys.argv[1] if len(sys.argv) > 1 else "src") else 0)

Wire that into CI and the spec rule "never hardcode hex" becomes enforced rather than aspirational. Same idea applies to spacing scales and component usage. The spec tells the agent what to do; the check proves it did.

What to leave out of the agent's reach

• Brand and library pages. Put them in the spec's out-of-scope block and use file permissions. Only the second one actually stops anything.
• Production design files. Point agents at a working copy or draft first. Writing outside drafts needs a Full seat, which is a useful speed bump.
• Unbounded loops. Cap iterations per task. An agent that retries 40 times burns credits and call limits for nothing.

What's still unclear (and how to handle it)

Several details are disputed across sources, and I'd rather flag them than guess:

• Plan availability for Specs. Figma's help center and third-party reports conflict. Check your account.
• Per-task credit costs after November 4. Measure your own usage and check Figma's AI credit documentation.
• Payload in Figma Make. Reports about Payload being integrated into Figma Make are inconsistent on timing and availability, so check Figma's current docs.
• The "agent on canvas" rollout. Figma made its agent on canvas available to a wider user base in the week before the announcement, but the number of users with access is unknown.

If a vendor announcement changes your costs or your pipeline, read the help center page, not the news recap. Help-center pages get corrected; syndicated copies don't.

Where this fits for a small team

Figma defining how agents operate on its platform is one more data point in a pattern: every SaaS tool is becoming something an agent can read from and write to. The hard part for a small team isn't any single integration. It's connecting several of them (design, code repo, project tracker, CRM, invoicing) into a workflow that behaves the same way on Tuesday as it did on Monday.

I'm Lazar Milićević, a senior engineer, and I build AI automations for solopreneurs and small teams under the BizFlowAI name.

Work with BizFlowAI

If you'd rather have this built for you, that's what we do: production AI automation for solo founders and small teams — agents, integrations, and document pipelines that actually ship.

Request a free discovery call — 30 minutes, we map the highest-ROI automation in your workflow. No pitch deck, just engineering.

More guides like this on the BizFlowAI blog.