Variant matrix organization in Figma - Dashboard Guide

Dashboard Mode - Variant matrix organization

Business Question

How can we organize product variants clearly to compare features and options across different models?

Sample Data: Product Variants and Features

Variant	Color	Size	Battery Life (hrs)	Price ($)
Basic	Black	Small	8	199
Standard	White	Medium	10	249
Pro	Black	Large	12	299
Pro Plus	Silver	Large	14	349
Ultra	Silver	Extra Large	16	399

Dashboard Components

• KPI Card: Average Battery Life
  Formula: Average of Battery Life column = (8+10+12+14+16)/5 = 12 hrs
• KPI Card: Average Price
  Formula: Average of Price column = (199+249+299+349+399)/5 = 299 USD
• Variant Matrix Table
  Shows all variants as rows and features as columns for easy comparison.
• Bar Chart: Price by Variant
  Visualizes price differences across variants.
• Bar Chart: Battery Life by Variant
  Shows battery life comparison across variants.

Dashboard Layout

+----------------------+----------------------+
| Average Battery Life |   Average Price      |
|       (KPI)          |       (KPI)          |
+----------------------+----------------------+
|                                              |
|              Variant Matrix Table             |
|                                              |
+----------------------+----------------------+
|  Price by Variant    | Battery Life by Variant|
|      (Bar Chart)     |      (Bar Chart)       |
+----------------------+----------------------+
  

Interactivity

Adding a filter for Color (e.g., only Silver variants) updates:

• KPI Cards: Average Battery Life and Average Price recalculate for filtered variants.
• Variant Matrix Table: Shows only variants with selected color.
• Bar Charts: Display data only for filtered variants.

This helps focus on specific variant groups easily.

Self Check

If you add a filter for Size = Large, which components update and what data do they show?

• KPI Cards update to average battery life and price for 'Pro' and 'Pro Plus' variants only.
• Variant Matrix Table shows only 'Pro' and 'Pro Plus' rows.
• Bar Charts display data for 'Pro' and 'Pro Plus' variants.

Key Result

A dashboard organizing product variants in a matrix with KPIs and charts to compare features and prices.

Practice

1. What is the main purpose of a variant matrix in Figma design systems?

easy

A. To organize design options by properties and values for easy comparison

B. To create animations between different frames

C. To export designs as code automatically

D. To generate random color palettes

Solution

1. Step 1: Understand variant matrix concept

   A variant matrix groups design variants by their properties and values, making it easy to compare and switch between them.

2. Step 2: Identify the main purpose

   This organization helps designers quickly find and manage different design options without confusion.

3. Final Answer:

   To organize design options by properties and values for easy comparison -> Option A

4. Quick Check:

   Variant matrix = organize design options [OK]

Hint: Think: variant matrix = organized design choices [OK]

Common Mistakes:

• Confusing variant matrix with animation tools
• Thinking it exports code automatically
• Assuming it generates colors

2. Which of the following is the correct way to name a property in a Figma variant matrix?

easy

A. Color-Option

B. Size

C. 123Style

D. background color

Solution

1. Step 1: Review naming rules for properties

   Property names should be clear, simple, and avoid spaces or special characters that cause confusion.

2. Step 2: Evaluate options

   "Size" is a clear, simple name without spaces or special characters. "Color-Option" has a hyphen which is discouraged. "123Style" starts with numbers which is not recommended. "background color" has a space which is not ideal.

3. Final Answer:

   Size -> Option B

4. Quick Check:

   Clear, simple property name = Size [OK]

Hint: Use simple, no-space names for properties [OK]

Common Mistakes:

• Using spaces in property names
• Starting names with numbers
• Including special characters like hyphens

3. Given a variant matrix with properties Size (Small, Medium) and Color (Red, Blue), how many variants will be created?

medium

A. 6

B. 3

C. 2

D. 4

Solution

1. Step 1: Count values per property

   Size has 2 values: Small, Medium. Color has 2 values: Red, Blue.

2. Step 2: Calculate total variants

   Total variants = number of Size values x number of Color values = 2 x 2 = 4.

3. Final Answer:

   4 -> Option D

4. Quick Check:

   2 x 2 = 4 variants [OK]

Hint: Multiply counts of property values for total variants [OK]

Common Mistakes:

• Adding instead of multiplying values
• Ignoring one property's values
• Counting only unique values

4. You created a variant matrix but Figma shows overlapping variants. What is the most likely cause?

medium

A. You forgot to name the variant set

B. You used too many properties

C. Properties have duplicate values causing conflicts

D. Variants are not grouped in a frame

Solution

1. Step 1: Understand overlapping variants issue

   Overlapping variants usually happen when two or more variants share the exact same property values, causing Figma to not distinguish them.

2. Step 2: Identify cause

   Duplicate property values in different variants cause conflicts and overlap in the matrix.

3. Final Answer:

   Properties have duplicate values causing conflicts -> Option C

4. Quick Check:

   Duplicate property values = overlapping variants [OK]

Hint: Check for duplicate property values to fix overlaps [OK]

Common Mistakes:

• Assuming too many properties cause overlap
• Thinking grouping in frames fixes variant overlap
• Believing naming variant sets prevents overlap

5. You want to organize a button component with variants for Size (Small, Medium, Large), Color (Primary, Secondary), and State (Default, Hover, Disabled). How many variants will your matrix contain, and what is the best way to arrange them for easy use?

hard

A. 18 variants; arrange properties in order of importance (Size, Color, State)

B. 9 variants; arrange properties alphabetically

C. 6 variants; arrange properties randomly

D. 27 variants; arrange properties by frequency of use (State, Color, Size)

Solution

1. Step 1: Calculate total variants

   Size has 3 values, Color 2, State 3. Total variants = 3 x 2 x 3 = 18.

2. Step 2: Determine best arrangement

   Arrange properties logically by importance or how users think about them. Size, then Color, then State is clear and intuitive.

3. Final Answer:

   18 variants; arrange properties in order of importance (Size, Color, State) -> Option A

4. Quick Check:

   3 x 2 x 3 = 18; logical order = Size, Color, State [OK]

Hint: Multiply all property values; order by importance [OK]

Common Mistakes:

• Multiplying incorrectly or adding values
• Arranging properties alphabetically without logic
• Ignoring property importance for arrangement