What do I need to use Figma Variant Matrix?

Component name; Component purpose; Platform; Design system context.

Is Figma Variant Matrix free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Figma Variant Matrix

Q: How do I know the Figma Variant Matrix output is good?

The skill verifies itself against its own quality checks: All interactive states defined; Total variant count calculated, flagged if over 50; Every layer named semantically; Token mapping covers all visual properties.

🔵 Stable🕐 updated 2026-06-08 🔷 SkillSpec L3 pm-figma

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.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

🗣 Say this to your agent

“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]?”

What to give it

▸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

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓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

⚠️ What it refuses to do

Do not create a variant matrix with properties that overlap or conflict — each property must be independently variable

Do not use opacity for disabled states — disabled states must use layer-level properties, not opacity

Do not enumerate every mathematical combination if many are invalid — document only valid, buildable combinations

Do not define variants without considering responsive behaviour — specify which properties change across screen sizes

Do not produce a matrix without Figma implementation guidance — variant naming conventions must follow Figma's property system

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="figma-variant-matrix"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Figma Variant Matrix is one of 1078 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog