What you get
Variant axis exhibits
One section per axis (e.g., Size, Hierarchy) with instance previews for every option.
Boolean toggle exhibits
On/off states shown side by side with defaults labeled.
Variable mode properties
Shape, density, and other variable-mode properties rendered as visual chapters.
Child component chapters
Nested component properties shown in-context on parent instances.
What you need
- A Figma link to a component set or standalone component
- Figma Console MCP connected via the Desktop Bridge plugin
How to use
Reference the skill and paste your Figma link:Custom destination
Place the annotation in a different file or page by adding a destination link:What it generates
| Output | Description |
|---|---|
| Variant axis exhibits | One section per axis with instance previews for every option |
| Boolean toggle exhibits | On/off states shown side by side |
| Variable mode exhibits | Shape, density, and other variable-driven properties |
| Child component chapters | Nested component properties rendered on parent instances |
| Default labels | The default value for each property is labeled |
componentPropertyDefinitions from the component set, so the output adapts to any component regardless of how many properties it has.
How it works
Extract
The skill reads
componentPropertyDefinitions, variantProperties, and child layer data from the component set via the Console MCP.Detect variable modes
Variable collections (shape, density) are identified by looking for collections named after the component.
Discover child components
Nested component instances are resolved to find their own configurable properties (variant axes, booleans, instance swaps).
Normalize
Coupled axes, container-gated booleans, unified slots, and sibling booleans are consolidated to avoid redundant exhibits.
Import template
The property documentation template is imported from the library, instantiated, and detached into an editable frame.
Render
The skill fills header fields, clones chapter sections, creates component instances for visual exhibits, and labels defaults.
Tips for better output
- Use component sets: The skill expects a component set (the dashed-border container in Figma) or a standalone component, not an instance
- Check variant coverage: If a variant axis like “Hierarchy” doesn’t have variants for every combination of other axes, the skill finds the closest available match automatically
- Name your layers: Descriptive layer names help the skill correctly discover and label child component properties
- Variable modes: If your component uses variable modes (e.g., shape or density collections), the skill detects and renders them automatically