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.

Practice

1. What does increasing the number of sides in a polygon shape in Figma do to its appearance?

easy

A. It changes the color of the shape.

B. It makes the shape look more like a star.

C. It makes the shape look more like a circle.

D. It adds more points to the star shape.

Solution

1. Step 1: Understand polygon sides effect

   Increasing sides adds more edges, making the polygon smoother and closer to a circle.

2. Step 2: Compare with star points

   Stars add points outward, polygons add sides around evenly; more sides mean rounder shape.

3. Final Answer:

   It makes the shape look more like a circle. -> Option C

4. Quick Check:

   More polygon sides = closer to circle [OK]

Hint: More polygon sides = smoother, circle-like shape [OK]

Common Mistakes:

• Confusing polygon sides with star points
• Thinking color changes with sides
• Assuming star points increase with polygon sides

2. Which of the following is the correct way to create a 5-point star shape in Figma?

easy

A. Select the star tool and set points to 5.

B. Select the polygon tool and set sides to 5.

C. Draw a circle and add 5 lines inside.

D. Use the rectangle tool and round corners to 5.

Solution

1. Step 1: Identify star creation method

   Figma's star tool lets you set the number of points directly, so setting points to 5 creates a 5-point star.

2. Step 2: Differentiate polygon and star tools

   Polygon tool sets sides, not star points; circle and rectangle tools do not create stars.

3. Final Answer:

   Select the star tool and set points to 5. -> Option A

4. Quick Check:

   Star tool + 5 points = 5-point star [OK]

Hint: Use star tool, set points for star shape [OK]

Common Mistakes:

• Using polygon tool instead of star tool
• Trying to create star from circle or rectangle
• Confusing sides with points

3. If you create a polygon with 6 sides and then increase the corner radius to half the side length, what shape will you see?

medium

A. A hexagon with sharp corners.

B. A star with 6 points.

C. A circle.

D. A hexagon with rounded corners.

Solution

1. Step 1: Understand polygon sides and corner radius

   A polygon with 6 sides is a hexagon. Increasing corner radius rounds its corners.

2. Step 2: Effect of corner radius size

   Setting corner radius to half the side length rounds corners but keeps hexagon shape, not a circle or star.

3. Final Answer:

   A hexagon with rounded corners. -> Option D

4. Quick Check:

   6 sides + corner radius = rounded hexagon [OK]

Hint: Corner radius rounds polygon corners, doesn't change shape type [OK]

Common Mistakes:

• Thinking it becomes a circle
• Confusing polygon with star shape
• Ignoring corner radius effect

4. You tried to create a star shape but it looks like a polygon. What is the most likely mistake?

medium

A. You used the polygon tool instead of the star tool.

B. You set the star points to 3.

C. You increased the corner radius too much.

D. You changed the fill color to transparent.

Solution

1. Step 1: Identify tool used

   Using the polygon tool creates polygons, not stars. To get a star shape, the star tool must be used.

2. Step 2: Check other options

   Setting star points to 3 still creates a star, corner radius affects corners but not shape type, fill color doesn't change shape form.

3. Final Answer:

   You used the polygon tool instead of the star tool. -> Option A

4. Quick Check:

   Polygon tool ≠ star shape [OK]

Hint: Use star tool for stars, polygon tool for polygons [OK]

Common Mistakes:

• Confusing polygon and star tools
• Thinking corner radius changes shape type
• Assuming fill color affects shape form

5. You want to create a dashboard icon combining a 7-sided polygon and a 5-point star in Figma. Which steps correctly describe how to do this?

hard

A. Create a star with 7 points, create a polygon with 5 sides, then overlap them.

B. Create a polygon with 7 sides, create a star with 5 points, then group them.

C. Create a polygon with 5 sides, create a star with 7 points, then merge shapes.

D. Create two polygons with 7 sides, then rotate one by 36 degrees.

Solution

1. Step 1: Create polygon and star with correct sides and points

   Create a polygon shape and set sides to 7, then create a star shape and set points to 5.

2. Step 2: Combine shapes properly

   Group the two shapes to keep them together as one icon without merging paths.

3. Final Answer:

   Create a polygon with 7 sides, create a star with 5 points, then group them. -> Option B

4. Quick Check:

   Polygon 7 sides + star 5 points + group = icon [OK]

Hint: Create shapes separately, then group to combine [OK]

Common Mistakes:

• Mixing up polygon sides and star points
• Merging shapes instead of grouping
• Rotating polygons instead of using star shape