Spacing between items in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Adjusting spacing between dashboard cards

You have a dashboard with multiple cards arranged in a grid. You want to increase the space between these cards evenly without changing their size. Which Figma property should you adjust?

A Increase the 'Padding' inside each card component.

B Increase the 'Gap' value in the Auto Layout settings of the parent frame.

C Add margin manually by inserting empty frames between cards.

D Change the 'Stroke' thickness of each card's border.

💡 Hint

Think about the property that controls space between items inside a container using Auto Layout.

The 'Gap' property in Auto Layout controls the space between items inside a frame. Increasing it adds even spacing without affecting the size of the cards themselves.

🧠 Conceptual

intermediate

Understanding spacing impact on readability

Why is consistent spacing between items important in a BI dashboard design?

A It improves visual clarity and helps users scan information easily.

B It makes the dashboard load faster by reducing file size.

C It allows more data to fit on the screen by reducing gaps.

D It changes the color contrast between items.

💡 Hint

Think about how spacing affects how users perceive grouped information.

Consistent spacing improves visual clarity and helps users quickly scan and understand the dashboard content by grouping related items and separating unrelated ones.

❓ data_modeling

advanced

Spacing in nested Auto Layout frames

You have a nested Auto Layout frame inside a parent Auto Layout frame. The parent frame has a gap of 20px, and the nested frame has a gap of 10px between its items. What is the total horizontal space between two items, one in the parent frame and one inside the nested frame?

A 10px, because only the nested frame's gap applies between its items.

B 30px, because the gaps add up between nested and parent frames.

C 20px, because the parent frame's gap applies between its direct children only.

D 0px, because nested frames ignore parent gaps.

💡 Hint

Consider how Auto Layout gaps apply only between direct children of a frame.

The parent frame's gap applies only between its direct children. The nested frame's gap applies only between items inside it. So between a parent child and a nested child's item, only the parent's gap applies.

🔧 Formula Fix

advanced

Fixing inconsistent spacing in a dashboard layout

You notice that the spacing between some dashboard widgets is inconsistent, even though all widgets are inside the same Auto Layout frame with a gap of 16px. Which of the following is the most likely cause?

A Some widgets have extra padding or margin inside their frames.

B The Auto Layout gap property is set to 0px.

C The widgets are not inside an Auto Layout frame.

D The frame's background color is transparent.

💡 Hint

Think about what can add extra space inside individual widgets.

Extra padding or margin inside individual widgets can cause inconsistent spacing even if the parent frame's gap is consistent.

🎯 Scenario

expert

Optimizing spacing for responsive BI dashboards

You are designing a BI dashboard in Figma that must look good on both desktop and mobile screens. You want the spacing between items to adjust automatically based on screen size. Which approach best achieves this?

A Use fixed pixel values for gaps and resize the frame manually for each screen size.

B Use percentage-based padding inside each item and fixed gaps in the parent frame.

C Create separate frames for desktop and mobile with different fixed gaps.

D Use Auto Layout with 'Space Between' distribution and set minimum and maximum gap values using constraints or variants.

💡 Hint

Consider how Auto Layout can distribute space dynamically and how constraints or variants can help with responsiveness.

Using Auto Layout with 'Space Between' distribution allows items to spread evenly. Setting minimum and maximum gap values with constraints or variants lets spacing adjust automatically for different screen sizes.