Skip to main content
Structure specs document component measurements such as heights, widths, padding, and gaps, and how those values change across variants like density, size, and shape.

​
What you need

  • A Figma link to the component
  • Figma MCP connected (Console MCP with Desktop Bridge, or native Figma MCP)
  • Any additional context about density modes, size variants, or specific sub-components to include
Tell the agent which variant axes affect dimensions. A button might vary by size, while a list item varies by density. The agent checks both explicit variants and variable mode collections.

​
How to use

Reference the skill and paste your Figma link. Include context about which parts to measure and how dimensions vary across variants: 
@create-structure https://www.figma.com/design/abc123/Components?node-id=100:200

This is a list item with Compact, Default, and Spacious densities. Include
container, leading slot, label, and trailing slot dimensions.
To place the annotation in a different file or page, add a destination link to your prompt: Destination: https://www.figma.com/design/xyz789/Docs?node-id=0-1

​
What it generates

The agent measures your component and renders a documentation frame directly in your Figma file with tables showing how values change across variants.
AspectWhat it covers
Container dimensionsHeights, widths, min/max constraints
Padding and spacingHorizontal and vertical padding, gaps between elements
Sub-component dimensionsSizes for icons, avatars, and other nested elements
Token referencesLinks values to design tokens when they exist
Composition mappingHow parent sizes map to sub-component sizes

​
How tables are organized

Each section covers a part of the component (container, leading content, labels, trailing content). Columns represent variants, either sizes or density modes, so you can see how values change across configurations.
Some dimensional properties are controlled via Figma variable modes (like density) rather than explicit variant axes. The agent checks for both automatically.

​
How it works

The structure skill uses a two-tier architecture: deterministic scripts handle data extraction and rendering, while AI reasoning focuses on interpretation and planning. 60% Deterministic 40% AI Reasoning
1

Extract

Deterministic scripts measure dimensions, padding, gaps, token bindings, sub-components, and cross-variant comparisons via the Figma MCP.
2

Interpret

AI builds the section plan, writes design-intent notes, detects anomalies, and judges completeness.
3

Import template

The structure documentation template is imported from the library, instantiated, and detached into an editable frame.
4

Render

Deterministic scripts fill tables, place preview instances, and add native Figma measurements.
5

Validate

A screenshot is captured and checked for completeness. Issues are fixed automatically for up to 3 iterations.
Roughly 60% of the pipeline is deterministic scripts (extraction, rendering, measurements) and 40% is AI reasoning (section planning, notes, anomaly detection). Output is highly consistent across runs.

​
Tips for better output

  • Specify which parts to include: container, leading content, labels, trailing content, dividers
  • Mention density or size variants: the agent organizes columns based on these. If density is controlled via variable modes (Compact, Default, Spacious), mention the mode names
  • Describe composition relationships: if your component is composed of multiple sub-components (e.g., Text Field = Label + Input + Hint Text), describe how parent sizes map to child sizes
  • Call out sub-components: if a sub-component has its own spec (e.g., Avatar inside a List item), the agent cross-references it
  • Note any state-specific dimensions: some states introduce additional properties (e.g., a focused input gaining an inner border that doesn’t exist in the default state)