Padding control in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create clean and user-friendly reports.

📋 Request: Your manager wants you to adjust the padding inside dashboard cards to improve readability and visual balance.

📊 Data: You have a Figma file with several dashboard cards containing charts and text. Each card currently has inconsistent padding around the content.

🎯 Deliverable: Produce a Figma design where all dashboard cards have consistent padding of 24 pixels on all sides, ensuring the content is well spaced and visually balanced.

Sample Data

Card Name	Current Padding (px)	Content Type
Sales Overview	16	Chart + Text
Customer Demographics	12	Text + Table
Monthly Revenue	20	Chart
Top Products	18	Text + Image
Region Performance	15	Chart + Text

1

Step 1: Select the first dashboard card named 'Sales Overview' in Figma.

Click on the card frame in the layers panel or directly on the canvas.

Expected Result

The 'Sales Overview' card is selected and its properties are visible in the right sidebar.

2

Step 2: Locate the padding settings for the selected card.

In the right sidebar under 'Auto Layout' section, find the padding values for top, bottom, left, and right.

Expected Result

Current padding values are visible, e.g., 16 px on all sides or individual values.

3

Step 3: Change all padding values to 24 pixels.

Set Top = 24 px, Bottom = 24 px, Left = 24 px, Right = 24 px in the Auto Layout padding controls.

Expected Result

The content inside the 'Sales Overview' card moves inward, creating equal space of 24 px on all sides.

4

Step 4: Repeat steps 1 to 3 for each dashboard card: 'Customer Demographics', 'Monthly Revenue', 'Top Products', and 'Region Performance'.

Select each card and set padding to 24 px on all sides in Auto Layout settings.

Expected Result

All dashboard cards have consistent padding of 24 pixels, improving visual balance.

5

Step 5: Preview the dashboard design to check spacing and readability.

Use Figma's Present mode or zoom out to view all cards together.

Expected Result

Dashboard cards appear evenly spaced with balanced padding, making content easier to read and visually appealing.

Final Result

Sales Overview

[Chart]

↓

Monthly Revenue

[Chart]

↓

Region Performance

[Chart + Text]

✓Consistent padding of 24 pixels on all dashboard cards improves readability.

✓Equal spacing creates a balanced and professional look.

✓Content inside cards is visually separated from edges, reducing clutter.

Bonus Challenge

Adjust padding responsively so that on smaller screen widths the padding reduces to 16 pixels, maintaining good readability.

Show Hint

Use Figma's Constraints and Auto Layout resizing options to create responsive padding settings.