Skip to main content
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.
SectionWhat it covers
Component structureParts breakdown with required vs. optional elements
TypeStyle and color variant matrix (e.g., Primary × Default, Secondary × Danger)
Interactive statesState matrix across variant styles
Size variantsDimensional options with default indicated
Shape variantsForm factor options (rectangular, rounded)
Density variantsSpacing options (compact, default, spacious)
Width variantsFill vs. hug behavior
Background contextComponent on different surface colors
Tap / click targetTouch and pointer accessibility minimums
Overflow behaviorTruncation 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

@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).

​
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