How to Make Design Specs in Figma

Most design system teams settle on the same four sections. You can treat this list as a design spec template:

• Anatomy: numbered markers on each part of the component, with a legend describing what each part is and which tokens it uses.
• Spacing and layout: padding, gap, fixed sizes, corner radius and auto layout direction for every container.
• Properties: every variant and boolean option shown visually, so people see what size=sm or hasIcon=false looks like.
• Property table: the component's API in rows (name, type, default, options), which maps closely to the props a developer will write.

Add a short usage note (when to use it, when not to) and accessibility notes if your team writes them. Keep behavior notes for the screens where the behavior happens; Figma annotations are better for those.

Before building specs, check what your developers already get. In Dev Mode, anyone with a Full or Dev seat can inspect a layer's size, spacing and styles, copy code snippets, and see which variables a layer uses. Selecting an instance shows its component properties, and Open in playground lets a developer flip variants and booleans without editing the file. Designers can also add saved measurements (Shift + M) and annotations (Shift + T).

What Dev Mode doesn't produce is a static document. Inspection answers questions one layer at a time, for people with the right seat. A spec frame answers them all at once, for anyone who opens the file, and it can be exported to a docs site.

1. Create a Specs page and a frame for each component, with a header naming the component.
2. Place an instance in the frame. Draw numbered circles next to each part and a legend listing the part name, fill token, text style and radius.
3. Duplicate the instance and draw redlines: semi-transparent rectangles for padding, a second color for gaps, and text labels for each value.
4. Build a table (auto layout rows work well) listing each property, its type, default and options.
5. Lay out one instance per variant option underneath, labeled with the property value.

This works, and it's how most teams started. The problem is maintenance. Rename a token or change a padding value and every spec that mentions it is now wrong, with nothing to flag the drift. A hand-built spec for a button with a few properties takes a while; doing it for a whole library is a project of its own.

Autospec is our plugin for this, and it's free to start. Select a component, instance or frame, pick a doc type, and click Generate. It reads the layer tree and writes a spec frame next to your selection. There are four doc types, matching the template above:

• Anatomy places numbered markers on meaningful layers and builds a legend with fills, strokes, typography, size, padding, radius, effects, gap and variable bindings. Instances, text and shapes are annotated; plain wrapper frames and groups are skipped but their children are still walked.
• Measure creates a card for each auto layout frame with color-coded overlays: blue for padding, orange for gap, plus dimensions and per-corner radius.
• Properties makes one card per property with a live preview of every variant and boolean option, active value highlighted. Text and instance swap properties show their value.
• Property Table lists every Variant, Boolean, Text and Instance Swap property with type, default and options. Instance swaps show the component name, not a node ID.

Because Autospec resolves bound variables and styles, the legend shows color/primary instead of a hex value when the layer uses a token. You can set a brand color, light or dark output, and a text label in the header so specs match your design system. Settings are saved per file.

Generate doc types back to back and Autospec places each new frame beside the last one. Components that hide layers conditionally, like a loading spinner, need Show hidden layers turned on. The Autospec docs cover each doc type in detail, and if you haven't installed a plugin before, see how to install Figma plugins.

Specs (formerly EightShapes Specs), by Nathan Curtis, is the best-known alternative. It generates anatomy, spacing and property specs, detects Figma variables and Tokens Studio tokens, and has a free tier with more features on a paid subscription. It's a good choice for large design systems that want its specific documentation style.

A spec's Properties section shows each option on its own. To see how options combine, such as a small, disabled button with an icon, generate all component variants into a matrix.