Why shapes build visual elements in Figma - Dashboard Impact

Dashboard Mode - Why shapes build visual elements

Goal

Understand how simple shapes combine to create clear visual elements in dashboards.

Sample Data

Shape	Color	Size (px)	Purpose
Rectangle	Blue	100x50	Background block
Circle	Green	40 diameter	Highlight point
Line	Gray	100 length	Separator
Triangle	Red	30 base	Arrow indicator
Ellipse	Yellow	80x40	Button shape

Dashboard Components

• KPI Card: Uses a blue rectangle as background (100x50 px) with white text on top showing a key number.
• Highlight Icon: A green circle (40 px diameter) placed next to important data points to draw attention.
• Separator Line: A gray horizontal line (100 px length) dividing sections for clarity.
• Arrow Indicator: A red triangle (30 px base) pointing up or down to show increase or decrease in values.
• Button Shape: A yellow ellipse (80x40 px) used as a clickable button for filters or actions.

Dashboard Layout

+----------------------+  +----------------+  +----------------+
|  KPI Card (Blue)     |  | Highlight Icon |  | Button (Yellow) |
|  [Rectangle shape]   |  |  (Green circle)|  |  [Ellipse shape]| 
+----------------------+  +----------------+  +----------------+

+----------------------------------------------------------+
| Separator Line (Gray) ----------------------------------- |
+----------------------------------------------------------+

+----------------------+  +----------------+
| Arrow Indicator      |  | Data Table     |
| (Red triangle)       |  | (Text & shapes)|
+----------------------+  +----------------+

Interactivity

Clicking the yellow ellipse button filters data in the table and updates the KPI card number. The arrow indicator changes direction based on filtered data trends. Highlight icons appear next to key values dynamically.

Self Check

If you click the yellow button to filter for high sales, which components update? The KPI card number changes, the arrow indicator points up, and highlight icons appear next to top sales values.

Key Result

A simple dashboard showing how basic shapes like rectangles, circles, lines, triangles, and ellipses combine to build visual elements that communicate data clearly.