Creating and resizing frames in Figma - Business Scenario Walkthrough

Scenario Mode

👤 Your Role: You are a business analyst preparing a dashboard design in Figma.

📋 Request: Your manager wants a clean dashboard layout with frames for different report sections. You need to create and resize frames to organize the content clearly.

📊 Data: You have a blank Figma canvas and a list of dashboard sections: Sales Overview, Regional Performance, and Monthly Trends.

🎯 Deliverable: A Figma file with three frames named after the sections, sized appropriately to hold charts and text, arranged neatly on the canvas.

Sample Data

Section	Suggested Width (px)	Suggested Height (px)
Sales Overview	600	400
Regional Performance	600	400
Monthly Trends	1200	400

1

Step 1: Create a new frame named 'Sales Overview' on the canvas.

Use the Frame tool (F), click on the canvas, then rename the frame to 'Sales Overview'.

Expected Result

A new frame named 'Sales Overview' appears on the canvas.

2

Step 2: Resize the 'Sales Overview' frame to width 600 px and height 400 px.

Select the 'Sales Overview' frame, then in the right sidebar set Width=600 and Height=400.

Expected Result

The 'Sales Overview' frame is sized exactly 600 by 400 pixels.

3

Step 3: Repeat steps 1 and 2 to create and size a 'Regional Performance' frame with width 600 px and height 400 px.

Create frame, rename to 'Regional Performance', set Width=600 and Height=400.

Expected Result

A 'Regional Performance' frame sized 600x400 px is on the canvas.

4

Step 4: Create a 'Monthly Trends' frame and resize it to width 1200 px and height 400 px.

Use Frame tool, rename to 'Monthly Trends', set Width=1200 and Height=400.

Expected Result

A 'Monthly Trends' frame sized 1200x400 px is on the canvas.

5

Step 5: Arrange the three frames horizontally with some space between them.

Select all frames, then move 'Sales Overview' to left, 'Regional Performance' next to it with 20 px gap, and 'Monthly Trends' next to 'Regional Performance' with 20 px gap.

Expected Result

Frames are neatly arranged side by side with clear spacing.

Final Result

┌───────────────┐  ┌────────────────────┐  ┌─────────────────────────────────────────────┐
│ Sales        │  │ Regional           │  │ Monthly Trends                              │
│ Overview     │  │ Performance        │  │ 1200x400 px                                │
│ 600x400 px  │  │ 600x400 px         │  └─────────────────────────────────────────────┘
└───────────────┘  └────────────────────┘

✓Frames are created and sized correctly to hold dashboard content.

✓The layout is organized and easy to understand.

✓Proper spacing improves visual clarity.

Bonus Challenge

Add auto-layout to the frames container to maintain spacing automatically when resizing frames.

Show Hint

Select all frames, group them, then apply Auto Layout with horizontal direction and 20 px spacing.