Skip to main content
Color annotation specs document which design tokens are used for backgrounds, text, icons, and state layers across different component states and variants.

​
What you need

  • A Figma link to the component
  • Any additional context about variants, states, or which color modes to include
If your component uses Figma variable modes for color variants (e.g., a “Tag color” collection with Default, Success, Warning modes), mention it in your prompt. The agent checks for these automatically, but calling them out helps.

​
When to use

Create a color annotation when you need to document:
  • Which color tokens each UI element uses
  • How colors change across states (enabled, hover, pressed, disabled)
  • Token usage for different variants (default, danger, etc.)
  • Color tokens for variable-mode-controlled variants (like tag colors or badge styles)

​
What the agent generates

The agent inspects your component’s fills, strokes, and variables, then maps every color-bearing element to its design token.

​
How the output is organized

The structure depends on your component type:
Components without interactive states (headers, cards, labels) get a single table mapping each element to its token.
Light and dark themes don’t need separate documentation. Semantic tokens handle theme switching automatically.

​
Example prompts

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

This is a section heading with a title, subtitle, and optional trailing action.

​
Tips for better output

  • List all states: enabled, hover, pressed, disabled. The agent maps tokens per state
  • Mention color variants: if your component has Default and Danger (or similar), describe both
  • Call out variable mode collections: if color is controlled by a Figma variable collection (e.g., “Tag color” with Default, Success, Warning, Error modes), name the collection and its modes in your prompt. The agent checks for these automatically, but explicit mention ensures nothing is missed
  • Note sub-components: if your component contains another component (e.g., a Button inside a Section heading), the agent references it instead of duplicating its tokens