Chapter 5 › Lesson 21

21. Create Multi-Property Variants

Skills: Component with two variant properties (e.g. Size + State); Small, Medium, Large sizes; Default, Disabled states; Combined variant matrix (3 sizes × 2 states = 6 variants)

A component can have multiple variant properties — for example, Size (Small / Medium / Large) × State (Default / Hover / Active / Disabled). This creates a variant matrix that gives you full control over every combination.

Step-by-step

1. Create a simple button component: a rounded rectangle with text inside, enabled with Auto Layout
2. Press Ctrl + Alt + K to make it a component
3. In the Properties panel, click the + icon next to Variant. Create a property called "Size" with values: "Small", "Medium", "Large"
4. In each size variant, adjust the button dimensions and text size. Small: 32px tall. Medium: 44px tall. Large: 56px tall
5. Now add a second variant property. Click the + icon again. Create a property called "State" with values: "Default", "Hover", "Active", "Disabled"
6. Figma generates a matrix of all combinations (3 sizes × 4 states = 12 variants). Click each cell to edit it
7. Default: normal fill. Hover: slightly lighter fill. Active: darker fill. Disabled: grey fill, reduced opacity
8. Adjust text colour per state if needed (e.g. white for Default, light grey for Disabled)
9. Rename variant cells with meaningful names (e.g. "Small/Default", "Large/Disabled") for clarity
10. Test by creating an instance and changing the Size and State properties independently