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.

Practice

1. What is the main purpose of a frame in Figma when designing a dashboard?

easy

A. To group and organize design elements neatly

B. To add color to the design

C. To write code inside the design

D. To export images only

Solution

1. Step 1: Understand frame function

   Frames are containers that hold and organize design elements together.

2. Step 2: Identify main use in dashboards

   Frames help keep dashboard layouts neat and adaptable by grouping elements.

3. Final Answer:

   To group and organize design elements neatly -> Option A

4. Quick Check:

   Frames = Group and organize [OK]

Hint: Frames group elements to keep designs tidy [OK]

Common Mistakes:

• Thinking frames add color automatically
• Confusing frames with exporting tools
• Assuming frames are for coding

2. Which of the following is the correct way to resize a frame in Figma?

easy

A. Drag the frame edges or enter exact width and height values

B. Double-click the frame to resize automatically

C. Right-click and select 'Resize Frame' from the menu

D. Use the text tool inside the frame

Solution

1. Step 1: Identify resizing methods

   Frames can be resized by dragging edges or typing exact sizes in properties panel.

2. Step 2: Eliminate incorrect options

   Double-clicking or right-click menu does not resize frames; text tool edits text only.

3. Final Answer:

   Drag the frame edges or enter exact width and height values -> Option A

4. Quick Check:

   Resize = Drag edges or enter size [OK]

Hint: Drag edges or type size to resize frames [OK]

Common Mistakes:

• Trying to resize by double-clicking
• Looking for resize in right-click menu
• Using text tool to resize frame

3. If you create a frame of size 400x300 pixels and then drag its right edge to increase width by 100 pixels, what will be the new size?

medium

A. 400x400 pixels

B. 300x400 pixels

C. 500x500 pixels

D. 500x300 pixels

Solution

1. Step 1: Understand initial frame size

   The frame starts at width 400 pixels and height 300 pixels.

2. Step 2: Apply width increase

   Dragging right edge increases width by 100 pixels, so width = 400 + 100 = 500 pixels; height stays 300 pixels.

3. Final Answer:

   500x300 pixels -> Option D

4. Quick Check:

   Width 400+100=500, height unchanged 300 [OK]

Hint: Width changes by drag amount; height stays same unless dragged [OK]

Common Mistakes:

• Adding 100 to height instead of width
• Changing both width and height mistakenly
• Confusing width and height values

4. You try to resize a frame by typing width = -200 in the properties panel. What will happen?

medium

A. The frame width becomes 200 pixels

B. The frame height changes instead

C. An error or no change occurs because width cannot be negative

D. The frame flips horizontally

Solution

1. Step 1: Understand frame size constraints

   Frame width must be a positive number; negative values are invalid.

2. Step 2: Predict behavior on invalid input

   Typing negative width causes error or no change; frame does not flip or change height.

3. Final Answer:

   An error or no change occurs because width cannot be negative -> Option C

4. Quick Check:

   Negative size invalid = error/no change [OK]

Hint: Frame sizes must be positive numbers [OK]

Common Mistakes:

• Assuming negative width flips frame
• Thinking negative width sets positive size
• Confusing width with height change

5. You have a dashboard frame sized 800x600 pixels containing several charts. You want to resize the frame to 1200x900 pixels but keep all charts scaled proportionally inside. What is the best approach in Figma?

hard

A. Resize the frame and manually resize each chart individually

B. Resize the frame and use constraints on charts to scale them proportionally

C. Create a new frame with 1200x900 and copy charts over without resizing

D. Resize the frame and lock the charts so they don't move

Solution

1. Step 1: Understand proportional scaling need

   Charts inside frame should resize automatically to keep proportions when frame size changes.

2. Step 2: Use constraints feature

   Applying constraints to charts allows them to scale or move proportionally when frame resizes.

3. Step 3: Avoid manual resizing or locking

   Manual resizing is time-consuming; locking prevents resizing; copying without resizing loses scale.

4. Final Answer:

   Resize the frame and use constraints on charts to scale them proportionally -> Option B

5. Quick Check:

   Constraints + resize frame = proportional scaling [OK]

Hint: Use constraints to auto-scale elements when resizing frames [OK]

Common Mistakes:

• Manually resizing each chart instead of using constraints
• Locking charts so they don't resize
• Copying charts to new frame without resizing