Solid fills in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst creating a sales performance dashboard.

📋 Request: Your manager wants you to use solid fills in your dashboard visuals to clearly highlight key sales regions and categories.

📊 Data: You have sales data by region and product category with total sales amounts.

🎯 Deliverable: Create a dashboard in Figma that uses solid fills to color code sales regions and product categories for easy visual distinction.

Sample Data

Region	Product Category	Total Sales ($)
North	Electronics	120000
South	Furniture	95000
East	Office Supplies	70000
West	Electronics	110000
North	Furniture	85000
South	Office Supplies	60000
East	Electronics	105000
West	Furniture	90000

1

Step 1: Open Figma and create a new frame sized 800x600 pixels for your dashboard.

Use the Frame tool (F) and set width=800, height=600 in the right panel.

Expected Result

A blank frame of 800x600 pixels appears ready for design.

2

Step 2: Add a title text box at the top of the frame with the text 'Sales Performance Dashboard'.

Use the Text tool (T), click near the top center, type the title, set font size to 24pt and font weight to Bold.

Expected Result

The dashboard has a clear, readable title at the top.

3

Step 3: Create rectangles to represent each sales region. Place four rectangles horizontally with equal spacing.

Use the Rectangle tool (R), create four rectangles sized 150x100 pixels each, spaced evenly across the frame below the title.

Expected Result

Four rectangles appear side by side, ready to be colored.

4

Step 4: Apply solid fill colors to each rectangle to represent regions: North=Blue (#3B82F6), South=Red (#EF4444), East=Green (#10B981), West=Orange (#F59E0B).

Select each rectangle, open Fill panel, choose Solid fill, enter hex color code for each region.

Expected Result

Each rectangle is filled with a distinct solid color representing its region.

5

Step 5: Add text labels inside each colored rectangle with the region name and total sales sum from sample data.

Use Text tool (T), type region name and sales (e.g., 'North\n$205,000'), center text inside rectangle, set font size 16pt, color white for contrast.

Expected Result

Each colored rectangle clearly shows the region name and total sales amount.

6

Step 6: Below the region rectangles, create three smaller rectangles side by side for product categories: Electronics, Furniture, Office Supplies.

Use Rectangle tool (R), create three rectangles sized 120x80 pixels each, spaced evenly below the region section.

Expected Result

Three smaller rectangles appear horizontally below the region section.

7

Step 7: Apply solid fill colors to product category rectangles: Electronics=Purple (#8B5CF6), Furniture=Teal (#14B8A6), Office Supplies=Yellow (#EAB308).

Select each rectangle, open Fill panel, choose Solid fill, enter hex color code for each category.

Expected Result

Each product category rectangle is filled with a distinct solid color.

8

Step 8: Add text labels inside each product category rectangle with category name and total sales sum from sample data.

Use Text tool (T), type category name and sales (e.g., 'Electronics\n$335,000'), center text inside rectangle, font size 14pt, color white for contrast.

Expected Result

Each product category rectangle clearly shows the category name and total sales amount.

9

Step 9: Ensure all text is readable by checking color contrast between text and solid fill backgrounds.

If needed, adjust text color to white or black to maintain good contrast and accessibility.

Expected Result

All text is easy to read against the solid fill backgrounds.

10

Step 10: Group each region rectangle with its label and each category rectangle with its label for easy movement.

Select rectangle and text, right-click, choose Group Selection or press Ctrl+G (Cmd+G on Mac).

Expected Result

Each colored block with label is grouped for neat organization.

Final Result

Blue

↓

Purple

✓North region leads in total sales with $205,000.

✓Electronics is the top product category with $335,000 in sales.

✓Solid fills help quickly identify regions and categories by color.

✓Text contrast ensures readability on colored backgrounds.

Bonus Challenge

Add interactive hover effects in Figma to highlight each region and category rectangle with a lighter shade of its solid fill color.

Show Hint

Use Figma's Prototype tab to create hover interactions and duplicate rectangles with lighter fills for the hover state.

Practice

1. What is the main purpose of using Solid fills in Figma for Business Intelligence visuals?

easy

A. To import external images into the design

B. To create complex gradients and patterns

C. To add a uniform color to shapes or areas for better clarity

D. To add text labels to charts

Solution

1. Step 1: Understand what solid fills do

   Solid fills add a single, uniform color to shapes or areas in a design.

2. Step 2: Identify their use in BI visuals

   They help improve clarity and highlight important parts by using consistent colors.

3. Final Answer:

   To add a uniform color to shapes or areas for better clarity -> Option C

4. Quick Check:

   Solid fills = uniform color [OK]

Hint: Solid fills = one color, simple and clear [OK]

Common Mistakes:

• Confusing solid fills with gradients or patterns
• Thinking solid fills add text or images
• Assuming solid fills create complex designs

2. Which of the following is the correct way to apply a solid fill color to a shape in Figma?

easy

A. Select the shape, go to Fill section, click the color box, and pick a color

B. Right-click the shape and choose 'Add Gradient Fill'

C. Drag and drop an image onto the shape

D. Use the Text tool to type the color name inside the shape

Solution

1. Step 1: Locate the Fill section in Figma

   In Figma, the Fill section is where you add or change colors for shapes.

2. Step 2: Apply solid fill correctly

   Select the shape, click the color box in Fill, and choose the desired color to apply a solid fill.

3. Final Answer:

   Select the shape, go to Fill section, click the color box, and pick a color -> Option A

4. Quick Check:

   Fill section + color box = solid fill [OK]

Hint: Fill section + color picker = solid fill [OK]

Common Mistakes:

• Choosing gradient fill instead of solid fill
• Trying to add images instead of colors
• Using text tool to change color

3. Consider a rectangle shape in Figma with a solid fill color set to #FF0000 (red). If you change the fill color to #00FF00 (green), what will be the visible color of the rectangle?

medium

A. Red

B. Green

C. Yellow

D. No color (transparent)

Solution

1. Step 1: Understand fill color change effect

   Changing the fill color replaces the old color with the new one on the shape.

2. Step 2: Apply the new color #00FF00

   The rectangle's fill changes from red (#FF0000) to green (#00FF00), so it will appear green.

3. Final Answer:

   Green -> Option B

4. Quick Check:

   Fill color change = new color visible [OK]

Hint: Last fill color set is what you see [OK]

Common Mistakes:

• Thinking colors mix to create yellow
• Assuming old color stays visible
• Believing fill becomes transparent

4. You applied a solid fill to a shape in Figma, but the color does not appear. What is the most likely reason?

medium

A. The fill opacity is set to 0%

B. The shape is locked

C. The fill color is set to black

D. The shape has no stroke

Solution

1. Step 1: Check fill opacity setting

   If fill opacity is 0%, the fill color is fully transparent and won't show.

2. Step 2: Confirm other options

   Locking a shape or having no stroke does not hide fill color; black color is visible.

3. Final Answer:

   The fill opacity is set to 0% -> Option A

4. Quick Check:

   Opacity 0% = invisible fill [OK]

Hint: Check opacity if fill color is invisible [OK]

Common Mistakes:

• Confusing stroke with fill visibility
• Assuming locked shape hides fill
• Thinking black color is invisible

5. You want to highlight a key metric on a BI dashboard using Figma. Which approach best uses solid fills to improve readability and focus?

hard

A. Remove all fills and use only outlines around the metric

B. Use multiple gradient fills on the metric background

C. Add a solid fill with the same color as the dashboard background

D. Apply a bright solid fill color to the metric's background and a contrasting color to the text

Solution

1. Step 1: Understand highlighting with solid fills

   Using a bright solid fill behind the metric draws attention and improves readability.

2. Step 2: Ensure text contrast

   Applying a contrasting text color ensures the metric is easy to read against the fill.

3. Step 3: Evaluate other options

   Gradients can distract, same color fill hides metric, outlines alone don't highlight well.

4. Final Answer:

   Apply a bright solid fill color to the metric's background and a contrasting color to the text -> Option D

5. Quick Check:

   Bright fill + contrast text = highlight [OK]

Hint: Bright fill + contrast text = clear highlight [OK]

Common Mistakes:

• Using gradients that reduce focus
• Matching fill to background color
• Relying on outlines without fill