Why shapes build visual elements in Figma - Business Case Study

Scenario Mode

👤 Your Role: You are a beginner UI/UX designer learning to create dashboards in Figma.

📋 Request: Your manager wants you to design a simple sales dashboard using basic shapes to build visual elements.

📊 Data: You have sales data summarized by region and product category, but no pre-made charts. You will use shapes in Figma to represent this data visually.

🎯 Deliverable: Create a dashboard mockup in Figma using rectangles, circles, and lines to represent sales by region and category clearly.

Sample Data

Region	Product Category	Sales ($)
North	Electronics	12000
North	Furniture	8000
South	Electronics	15000
South	Furniture	7000
East	Electronics	10000
East	Furniture	9000
West	Electronics	13000
West	Furniture	6000

1

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

In Figma, select Frame tool (F), click and drag or enter 800 width and 600 height in properties panel.

Expected Result

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

2

Step 2: Create rectangles to represent sales by region. Each rectangle's width will show total sales in that region.

Calculate total sales per region: North=20000, South=22000, East=19000, West=19000. Use a scale where 1000 sales = 10 pixels width. Draw rectangles with widths: North=200px, South=220px, East=190px, West=190px; height=50px.

Expected Result

Four horizontal rectangles of different widths appear, visually showing sales size by region.

3

Step 3: Add circles inside each rectangle to represent product categories. Circle size shows sales in that category.

Calculate sales per category per region. Use circle radius where 1000 sales = 5 pixels radius. For example, North Electronics=12000 sales -> radius=60px, Furniture=8000 -> radius=40px. Place circles side by side inside each rectangle.

Expected Result

Inside each region rectangle, two circles appear sized proportionally to category sales.

4

Step 4: Use lines to separate regions and add labels for clarity.

Draw horizontal lines between rectangles. Add text labels above each rectangle with region name and total sales.

Expected Result

Dashboard has clear separation and labels, making it easy to read.

5

Step 5: Apply colors to shapes: use blue shades for Electronics and green shades for Furniture for easy distinction.

Fill Electronics circles with blue (#4A90E2) and Furniture circles with green (#7ED321). Rectangles use light gray (#E0E0E0).

Expected Result

Colors visually separate product categories and keep the dashboard clean.

Final Result

Rectangle 200px wide, 50px high

↓

Rectangle 220px wide, 50px high

↓

Rectangle 190px wide, 50px high

↓

Rectangle 190px wide, 50px high

✓Using simple shapes like rectangles and circles helps show sales differences clearly.

✓Rectangle width quickly shows total sales by region.

✓Circle sizes inside rectangles show product category sales proportionally.

✓Colors help users distinguish product categories easily.

✓Lines and labels improve readability and organization.

Bonus Challenge

Add interactive hover effects in Figma to highlight each region's sales details.

Show Hint

Use Figma's prototyping feature to create hover states that change shape color or show tooltips with sales numbers.

Practice

1. Why are shapes important in building visual elements in design?

easy

A. They add random colors without any purpose.

B. They make the design slower to load.

C. They form the basic structure to organize and display information clearly.

D. They replace the need for text completely.

Solution

1. Step 1: Understand the role of shapes in design

   Shapes act as building blocks that help organize and highlight information visually.

2. Step 2: Identify the correct purpose of shapes

   Shapes provide structure and clarity, making data easier to understand.

3. Final Answer:

   They form the basic structure to organize and display information clearly. -> Option C

4. Quick Check:

   Shapes = Basic structure [OK]

Hint: Shapes organize info visually, not randomly color it [OK]

Common Mistakes:

• Thinking shapes only add decoration
• Believing shapes slow down design
• Assuming shapes replace text entirely

2. Which of the following is the correct way to create a rectangle shape in Figma?

easy

A. Use the Rectangle tool and drag on canvas.

B. Draw freehand with the Pen tool only.

C. Type rect() in the text box.

D. Select the Ellipse tool and drag on canvas.

Solution

1. Step 1: Identify the tool for rectangles in Figma

   The Rectangle tool is specifically designed to create rectangle shapes.

2. Step 2: Confirm the correct method

   Using the Rectangle tool and dragging on the canvas creates a rectangle shape.

3. Final Answer:

   Use the Rectangle tool and drag on canvas. -> Option A

4. Quick Check:

   Rectangle tool = rectangle shape [OK]

Hint: Rectangle tool makes rectangles, not Ellipse or Pen [OK]

Common Mistakes:

• Confusing Ellipse tool with Rectangle tool
• Trying to type code to create shapes
• Using Pen tool for simple rectangles

3. What will happen if you combine a circle and a rectangle shape in Figma using the 'Union' operation?

medium

A. They stay separate and do not change.

B. They merge into one combined shape covering both areas.

C. The rectangle disappears and only the circle remains.

D. The shapes change color but remain separate.

Solution

1. Step 1: Understand the 'Union' operation in Figma

   'Union' merges selected shapes into a single combined shape covering all areas.

2. Step 2: Predict the result of combining circle and rectangle

   The circle and rectangle will merge into one shape that includes both their areas.

3. Final Answer:

   They merge into one combined shape covering both areas. -> Option B

4. Quick Check:

   Union = merged shape [OK]

Hint: Union merges shapes into one combined shape [OK]

Common Mistakes:

• Thinking shapes stay separate after Union
• Believing one shape disappears
• Assuming only color changes

4. You tried to create a complex shape by combining two shapes in Figma, but the shapes did not merge as expected. What is the most likely reason?

medium

A. You used the 'Union' operation but the shapes were locked.

B. You selected only one shape before combining.

C. You used the 'Subtract' operation instead of 'Union'.

D. You drew the shapes outside the canvas.

Solution

1. Step 1: Check the status of shapes before combining

   If shapes are locked, they cannot be modified or merged.

2. Step 2: Understand why locked shapes prevent merging

   Locked shapes ignore combine operations like 'Union', so they stay separate.

3. Final Answer:

   You used the 'Union' operation but the shapes were locked. -> Option A

4. Quick Check:

   Locked shapes block merging [OK]

Hint: Unlock shapes before combining to merge [OK]

Common Mistakes:

• Confusing 'Subtract' with failure to merge
• Selecting only one shape
• Ignoring locked shape status

5. You want to create a dashboard visual that highlights sales data using shapes. Which approach best uses shapes to build clear visual elements?

hard

A. Use only text labels without any shapes to keep it minimal.

B. Use many overlapping shapes with random colors to decorate the dashboard.

C. Use complex shapes that are hard to recognize to impress viewers.

D. Use simple rectangles to represent sales bars and circles to highlight key points.

Solution

1. Step 1: Identify effective shape use for data visualization

   Simple shapes like rectangles and circles help represent data clearly and highlight important info.

2. Step 2: Avoid clutter and confusion in dashboard design

   Using random or complex shapes can confuse viewers and reduce clarity.

3. Final Answer:

   Use simple rectangles to represent sales bars and circles to highlight key points. -> Option D

4. Quick Check:

   Simple shapes = clear visuals [OK]

Hint: Simple shapes highlight data clearly, avoid clutter [OK]

Common Mistakes:

• Using too many random shapes
• Skipping shapes and using only text
• Choosing complex shapes that confuse