0
0
Figmabi_tool~8 mins

Spacing between items in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Spacing between items
Goal

Understand how to control and adjust spacing between items in a dashboard design using Figma to create clear, balanced layouts.

Sample Data
Item Width (px) Height (px) Spacing to Next Item (px)
KPI Card 1 200 100 20
KPI Card 2 200 100 20
Bar Chart 400 300 30
Data Table 600 200 0
Dashboard Components
  • KPI Card 1: Displays Total Sales. Size 200x100 px. Spacing after: 20 px.
  • KPI Card 2: Displays Total Customers. Size 200x100 px. Spacing after: 20 px.
  • Bar Chart: Shows Sales by Region. Size 400x300 px. Spacing after: 30 px.
  • Data Table: Lists detailed sales data. Size 600x200 px. No spacing after (last item).
Dashboard Layout
+----------------+ 20px +----------------+ 20px +------------------------+
|  KPI Card 1    | ---- |  KPI Card 2    | ---- |      Bar Chart          |
|  200x100 px    |      |  200x100 px    |      |      400x300 px         |
+----------------+      +----------------+      +------------------------+


+--------------------------------------------------------------+
|                         Data Table                           |
|                         600x200 px                           |
+--------------------------------------------------------------+
Interactivity

Adjusting spacing between items in Figma is done by selecting the items and changing the Auto Layout spacing property. When you increase spacing, the gap between items grows, making the layout airier. Decreasing spacing brings items closer, saving space but risking clutter.

Using Figma's Auto Layout, you can also add padding around groups of items to keep consistent margins. This helps the dashboard look balanced on different screen sizes.

Self Check

If you increase the spacing between KPI Card 1 and KPI Card 2 from 20 px to 40 px, which parts of the dashboard layout change?

  • The horizontal gap between KPI Card 1 and KPI Card 2 will increase, pushing KPI Card 2 and the Bar Chart further right.
  • The overall width of the top row will increase.
  • The Data Table below remains unchanged in size and position vertically but may shift horizontally if the top row width affects alignment.
Key Result
A simple dashboard layout showing how spacing between KPI cards, charts, and tables affects the overall design using Figma Auto Layout.