How do I install the Figma Variant Matrix skill?

Run npx skillmds@latest add majiayu000/figma-variant-matrix in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Variant Matrix safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Variant Matrix?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Variant Matrix free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Variant Matrix?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Variant Matrix by majiayu000 — Agent Skill

Name: Figma Variant Matrix
Rating: 4.5 (4 reviews)
Author: majiayu000

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.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

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]?"

---name: figma-variant-matrixdescription: 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.--- # 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 1. Default state, most common variant 2. Convert to component, add properties 3. Size variants 4. State variants 5. Type variants 6. 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]?"

Frequently asked questions