Skills
.Work. You
Rest

figma-variant-matrix

Official

Design complete Figma variants before you build.

Design & Creative#design system#figma#interaction design#token mapping#component states#ui planning#variant matrix
Authorspontus-reach
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents late discovery of missing component variants and states after a UI has already been used across multiple screens.

Core Features & Use Cases

  • Variant planning for Figma properties: Defines component variant properties (e.g., type, size, state, icon slot) and organizes the full combination space.
  • State deltas and layer guidance: Specifies what changes per state (hover, active, disabled, loading, error) and encourages layer-level changes rather than broad opacity tweaks.
  • Implementation-ready structure: Produces an anatomy breakdown and token mapping so the component can be built consistently in a design system.

Quick Start

Ask for a complete Figma variant matrix by providing the component name, its purpose, the platform, and whether it’s standalone or part of an existing design system.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-variant-matrix
Download link: https://github.com/spontus-reach/spontus/archive/main.zip#figma-variant-matrix

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.