Direction (horizontal, vertical) in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants a clear visual layout showing monthly sales data arranged both horizontally and vertically for easy comparison.

📊 Data: You have monthly sales figures for three products over four months.

🎯 Deliverable: Create a dashboard in Figma that uses horizontal and vertical directions to organize charts and data tables for clear comparison.

Sample Data

Month	Product A	Product B	Product C
January	1200	900	700
February	1500	1100	800
March	1700	1300	900
April	1600	1200	850

1

Step 1: Create a new Figma frame sized 1200x800 pixels to hold the dashboard.

In Figma, select Frame tool (F), draw a frame 1200px wide and 800px tall.

Expected Result

A blank frame of 1200x800 pixels appears on the canvas.

2

Step 2: Add a horizontal bar chart for monthly sales of Product A across the four months.

Use rectangles to represent sales bars arranged left to right horizontally. Label Y-axis with months and X-axis with sales values.

Expected Result

A horizontal bar chart showing January to April sales for Product A arranged left to right.

3

Step 3: Add a vertical bar chart for monthly sales of Product B below the horizontal chart.

Use rectangles to represent sales bars arranged bottom to top vertically. Label X-axis with months and Y-axis with sales values.

Expected Result

A vertical bar chart showing January to April sales for Product B arranged bottom to top.

4

Step 4: Place a data table to the right side of the charts showing all products' sales by month.

Create a grid with months as rows and products as columns, fill cells with sales numbers from sample data.

Expected Result

A clear data table aligned vertically with months and horizontally with products, showing sales figures.

5

Step 5: Add titles above each chart and the table to clarify content.

Use text tool to add 'Product A Sales (Horizontal)', 'Product B Sales (Vertical)', and 'Monthly Sales Data Table'.

Expected Result

Each section has a clear title describing the data and direction.

6

Step 6: Use consistent spacing and alignment to visually separate horizontal and vertical elements.

Apply 40px vertical spacing between charts and 30px horizontal spacing between charts and table.

Expected Result

Dashboard looks balanced and easy to read with clear horizontal and vertical layout.

Final Result

------------------------------------------------------------
| Product A Sales (Horizontal)                              |
|  Jan |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1200 |
|  Feb |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1500 |
|  Mar |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1700 |
|  Apr |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1600 |
------------------------------------------------------------
| Product B Sales (Vertical)                                |
| 900  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ |
| 1100 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ |
| 1300 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ |
| 1200 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ |
| Months: Jan Feb Mar Apr                                   |
------------------------------------------------------------
| Monthly Sales Data Table                                  |
| Month   | Product A | Product B | Product C               |
| January | 1200      | 900       | 700                    |
| February| 1500      | 1100      | 800                    |
| March   | 1700      | 1300      | 900                    |
| April   | 1600      | 1200      | 850                    |
------------------------------------------------------------

✓Product A sales trend is increasing from January to March, slight dip in April.

✓Product B sales also increase steadily, shown clearly in vertical chart.

✓Product C sales are lower but stable across months.

✓Horizontal and vertical directions help compare different products easily.

✓Data table complements charts by showing exact numbers.

Bonus Challenge

Add interactive hover effects in Figma to highlight bars and table rows for better user experience.

Show Hint

Use Figma's prototype mode to create hover overlays that change bar color and highlight corresponding table row.