Step 1: Write your prompt
Every prompt follows the same format:Example prompt
Available skills
| Skill | What it generates |
|---|---|
@create-anatomy | Numbered markers on a component with an attribute table |
@create-property | Variant axis and boolean toggle exhibits with instance previews |
@create-voice | Screen reader specs for VoiceOver, TalkBack, and ARIA |
@create-color | Color token annotations for all elements and states |
@create-api | Property tables with values, defaults, and examples |
@create-structure | Dimensional specs for spacing, padding, and sizing |
@create-changelog | New changelog with initial entries |
@update-changelog | Append entries to an existing changelog |
@convert-changelog | Extract an existing Figma changelog to JSON |
Step 2: Watch it render
The agent renders the documentation directly in your Figma file:If a documentation frame appears in your Figma file, your setup is working correctly.
Result
The agent creates a documentation frame with:- Component name and guidelines
- Formatted tables and properties
- Placeholder areas for component previews
Tips for better output
Be specific about states
Mention all states (selected, disabled, expanded) in your prompt. The agent cannot infer states that aren’t visible in the current Figma frame.Describe the parts
For complex components, describe the interactive elements:- “This is a tooltip. The bell icon triggers it, and the bubble appears on hover and focus.”
- “This is a tab bar with 3 tabs. Only one can be selected at a time.”