Frame vs group difference in Figma - Dashboard Approaches Compared

Dashboard Mode - Frame vs group difference

Business Question

How can understanding the difference between a frame and a group in Figma help organize and build better BI dashboards?

Sample Data: Dashboard Elements

Element	Type	Purpose	Properties
Sales Chart	Frame	Contains chart and title	Resizable, can have constraints
Filter Buttons	Group	Group of filter icons	Moves together, no resizing
KPI Card	Frame	Contains metrics and background	Resizable, layout control
Legend Items	Group	Grouped color labels	Moves as one unit
Dashboard Background	Frame	Overall container	Resizable, layout constraints

Dashboard Components

• Frame: Sales Chart - Contains the bar chart and its title. Allows resizing and layout constraints to keep elements aligned when dashboard size changes.
• Group: Filter Buttons - Groups filter icons so they move together but do not resize or control layout.
• Frame: KPI Card - Holds metrics and background with resizing and layout control for responsiveness.
• Group: Legend Items - Groups color labels for easy movement but no resizing or layout control.
• Frame: Dashboard Background - The main container that holds all frames and groups, resizable to adapt to screen size.

Dashboard Layout (ASCII Art)

+--------------------------------------------------+
| Dashboard Background (Frame)                      |
| +-------------------+  +-----------------------+ |
| | Sales Chart       |  | KPI Card              | |
| | (Frame)           |  | (Frame)               | |
| +-------------------+  +-----------------------+ |
|                                                  |
| +-----------------------------+                  |
| | Filter Buttons (Group)       |                  |
| +-----------------------------+                  |
|                                                  |
| +-----------------------------+                  |
| | Legend Items (Group)         |                  |
| +-----------------------------+                  |
+--------------------------------------------------+

Interactivity

When you move or resize a frame (like the Sales Chart or KPI Card), all elements inside adjust accordingly because frames control layout and resizing. Groups (like Filter Buttons and Legend Items) move together but do not resize or affect layout. Using frames for main dashboard parts helps keep the design responsive. Groups help keep related items together for easy movement.

Self Check

If you resize the Dashboard Background frame, which components resize and which only move?

• Frames (Sales Chart, KPI Card, Dashboard Background) resize and adjust layout.
• Groups (Filter Buttons, Legend Items) only move together but do not resize.

Key Result

Shows how frames and groups differ in organizing and resizing dashboard elements in Figma.