Defines component properties, variants, states, combinations, and naming before implementation.
---
name: figma-variant-matrix
description: "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 |
|---|---|---|… load the full skill through Skill Me