Creating and resizing frames in Figma - Dashboard Building Guide

Dashboard Mode - Creating and resizing frames

Goal

Understand how to create and resize frames in Figma to organize dashboard elements clearly.

Sample Data

Component	Width (px)	Height (px)	Position X (px)	Position Y (px)
Sales KPI	300	150	20	20
Sales Trend Chart	600	300	340	20
Region Filter	200	100	20	190
Sales Table	600	200	20	310

Dashboard Components

• Frame: Dashboard Container
  Size: 960px width x 540px height
  Contains all dashboard elements for neat organization.
• Frame: KPI Card
  Size: 300px width x 150px height
  Shows total sales number.
  Positioned at (20, 20).
• Frame: Sales Trend Chart
  Size: 600px width x 300px height
  Displays sales over time line chart.
  Positioned at (340, 20).
• Frame: Region Filter
  Size: 200px width x 100px height
  Dropdown to select sales region.
  Positioned at (20, 190).
• Frame: Sales Data Table
  Size: 600px width x 200px height
  Shows detailed sales data.
  Positioned at (20, 310).

Dashboard Layout

+--------------------------------------------------------------+
| Dashboard Container (960x540)                                |
| +-------------------+ +------------------------------------+ |
| | KPI Card (300x150) | | Sales Trend Chart (600x300)       | |
| | Position (20,20)   | | Position (340,20)                | |
| +-------------------+ +------------------------------------+ |
| +-------------------+                                            |
| | Region Filter      |                                            |
| | (200x100)          |                                            |
| | Position (20,190)  |                                            |
| +-------------------+                                            |
| +------------------------------------------------------------+ |
| | Sales Data Table (600x200)                                  | |
| | Position (20,310)                                          | |
| +------------------------------------------------------------+ |
+--------------------------------------------------------------+

Interactivity

The Region Filter frame acts as a dropdown to select a sales region. When a region is selected:

• The Sales Trend Chart updates to show sales over time for that region.
• The Sales Data Table refreshes to show only sales records from the selected region.
• The KPI Card recalculates total sales for the chosen region.

This interactivity helps users focus on specific regions easily.

Self Check

If you add a filter to select the region "East", which components update?

• The KPI Card updates to show total sales in the East region.
• The Sales Trend Chart updates to show sales trends for East.
• The Sales Data Table filters to show only East region sales data.
• The Region Filter remains unchanged as it is the control.

Key Result

A Figma dashboard layout showing how to create and resize frames for KPI, chart, filter, and data table with interactive filtering by region.