Variant matrix organization in Figma - Step-by-Step Guide

Introduction

Variant matrix organization helps you arrange multiple design options clearly. It solves the problem of comparing different styles or states side by side in one view.

When you want to show button styles with different colors and sizes together

When you need to present icon variations with different fills and strokes

When you want to organize text styles with various weights and sizes for easy comparison

When you create a design system and want to display all component states in one place

When you want to quickly switch between design options during review

Steps

Step 1: Select the component with variants

- Layers panel or canvas

The component and its variants are highlighted

💡 Make sure your component has variants grouped before organizing

Step 2: Click the 'Variants' section in the right sidebar

- Properties panel

You see all variant properties and their values listed

Step 3: Click the 'Organize variants' button

- Variants section in the Properties panel

A matrix layout editor opens showing variant properties as rows and columns

Step 4: Drag variant property names to reorder rows or columns

- Matrix layout editor

The variant matrix updates to reflect the new organization

Step 5: Drag variant values within rows or columns to reorder them

- Matrix layout editor

The variant cells rearrange according to the new value order

Step 6: Click 'Done' to apply the matrix organization

- Matrix layout editor

The component variants on the canvas are arranged in the new matrix layout

Before vs After

Before

Variants are stacked vertically in a single column with no clear grouping

After

Variants are arranged in a grid matrix showing property values as rows and columns for easy comparison

Settings Reference

Variant properties order

📍 Variants section > Organize variants matrix editor

Controls which variant properties appear as rows or columns in the matrix

Default: Properties arranged in creation order

Variant values order

📍 Variants section > Organize variants matrix editor

Controls the order of variant values within rows or columns

Default: Values arranged in creation order

Common Mistakes

Trying to organize variants before creating variant properties

Without variant properties, the matrix editor has no data to organize

Create variant properties and values first, then use the organize matrix feature

Not clicking 'Done' after arranging the matrix

Changes are not saved or applied until confirmed

Always click 'Done' to apply the new variant matrix layout

Summary

Variant matrix organization arranges component variants in a clear grid for easy comparison

You reorder variant properties and values by dragging them in the matrix editor

Remember to create variant properties first and confirm changes by clicking 'Done'