Plugin for designers in Figma
- Visualize stling on-canvas in complete detail
- Sections for anatomy, props, layout, modes, styles
- Copy/paste spec data into LLMs
- Customize output for styling and layout
- Configure advanced settings for extracted data
Specs from Figma, repeatable and fast
Turn Figma components into compact, complete, schema-valid specifications — one structured source of truth that engineers and AI agents build on across web, iOS, and Android.
Generate specs your way
Commands for LLM chats and pipelines
- Quickly setup and fetch data
- Generate 50 component specs in <1 minute
- Configure files, formats, and data
- Leverage data for analysis and inference
- Architect for continuous integration
Computation over inference
Extracting a spec is mechanical: enumerate the variants, diff the styles, record what changes. That’s a job for computation, not guesswork — which is why Specs is faster, cheaper, and repeatable where pointing an agent at raw Figma is none of those.
| Specs ecosystem | Agentic Figma extraction | |
|---|---|---|
| Speed | ~1 sec (CLI) / ~10 sec (Plugin) per component | ~5–10 minutes per component |
| AI cost | Scripts require 0 AI tokens | 25/50/100,000+ tokens per component |
| Repeatability | Deterministic, mechanical | Inference errors, gaps, and overconfidence |
| Output | Schema-valid YAML/MD, ideal for testing & versioning | Unstructured Markdown means unpredictable verification |
| Platforms | Schema oriented towards x-platform concepts | Interprets and infers intents |
Every layer and property accounted for
A single spec records the whole component — not a sample. Every part below is extracted deterministically and kept compact.
Anatomy Every element by type, structured consistently across variants
Props All properties with every explicit per-variant difference detected
Styling Token references, named styles, typography, and effects
Layout Element hierarchy and flex vs. absolute positioning per variant
Bindings Prop bindings driving content, instances, and conditionals
Subcomponents Subcomponents discovered from your naming conventions
Slots Where nested content composes and its per-variant defaults
Ready-made examples Pre-configured usage examples detected straight from your file
Assets Icon glyphs precisely distinguished from nested instances
Robust at the core, extensible at the edges
Specs is built to handle whatever a real component library throws at it — and to bend to how your system works: variant explosions, slot rules, hidden props, custom naming, and more. New here? Start with Variant Layering — it’s the idea that keeps every spec compact.
Variant Layering Compute layered styling like CSS rules
Variant Depth Control how many variant dimensions expand
Data Layout Shape how hierarchy appears in output
Consolidating Props Merge a toggle and its content into one prop
Code-Only Props Pull non-visual props from hidden layers
Instance Examples Detect ready-made, pre-configured usages
Default Slot Content Reuse default slot content as examples
Slot Constraints Set quantity and content-type slot rules
Subcomponent Scoping Discover, match, and exclude subcomponents
Invalid Variant Combinations Mark unsupported variant combinations
Key Formatting Normalize property and element names
Layout Positioning Map Figma constraints to positioning