Skip to content
Figma Specs

Open-source Figma plugin for agent-ready specs

Generate Figma specs for Claude Code and Codex without burning too many tokens.

figma-specs converts selected Figma UI into compact, structured YAML so agents get anatomy, layout, tokens, repeats, and less context waste than raw dumps.

Figma canvas with Specs plugin open

Built for coding agents

Claude Code

Claude Code

Token-aware handoff

OpenAI Codex

OpenAI Codex

Deterministic builds

Works for coding languages

Next.jsFlutterReactVueReact NativeHTML/CSS

Token impact

The story we keep hearing: teams start with raw Figma MCP dumps around 80k+ tokens, then move to figma-specs and often work closer to ~20k tokens.

Before (raw handoff)80k+ tokens
After (figma-specs)~20k tokens

Less bloat means more room for actual building, less retry stress, and steadier delivery.

Agent payload

Instead of handing your coding agent a noisy wall of layers, you hand over a clean brief it can follow with confidence.

Before

Scattered context, repeated details, and more guesswork.

After

One compact pack: structure, key details, and repeat patterns in the right order.

AnatomyLayoutTokensRepeats

What you can generate

See flow
Generate Tab screenshot

Generate Tab

Presets and configuration for structured spec output.

Learn Tab screenshot

Learn Tab

Built-in usage guidance so teams ramp quickly.

AGENTS Tab screenshot

AGENTS Tab

Snippet + framework-aware setup for coding agents.

Agent Rules Snippet screenshot

Agent Rules Snippet

Ready-to-paste CLAUDE.md / AGENTS.md rules so your coding agent knows how to consume specs output.

Sample spec: Blog Page

benchmark/blog/specs.md

Real sample handoff from the specs generator: preview on the left, agent-ready excerpt on the right.

Preview

figmaspecs.dev/preview/blog-page
Blog landing page sample

Specs snippet

benchmark/blog/specs.md
1<!-- chars: 55173 | ~tokens: 11533 -->
2## Figma Component: Desktop
3
4### Figma URL
5https://www.figma.com/design/w2W0AS12sA2VhAhVXDawLa/Figma-Specs-Sample-Files?node-id=1-14654&m=dev
6
7### Implementation Instructions
81. Use get_screenshot and save to .figma/desktop.png.
92. Read anatomy tree and YAML specs.
103. Map tokens via resolved_tokens.
114. Keep output minimal and visually accurate.
12
13### Component Anatomy
14- Desktop (FRAME)
15- Dropdown header navigation (INSTANCE)
16- Blog page header (FRAME)
17- Input field (INSTANCE)
18- Row (FRAME)
19- Blog post card (INSTANCE)
20- CTA section (FRAME)
21- Footer (INSTANCE)
22
23### Specs Data (YAML)
24schema: specs-plugin.agent_pack.v14.yaml.compact
25generated_at: "2026-02-12T16:05:11.721Z"
26selection:
27 node_id: "1624:472083"
28 name: Desktop
29 type: FRAME
30summary:
31 anatomy_nodes_total: 155
32 instance_templates: 7
33 deduplicated_instances: 35
34 chunks_total: 9
35resolved_tokens:
36 White: "#FFFFFF"
37 Primary/50: "#F9F5FF"
38 Gray/100: "#F2F4F7"
39chunks:
40 - chunk_id: anatomy_1
41 kind: anatomy
42 item_count: 50
43 items:
44 - node_id: "1624:472083"
45 name: Desktop
46 type: FRAME
47 w: 1440
48 h: 4263
49 - node_id: "1624:472084"
50 name: Dropdown header navigation
51 type: INSTANCE
52 children_text: [Home, Products, Resources, Pricing, Log in, Sign up]
53 - node_id: "I1624:472084;1288:30713"
54 name: Container
55 type: FRAME
56 justify: space-between
57 align: center
58
59# ...excerpted from benchmark/blog/specs.md

The problem, backed by docs

Context windows are finite

Claude documents a 200K token baseline with premium tiers beyond that.

Source: Anthropic

Tokens affect cost directly

OpenAI pricing is token-based, so oversized prompts convert directly into spend.

Source: OpenAI

Dev Mode is handoff-first

Great for humans, but compact deterministic agent payloads still need custom shaping.

Source: Figma

Rate limits are real

Raw repeated extraction can hit seat/plan/endpoint limits in large team workflows.

Source: Figma

Workflow: from selected frame to shipped UI

Three steps. Connected, compact, and clear.

For coding execution, connect Figma MCP so specs can be fetched and consumed directly by Claude Code or Codex.

01

Frame + intent

Select in Figma

Select in Figma workflow panel

02

Compact agent brief

Generate specs

Generate specs workflow panel

03

Claude or OpenAI Codex

Build in agent

Build in agent workflow panel

Specs Plugin architecture in the repo

Orchestration Core

src/code.ts

Coordinates inventory, anatomy collection, layout merge, section rendering, and payload generation.

Anatomy + Dedup

src/plugin/helpers/anatomy-collector.ts

Fingerprint-based repeat detection + diff encoding to avoid sending duplicate structures.

Compact Data Output

src/plugin/sections/data-section.ts

Agent-ready chunked YAML with compact schema and resolved token output.

Safety Limits

src/plugin/limits.ts

Centralized truncation and numeric caps keep payload size bounded.

Plugin architecture and sections preview
src/
  code.ts                 orchestration
  plugin/helpers/*        anatomy + tokens + dedup
  plugin/sections/*       render + payload sections
tests/unit/*              contracts + regression coverage

Open source, so every claim is auditable

Inspect implementation, tests, and roadmap directly from the repo. Ship with confidence, not marketing-only screenshots.

Helpful resources for Figma AI Agents with Claude Code & Codex

Figma MCP

Required when coding so specs can execute through Claude Code or Codex workflows.

Agent Browser by Vercel

Browser automation for validating generated UI and interaction flows.

React Best Practices by Vercel

Performance and architecture guidance for production React apps.

Web Design Guidelines

Practical UI decision framework for design-to-code output quality.

FAQ

Practical answers for teams deciding whether to adopt figma-specs in real shipping workflows.