Skip to content

Specs as your component canon — change after change

Compact, complete, and schema-valid specs by plugins, commands or LLMs as the record engineers, agents, and pipelines build from
Composite view of the Specs plugin in Figma: the plugin UI panel alongside a generated on-canvas spec output and the structured spec data it extracts.

Review and verify specs on Figma’s canvas

Use the Specs 2 plugin to create specs on the canvas — styled your way and tuned to your library’s conventions.

Run commands in LLM chats, agents, and pipelines

Generate – and regenerate – an entire library in a minute that feeds specs, code and more data into your agentic workflow

A system to synchronize your design intent

When every surface from prototype to production reads from one record, change stops being a handoff and starts to become sync.

Diagram of the Specs workflow across three columns: Design, Specs, and Code. A legend distinguishes generated steps, shown in orange, agentic inference, shown in blue, and human-authored content, shown in yellow. On the left, the Design column holds Figma and a React prototype. Orange generated arrows labeled Plugin and fetch + generate carry Figma data into the central Specs column, and an orange render arrow returns from Specs to Figma, indicating specs can also be written back into Figma. The Specs column stacks four artifacts: api.yaml (partly human authored), variants.yaml, examples.yaml, and supplement.md (human authored with agentic input). Blue agentic arrows loop between the prototype and Specs, showing agents working against specs while prototyping. On the right, an orange arrow leads from Specs to generated code — CSS, contract, and TSX scaffold — which feeds a React prototyping kit and, via a dashed line, the Code column. Blue agentic arrows fan out from Specs directly to React, Android, and iOS libraries, representing agents and engineers building production libraries straight from spec data. Below, an orange arrow leads from Specs to analysis and monitoring covering tokens, props, slots, graphs, and more.

Computation over inference

Don’t start agents prematurely. Extract from Figma faster, cheaper, and more reliably - over and over.

Specs ecosystemAgentic Figma extraction
Speed~1 sec (CLI) / ~10 sec (Plugin) per component~5–10 minutes per component
AI costScripts require 0 AI tokens25/50/100,000+ tokens per component
RepeatabilityDeterministic, mechanicalInference errors, gaps, and overconfidence
OutputSchema-valid YAML/MD, ideal for testing & versioningUnstructured Markdown means unpredictable verification
PlatformsSchema-based, x-platformGuessing your intents

Every layer and property accounted for

A single spec records everything in Figma about a component, deterministic and compact.

Robust at the core, extensible at the edges

Blend determinism with adaptability to generate specs based on how your system works.