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