Overview

Generate structure, variants, and behavior documentation

Component overview specs describe a component’s structure, visual variants, interactive states, and behavioral guidelines. This gives your team a shared mental model of how a component is built and configured.

What you need

• A Figma link to the component
• A description of variants, states, or behavioral modes that aren’t visible in the current design

The more context you provide, the better the output. Mention all variant axes, interactive states, and any behavioral modes like fill vs. hug or truncation rules.

When to use

Create a component overview when you need to document:

• Component anatomy and structure
• Layout variants (e.g., icon-only vs. with label)
• Style and color variants
• Interactive states
• Size, shape, and density options
• Behavioral modes (fill vs. hug, truncation, overflow)

What the agent generates

The agent evaluates your component and produces sections for each relevant aspect. Only applicable sections appear. A component without size variants won’t include a size section.

Section	What it covers
Component structure	Parts breakdown with required vs. optional elements
Type	Style and color variant matrix (e.g., Primary × Default, Secondary × Danger)
Interactive states	State matrix across variant styles
Size variants	Dimensional options with default indicated
Shape variants	Form factor options (rectangular, rounded)
Density variants	Spacing options (compact, default, spacious)
Width variants	Fill vs. hug behavior
Background context	Component on different surface colors
Tap / click target	Touch and pointer accessibility minimums
Overflow behavior	Truncation and content overflow rules

Some properties like shape and density may be controlled via Figma variable modes rather than traditional variant properties. The agent checks for both automatically.

Example prompts

Interactive control

@create-overview https://www.figma.com/design/abc123/Components?node-id=100:200

This is a button with Primary, Secondary, and Tertiary styles, Default and Danger
colors, and four sizes (Large, Medium, Small, XSmall).

Container

@create-overview https://www.figma.com/design/abc123/Components?node-id=200:300

This is a card component with an optional header, media slot, body content,
and footer actions.

Selection control

@create-overview https://www.figma.com/design/abc123/Components?node-id=300:400

This is a checkbox with unselected, selected, and indeterminate states,
plus enabled, hover, pressed, and disabled interactions.

Tips for better output

• List all states explicitly: the agent can see what’s in Figma, but it can’t infer states that aren’t represented (e.g., loading, expanded, error)
• Mention behavioral modes: fill vs. hug width, horizontal scroll, truncation rules, single vs. multi-select behavior
• Call out multi-dimensional variants: if your component has style × color, say so. The agent combines them into a matrix instead of separate sections. For example: “Primary, Secondary, and Tertiary styles each have Default and Danger colors”
• Note any defaults: which size, style, or variant is the default configuration
• Describe non-visible constraints: tap target minimums, aspect ratios, or overflow behavior that aren’t obvious from the design