Padding control in Figma - Dashboard Guide

Dashboard Mode - Padding control

Dashboard Goal

Understand how padding control affects the layout and spacing of dashboard components to improve readability and visual appeal.

Sample Data

Component	Padding Top (px)	Padding Right (px)	Padding Bottom (px)	Padding Left (px)
KPI Card	16	16	16	16
Bar Chart	24	24	24	24
Data Table	12	12	12	12
Filter Panel	8	8	8	8
Title	20	0	10	0

Dashboard Components

• KPI Card: Displays total sales with padding set to 16px on all sides for balanced spacing.
• Bar Chart: Shows sales by region with 24px padding to provide breathing room around the chart.
• Data Table: Lists detailed sales data with 12px padding for compact but readable spacing.
• Filter Panel: Contains slicers for region and date with 8px padding for a tight but accessible layout.
• Title: Dashboard title with 20px top padding and 10px bottom padding to separate it visually from other components.

Dashboard Layout

+------------------------------+
|           Title              |
|  (Padding Top:20px, Bottom:10px) |
+------------------------------+
|  KPI Card   |   Bar Chart     |
| (16px pad)  |   (24px pad)    |
+-------------+----------------+
|        Data Table (12px pad)  |
+------------------------------+
|      Filter Panel (8px pad)   |
+------------------------------+

Interactivity

The Filter Panel allows users to select regions and date ranges. When filters change, the KPI Card, Bar Chart, and Data Table update to reflect filtered sales data. Padding remains consistent to maintain layout stability during updates.

Self Check

If you increase the padding of the Bar Chart from 24px to 40px, how does the spacing around the chart change? Which components might be affected visually?

Key Result

A dashboard demonstrating how different padding settings affect the spacing and layout of BI components.