Absolute positioning within Auto Layout in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard in Figma.

📋 Request: Your manager wants a clean dashboard layout where a key sales summary box stays fixed at the top right corner, while the rest of the content flows naturally below it.

📊 Data: You have a Figma frame with multiple sales charts and tables arranged using Auto Layout. The sales summary box is a separate component.

🎯 Deliverable: Create a Figma frame using Auto Layout where the sales summary box is absolutely positioned at the top right corner, and the other dashboard elements flow below it without overlap.

Sample Data

Element	Type	Positioning	Notes
Sales Summary Box	Component	Absolute	Fixed top-right corner
Sales Chart	Frame	Auto Layout	Flows below summary box
Sales Table	Frame	Auto Layout	Flows below summary box

1

Step 1: Create a new Figma frame and set its layout to vertical Auto Layout.

Select the frame > Properties panel > Layout > Auto Layout > Direction: Vertical

Expected Result

The frame stacks child elements vertically with spacing.

2

Step 2: Add the Sales Summary Box component inside the frame.

Drag the Sales Summary Box into the frame as the first child.

Expected Result

Sales Summary Box appears at the top of the frame.

3

Step 3: Set the Sales Summary Box to absolute positioning within the Auto Layout frame.

Select Sales Summary Box > Right-click > Position > Use Absolute Positioning

Expected Result

Sales Summary Box is removed from Auto Layout flow and can be moved freely.

4

Step 4: Manually position the Sales Summary Box to the top right corner of the frame.

Drag or set X and Y coordinates so the box aligns with the top right corner inside the frame bounds.

Expected Result

Sales Summary Box stays fixed at top right, overlapping no other elements.

5

Step 5: Add the Sales Chart and Sales Table frames below the Sales Summary Box in the Auto Layout frame.

Drag Sales Chart and Sales Table into the frame as children after the Sales Summary Box.

Expected Result

Sales Chart and Sales Table flow vertically below the summary box without overlap.

6

Step 6: Adjust spacing and padding in the Auto Layout frame to ensure clear separation.

Select frame > Properties panel > Spacing between items: 24px; Padding top: 16px; Padding sides: 16px

Expected Result

Dashboard elements have consistent spacing and look balanced.

Final Result

Sales Dashboard Frame (Auto Layout Vertical)

┌───────────────────────────────┐

↓

↓

Bonus Challenge

Make the Sales Summary Box responsive so it stays top right on different screen sizes.

Show Hint

Use constraints and resizing options in Figma to fix the box to the top and right edges.