Autospec

AutoSpec - Generate your design specs automatically

Autospec reads your Figma layers and generates formatted documentation frames right next to your components. It literally turns any of your components into fully documented in one click.

Features

1. Instantly convert frames and components into structured spec layouts
2. Automatically numbers layers, adds highlight overlays, and builds a complete legend
3. Includes fill, stroke, typography, sizing, spacing, corner radius, and bound variables
4. Documentation appears right beside your design, fully visual and editable
5. Detects and displays Figma variables and styles
6. Organized, readable spec frames built for clarity and handoff
7. One-Click Generation where you just Select, generate, and document instantly

What's available now

Anatomy where you can Select any frame or component and Autospec numbers every layer, draws highlight overlays, and builds a full legend card showing fill, stroke, type, sizing, spacing, corner radius, and any bound Figma variables

Coming next

1. Measure : dimension lines and spacing tokens for every auto-layout container
2. Properties : a visual prop sheet for every component property and variant
3. Property Table : a scannable table of props, types, and default values for dev handoff

How it works

1. Select a layer or component on the canvas
2. Pick a doc type
3. Hit Generate - BOOOOM.

Built for designers who ship to engineers. Free to use.