figma-variant-matrix

Original：🇺🇸 English

Translated

Define component variants and states systematically for Figma. Use when asked to plan component variants, define states for a component, set up a Figma variant matrix, or work out what properties a component needs before building it. Produces a complete variant matrix with all properties, values, and combinations needed.

5installs

Sourcemohitagw15856/pm-claude-skills

Added on2026-05-31

NPX Install

npx skill4agent add mohitagw15856/pm-claude-skills figma-variant-matrix

SKILL.md Content

View Translation Comparison →

Figma Variant Matrix Skill

Defines all variants, properties, and states a component needs before building it in Figma — preventing missing variants discovered after the component is already used across 40 screens.

Required Inputs

Component name (Button, Card, Input, Badge, Navigation item, etc.)
Component purpose (what does it do, where is it used?)
Platform (iOS / Android / Web / Multi-platform)
Design system context (standalone / part of existing system)

Output Structure

1. Component Overview

Name, category (Interactive/Display/Layout/Form/Navigation/Feedback), used in contexts.

2. Variant Properties

Property	Values	Notes
Type	Primary, Secondary, Tertiary, Destructive
Size	Large, Medium, Small
State	Default, Hover, Active, Disabled, Loading
Icon	None, Leading, Trailing, Only

Total combinations: [N]. Flag if over 50 — consider splitting into multiple components.

3. State Definitions

For each state, list only what changes from Default:

Default: [Full visual spec]
Hover (web): [Delta from default]
Active/Pressed: [Delta]
Disabled: [Delta — use layer-level properties, not opacity on whole component]
Loading: [What replaces label, interactive during loading?]
Error (forms): [Border colour, helper text, icon changes]

4. Anatomy Breakdown

Layer name	Purpose	Required?	Notes
container	Background and bounds	Yes
label	Text	Conditional	Hide when icon-only
icon-leading	Leading icon slot	No

5. Token Mapping

Property	Token	Fallback
Background default	color.brand.primary	#hex
Border radius	radius.medium	8px

6. Build Order

Default state, most common variant
Convert to component, add properties
Size variants
State variants
Type variants
Icon slot variants last

Quality Checks

All interactive states defined
Total variant count calculated, flagged if over 50
Every layer named semantically
Token mapping covers all visual properties
Disabled state uses layer-level properties not opacity

Example Trigger Phrases

"Define the variants for a [component] in Figma"
"What states does my [component] need?"
"Help me plan the variant matrix for [component]"
"Set up the Figma properties for a [button/card/input]"
"What are all the combinations I need for my [component]?"