0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Documentation

Autospec Docs

Everything you need to know about installing, using, and getting the most out of Autospec.

Quick Start

Getting Started

1

Install the plugin

Open Figma and go to the Community tab (or press ⌘/ to search). Search for Autospec and click Install.

Direct install link
2

Open the plugin

In your Figma file, go to Main Menu → Plugins → Autospec, or right-click on the canvas and choose it from the context menu. The plugin panel will open at 400 × 620px.

3

Select a layer

Click any layer, frame, component, or instance on the canvas. The plugin panel will update to show the selected layer's name, type, dimensions, and property count.

Autospec works on any layer type — components, instances, frames, groups, text, vectors, and more.
4

Choose a doc type and generate

Pick the documentation type you want (currently Anatomy is available). Optionally adjust the brand color and theme, then click Generate. A fully annotated spec frame will appear next to your selected layer on the canvas.

You can generate multiple doc types in a row for the same component — Autospec places each new frame next to the previous one automatically, keeping your canvas tidy.
Anatomy

Component Anatomy

Anatomy walks your layer tree, places numbered markers on every meaningful element, and builds a legend card with design properties for each.

What gets annotated

Autospec only annotates layers that carry design meaning. Rules:

Layer Type
Behaviour
Notes
INSTANCE
Annotate → stop
Never recurses inside instances. Component properties are captured.
COMPONENT
Annotate → stop
Property definitions captured from componentPropertyDefinitions.
TEXT
Annotate → stop
Font family, size, weight, alignment, and line height captured.
VECTOR / SHAPE
Annotate → stop
Rectangle, Ellipse, Polygon, Star, Line, Boolean Operations.
FRAME (styled)
Annotate + recurse
Frames with fills, strokes, corner radius, or effects are annotated AND their children are also walked.
FRAME (plain)
Skip → recurse
Transparent structural wrappers are skipped but children are still walked.
GROUP
Skip → recurse
Groups with opacity < 1 or effects are annotated; plain groups are skipped.

Properties in the legend

When present, the legend shows:

Fill Colors
All visible solid / gradient fills with hex values and variable names
Stroke Colors
Stroke paints and weight
Corner Radius
Uniform or mixed per-corner values
Effects
Drop shadows, inner shadows, blur
Font Family
Font family and weight for TEXT layers
Font Size
Computed font size
Text Align
Horizontal alignment
Layout Mode
Horizontal or Vertical auto-layout
Padding
Top / Right / Bottom / Left padding values
Gap
Item spacing between auto-layout children
Width / Height
Absolute dimensions
Design Tokens
Variable / style names resolved for all properties
Component Props
Variant, Boolean, Text, Instance Swap values
Opacity
Layer opacity when less than 100%

Marker placement

Autospec places markers with a collision-avoidance algorithm. For each layer it tries all four corners (Top-Left, Top-Right, Bottom-Right, Bottom-Left) in order. If all four are occupied, it nudges outward in rings until a free cell appears.

Hidden layers are skipped by default. Enable Show hidden layers in the plugin panel to include them.
Measure

Spacing & Measure

Measure finds every auto-layout frame in your selection and generates a spacing card for each, with color-coded overlays and a property panel.

Color coding
Blue — Padding
Top, Right, Bottom, Left insets. Semi-transparent blue overlay.
Orange — Gap
Item spacing between auto-layout children.
Blue outline — Element
Solid blue border marks the element bounding box.
Purple — Corner Radius
Radius value per corner.
One card per auto-layout frame. Select a nested component and you get a card for every layout container inside, stacked vertically.
Properties

Properties

The Properties doc type generates one card per component property, each containing a visual preview panel that shows the actual component rendered for every possible option — side by side, with the active value highlighted.

How it works

1

One card per property

Each Variant or Boolean property gets its own card. The card header shows the property name, type badge (e.g. VARIANT), and a count of available options.

2

Property panel (left side)

Shows Name, Type, Default value, and total option count under a PROPERTY section. Below that, an OPTIONS section lists every option with a dot indicator — the current/active value is highlighted with a "current" badge.

3

Live visual previews (right side)

Autospec clones the component once per option and applies each prop value. Clones go in preview cells with label pills. The active value gets a branded highlight.

Which properties get previewed

Property Type
Visual Preview
Notes
VARIANT
Yes
Renders a clone of the component for each variant option side by side.
BOOLEAN
Yes
Renders True and False states. Boolean dots use green/grey to show on/off.
TEXT
Value only
Shows the default text content in a plain panel — no component clone.
INSTANCE SWAP
Value only
Shows the resolved instance name — no live preview.
Run Properties on a Component Set (the purple frame with all variants) to get one card per variant group, each with all options visualised.
Property Table

Property Table

Property Table generates a one-page API overview: all component properties in a compact table.

Supported property types

Type
Badge
Description
VARIANT
VARIANT
Named variant options (e.g. Primary, Secondary, Ghost). Shows all accepted values as chips.
BOOLEAN
BOOLEAN
On/off toggle properties. Shows true or false with the default value.
TEXT
TEXT
Editable text content properties. Shows the default string value.
INSTANCE SWAP
INSTANCE SWAP
Swappable nested instance slots. Shows the currently assigned instance name.
Instance Swap shows the swapped component name (e.g. "Arrow Right"), not the raw node ID.
Customisation

Branding & Theming

Match generated spec frames to your design system.

Brand Color

Pick from 5 built-in palettes (Neutral Grey, Purple, Ocean Blue, Forest Green, Sunset Orange) or use the custom color picker to enter any hex value. The brand color controls marker bubbles, item header accents, and highlight overlays.

Light / Dark Mode

Toggle between light and dark output modes. Light mode uses a #FBFBFB page background; dark mode uses #111114. All surfaces, text, and borders adapt automatically.

Label / Logo

Add a text label to the frame header (e.g. "Design System" or "Acme Corp") to brand your specs.

Settings are persisted per Figma file. You only need to configure them once per project.
Tips

Tips & Tricks

1

Select the outermost frame or component

Autospec skips annotating the root layer and annotates all children. Selecting a top-level frame gives the full tree.

2

Use meaningful layer names

The legend shows each layer's name. "Button / Icon" or "Badge / Label" beats "Frame 42" for developer handoff.

3

Bind design tokens before generating

Attach tokens to fills, padding, or typography first. The legend will show token names (e.g. color/primary) instead of raw hex.

4

Generate back-to-back

New frames land next to your selection. Generate one doc type, then another within 15 seconds and Autospec stacks them adjacent.

5

Dedicated Specs page

Create a "Specs" page and move generated frames there. Keeps design pages clean.

6

Show hidden layers

Components with conditional hidden layers (e.g. loading spinners) need this option enabled to include them in the annotation.

Feedback

Figma Community plugin page.

Open on Figma