Select a component in Figma and generate a beautiful, annotated spec frame. Anatomy, spacing, colors, typography, and variants — all documented instantly.
Features
Five spec sections that cover what engineers actually ask about. All generated from the component itself — no manual work.
Numbered callout labels for every layer in the component. Engineers see exactly what each piece is called.
Width, height, padding, and gap values with visual overlays. Token names shown when available.
Every fill and stroke color extracted with hex values and variable/token names from your design system.
Font family, weight, size, line-height, and letter-spacing for every text layer. Style names included.
Property matrix and thumbnail grid for every variant in a component set. Choose which variant axes to include with the axis picker — no more massive output for complex components.
How It Works
No configuration files, no setup wizards. Just select and generate.
Click any frame, component, instance, or component set on your canvas.
Toggle which sections to include: anatomy, spacing, colors, typography, variants. Pick a theme.
Hit the button. A fully annotated spec frame appears right on your canvas, ready for handoff.
Free vs Pro
The free tier covers the essentials. Pro unlocks the full toolkit for teams shipping design systems.
Pricing
No per-seat fees. One license covers all your Figma files. Annual saves you 22%.
Cancel anytime
Just $6.25 / mo — billed annually