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.