figma-variant-matrix
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.
npx skills add mohitagw15856/pm-claude-skills --skill figma-variant-matrix --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Required Inputs
- Output Structure
- 1. Component Overview
- 2. Variant Properties
- 3. State Definitions
- 4. Anatomy Breakdown
- 5. Token Mapping
- 6. Build Order
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-variant-matrix skill do?
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.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-variant-matrix --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.