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.

Practice

1. What does padding control in a Figma design box?

easy

A. The space outside the box between other elements

B. The space inside the box around the content

C. The color of the box background

D. The font size of the text inside the box

Solution

1. Step 1: Understand padding meaning

   Padding is the space inside a box around its content, not outside.

2. Step 2: Differentiate padding from margin

   Margin controls space outside the box; padding is inside.

3. Final Answer:

   The space inside the box around the content -> Option B

4. Quick Check:

   Padding = inside space [OK]

Hint: Remember: padding is inside, margin is outside [OK]

Common Mistakes:

• Confusing padding with margin
• Thinking padding changes color
• Assuming padding affects font size

2. Which of the following is the correct way to set padding only on the left side of a box in Figma?

easy

A. Set padding: 0 0 0 10px

B. Set padding: 10px 0 0 0

C. Set padding: 0 10px 0 0

D. Set padding: 10px 10px 10px 10px

Solution

1. Step 1: Recall padding order in CSS-like syntax

   Padding order is top, right, bottom, left.

2. Step 2: Identify left padding position

   Left padding is the fourth value in the sequence.

3. Final Answer:

   Set padding: 0 0 0 10px -> Option A

4. Quick Check:

   Left padding is 4th value [OK]

Hint: Padding order: top, right, bottom, left [OK]

Common Mistakes:

• Mixing up left and right padding positions
• Setting all sides instead of just left
• Using incorrect value order

3. Given a box with padding set as padding: 15px 10px 5px 20px;, what is the padding on the bottom side?

medium

A. 5px

B. 10px

C. 15px

D. 20px

Solution

1. Step 1: Recall padding order

   Padding values are in order: top, right, bottom, left.

2. Step 2: Identify bottom padding value

   The third value is bottom padding, which is 5px here.

3. Final Answer:

   5px -> Option A

4. Quick Check:

   Third value = bottom padding = 5px [OK]

Hint: Third padding value is bottom [OK]

Common Mistakes:

• Choosing top or left padding by mistake
• Confusing order of padding values
• Ignoring the sequence of values

4. You set padding as padding: 10px 20px;. What best describes two-value padding?

medium

A. Padding with two values sets top and bottom only

B. Padding with two values sets top/left and bottom/right

C. Padding with two values sets top and right only

D. Padding with two values sets top/bottom and left/right equally

Solution

1. Step 1: Understand two-value padding shorthand

   Two values mean: first is top and bottom, second is left and right.

2. Step 2: Identify right padding from shorthand

   Right padding equals the second value, 20px (left too).

3. Final Answer:

   Padding with two values sets top/bottom and left/right equally -> Option D

4. Quick Check:

   Two-value padding = top/bottom & left/right [OK]

Hint: Two values: first = top/bottom, second = left/right [OK]

Common Mistakes:

• Misunderstanding two-value padding shorthand
• Assuming two values set each side separately
• Thinking it sets top and bottom only

5. You want to create a dashboard card in Figma with balanced padding: 12px top, 16px right, 12px bottom, and 16px left. Which padding setting achieves this with the shortest syntax?

hard

A. padding: 12px 16px 12px 16px;

B. padding: 16px 12px;

C. padding: 12px 16px;

D. padding: 12px 12px 16px 16px;

Solution

1. Step 1: Analyze padding values

   Top and bottom are 12px; right and left are 16px.

2. Step 2: Use shorthand for two-value padding

   Two-value padding sets top/bottom and left/right respectively.

3. Step 3: Match values to shorthand

   Setting padding: 12px 16px; sets top/bottom to 12px and left/right to 16px.

4. Final Answer:

   padding: 12px 16px; -> Option C

5. Quick Check:

   Two-value padding matches desired sides [OK]

Hint: Use two-value padding for top/bottom and left/right [OK]

Common Mistakes:

• Using four values unnecessarily
• Swapping top/bottom with left/right values
• Choosing incorrect order of values