Polygon and star shapes in Figma - Dashboard Guide

Dashboard Mode - Polygon and star shapes

Goal

Understand how to create and use polygon and star shapes in Figma to enhance dashboard visuals.

Sample Data

Shape	Number of Sides/Points	Color	Size (px)
Triangle (Polygon)	3	Blue	100
Square (Polygon)	4	Green	100
Pentagon (Polygon)	5	Orange	100
Star	5	Red	100
Star	6	Purple	100

Dashboard Components

• KPI Card: Shows the count of each shape type using text labels.
• Polygon Shapes: Visual shapes created with polygon tool set to 3, 4, and 5 sides, colored as per data.
• Star Shapes: Visual shapes created with star tool set to 5 and 6 points, colored as per data.
• Size Control Slider: A slider to adjust the size of all shapes simultaneously (100px default).

Dashboard Layout

+-----------------------------+
| KPI Card (Shape Counts)      |
+-----------------------------+
|  Polygon Shapes  | Star Shapes|
|  (3,4,5 sides)   | (5,6 points)|
+-----------------------------+
|      Size Control Slider      |
+-----------------------------+

Interactivity

The size control slider changes the size of all polygon and star shapes at once, updating their width and height in real time.

Clicking on a shape highlights it and shows its details in the KPI card area.

Self Check

If you move the size control slider to 150px, what happens to the shapes? (Answer: All polygon and star shapes increase in size to 150px width and height.)

If you click on the orange pentagon, which component updates? (Answer: The KPI card updates to highlight the pentagon count and details.)

Key Result

Dashboard showing polygon and star shapes with adjustable size and shape count KPIs.