Resizing rules (hug, fill, fixed) in Figma - Dashboard Guide

Dashboard Mode - Resizing rules (hug, fill, fixed)

Goal

Understand how resizing rules (hug, fill, fixed) affect dashboard elements in Figma to create responsive BI dashboards.

Sample Data

Element	Content	Width (px)	Height (px)	Resizing Rule
KPI Card	Total Sales: $600	150	80	Hug
Bar Chart	Sales by Region	300	200	Fill
Filter Panel	Region Selector	200	200	Fixed
Table	Sales Data Rows	400	150	Fill
Title	Dashboard Title	Auto	40	Hug

Dashboard Components

• KPI Card: Shows total sales with width and height set to hug content. It resizes to fit text exactly.
• Bar Chart: Displays sales by region. Width and height set to fill available space in container, resizing dynamically.
• Filter Panel: Fixed size panel for region selection. Width and height remain constant regardless of container resizing.
• Table: Shows detailed sales data. Width and height set to fill container space, resizing with dashboard.
• Title: Dashboard title text with hug width to fit text and fixed height.

Dashboard Layout

+----------------------------------------------------+
|                      Title (Hug)                    |
+----------------+----------------------+-------------+
| Filter Panel   |      Bar Chart        |  KPI Card   |
|  (Fixed)      |       (Fill)          |   (Hug)     |
|               |                       |             |
+----------------+----------------------+-------------+
|                      Table (Fill)                   |
+----------------------------------------------------+

Interactivity

The Filter Panel controls the data shown in the Bar Chart and Table. When a region is selected, these components update to show filtered sales data. The KPI Card updates total sales accordingly. The Title remains static.

Resizing rules ensure the Filter Panel stays fixed size, while the Bar Chart and Table expand or shrink to fill available space. The KPI Card and Title adjust their width to fit content.

Self Check

If you resize the dashboard container wider, which components change size?

• Bar Chart and Table expand to fill more space.
• KPI Card and Title adjust width to hug content but do not stretch unnecessarily.
• Filter Panel remains fixed size.

Try selecting a different region in the filter. Which components update?

• Bar Chart, Table, and KPI Card update data shown.
• Filter Panel and Title remain unchanged.

Key Result

A BI dashboard demonstrating how hug, fill, and fixed resizing rules control component sizes and responsiveness.