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.

▶ Run it free in the Playground View SKILL.md ↗

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

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

Related skills

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