Select a component. Autospec creates annotated anatomy diagrams, spacing specs, and property tables for developer handoff.
Select a component, click Generate. Autospec reads every layer and builds complete specification frames directly on your canvas.
Numbered markers on every layer. Legend lists fills, strokes, typography, spacing, effects, and design tokens.
Color-coded overlays for every auto-layout frame: padding, gap, and exact dimensions.
One card per property with live previews of every variant and boolean option.
Compact table of all Variant, Boolean, Text, and Instance Swap properties with types and defaults.
Resolves bound variables and styles. Shows token names (e.g. color/primary) instead of raw hex.
Annotates meaningful layers only: instances, text, shapes. Skips transparent wrappers.
Set brand color and light/dark mode. Generated frames match your design system.
Autospec walks your component tree and annotates each meaningful element. Numbered markers connect to a legend showing fills, typography, layout, spacing, and resolved design token names.
Autospec draws semantic overlays for every auto-layout frame: blue for padding, orange for gap. Exact dimension lines included.
Autospec generates a card per property with live previews of every option. Compare variants without toggling props manually.
Compact table of every Variant, Boolean, Text, and Instance Swap property: name, type, default, and accepted options. For design system wikis and dev handoff.
Click any component, instance, or frame on your Figma canvas. Autospec works with any layer type.
Pick Anatomy, Measure, Properties, or Property Table. Customize brand color and light/dark theme.
Click Generate. A fully annotated spec frame appears next to your component — ready to share.
Install Autospec on the Figma Community. No account required. Open and generate.
Install Free on Figma