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.