Polygon and star shapes in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer at a marketing agency.

📋 Request: Your manager wants you to create simple polygon and star shapes to use in a new client dashboard design. They want clear, visually appealing shapes that can represent different data categories.

📊 Data: You have access to Figma's shape tools and can customize polygons and stars by changing the number of sides or points, size, and color.

🎯 Deliverable: Create a Figma file with at least two polygons (one triangle and one hexagon) and two star shapes (one 5-point star and one 8-point star). Label each shape clearly.

Sample Data

Shape Type	Number of Sides/Points	Color	Size (px)
Polygon	3 (Triangle)	#FF5733	100
Polygon	6 (Hexagon)	#33C1FF	120
Star	5 points	#FFC300	100
Star	8 points	#DAF7A6	110

1

Step 1: Open Figma and create a new design file.

No formula needed.

Expected Result

A blank Figma canvas ready for design.

2

Step 2: Select the Polygon tool from the shape tools menu.

No formula needed.

Expected Result

Polygon tool is active and ready to draw.

3

Step 3: Draw a triangle polygon by setting the number of sides to 3 and size to 100 px. Fill it with color #FF5733.

Polygon sides = 3, size = 100 px, fill color = #FF5733

Expected Result

A red-orange triangle shape sized 100 px appears on the canvas.

4

Step 4: Draw a hexagon polygon by setting the number of sides to 6 and size to 120 px. Fill it with color #33C1FF.

Polygon sides = 6, size = 120 px, fill color = #33C1FF

Expected Result

A blue hexagon shape sized 120 px appears on the canvas.

5

Step 5: Select the Star tool from the shape tools menu.

No formula needed.

Expected Result

Star tool is active and ready to draw.

6

Step 6: Draw a 5-point star with size 100 px and fill color #FFC300.

Star points = 5, size = 100 px, fill color = #FFC300

Expected Result

A yellow 5-point star sized 100 px appears on the canvas.

7

Step 7: Draw an 8-point star with size 110 px and fill color #DAF7A6.

Star points = 8, size = 110 px, fill color = #DAF7A6

Expected Result

A light green 8-point star sized 110 px appears on the canvas.

8

Step 8: Label each shape with text below it indicating the shape type and number of sides or points.

Use Text tool to add labels: 'Triangle (3 sides)', 'Hexagon (6 sides)', 'Star (5 points)', 'Star (8 points)'

Expected Result

Each shape has a clear label below it describing the shape.

9

Step 9: Arrange the shapes evenly spaced on the canvas for a clean presentation.

Use alignment and distribution tools in Figma.

Expected Result

Shapes are neatly arranged with equal spacing.

Final Result

  ▲ Triangle (3 sides)    ⬡ Hexagon (6 sides)    ★ Star (5 points)    ✦ Star (8 points)

[Red triangle]        [Blue hexagon]        [Yellow star]        [Light green star]

✓Polygons and stars can be customized by changing sides or points.

✓Colors help differentiate shapes visually.

✓Labels make shapes easy to identify in a dashboard design.

Bonus Challenge

Create a new polygon with 10 sides and a star with 12 points. Use contrasting colors and add a shadow effect to each shape.

Show Hint

Use the polygon and star tools to set sides/points. Apply fill colors with good contrast and add effects from the properties panel.