Variant matrix organization in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product manager at a manufacturing company.

📋 Request: Your manager wants a clear visual matrix to organize product variants by two key attributes: Color and Size. This matrix should help the sales team quickly identify available product options.

📊 Data: You have a list of product variants with their Color, Size, and Availability status.

🎯 Deliverable: Create a variant matrix in Figma that shows Colors as rows and Sizes as columns. Each cell should indicate if the variant is Available or Not Available using color coding.

Sample Data

Variant ID	Color	Size	Availability
V001	Red	Small	Available
V002	Red	Medium	Not Available
V003	Red	Large	Available
V004	Blue	Small	Available
V005	Blue	Medium	Available
V006	Blue	Large	Not Available
V007	Green	Small	Not Available
V008	Green	Medium	Available
V009	Green	Large	Available

1

Step 1: Open Figma and create a new frame sized for a dashboard.

Set frame size to 600px width and 400px height for clear visibility.

Expected Result

A blank frame ready for design.

2

Step 2: Create a grid layout with Colors as rows and Sizes as columns.

Rows: Red, Blue, Green; Columns: Small, Medium, Large.

Expected Result

A 3x3 grid with row and column headers labeled.

3

Step 3: Fill each cell with a rectangle shape representing variant availability.

Use green fill for 'Available' and red fill for 'Not Available'.

Expected Result

Cells colored according to availability from sample data.

4

Step 4: Add text labels inside each cell showing 'Available' or 'Not Available'.

Use white text color for readability on colored backgrounds.

Expected Result

Each cell clearly shows availability status with color and text.

5

Step 5: Add a legend explaining the color coding for availability.

Green box labeled 'Available', Red box labeled 'Not Available'.

Expected Result

Users understand the meaning of colors in the matrix.

6

Step 6: Ensure the matrix is accessible with sufficient color contrast and readable fonts.

Use font size 14px and check color contrast ratio above 4.5:1.

Expected Result

Matrix is easy to read for all users.

Final Result

Green

↓

Green

↓

Red

↓

Green

↓

Red

✓Red color is not available in Medium size.

✓Blue color is not available in Large size.

✓Green color is not available in Small size.

✓The matrix clearly shows availability patterns for quick sales reference.

Bonus Challenge

Add interactive hover states in Figma that show variant details like Variant ID when hovering over each cell.

Show Hint

Use Figma's prototyping features to create hover overlays with text showing the Variant ID.

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