Polygon and star shapes in Figma - Step-by-Step Guide

Introduction

Polygon and star shapes help you create custom geometric figures in your design. They are useful for highlighting data points or decorating dashboards with clear, simple shapes.

When you want to add a clear, symmetrical shape to highlight a key metric on your dashboard.

When you need a star shape to represent ratings or achievements visually.

When creating icons or buttons that require polygon shapes like triangles or hexagons.

When designing backgrounds or borders with repeated polygon patterns.

When you want to customize the number of sides on a shape to match your data theme.

Steps

Step 1: Click

- Shape tool icon in the top toolbar

A dropdown menu appears showing shape options including Rectangle, Line, Ellipse, Polygon, and Star

Step 2: Select

- Polygon or Star from the shape dropdown menu

The cursor changes to crosshair, ready to draw the selected shape

Step 3: Click and drag

- Canvas area

A polygon or star shape appears with default sides and size

Step 4: Adjust

- Properties panel on the right under 'Polygon' or 'Star' settings

The number of sides or points changes on the shape in real time

Step 5: Use

- Corner handles on the shape

Resize the shape proportionally or non-proportionally depending on whether Shift is held

Step 6: Modify

- Inner radius slider (for star shapes) in the Properties panel

The star shape’s inner points move closer or farther from the center, changing the star’s sharpness

Before vs After

Before

Canvas is empty with no shapes

After

A star shape with 5 points and inner radius 50% appears on the canvas, sized approximately 200x200 pixels

Settings Reference

Number of sides/points

📍 Properties panel when polygon or star is selected

Controls how many edges or points the shape has

Default: 5 sides/points

Inner radius

📍 Properties panel for star shapes

Adjusts the depth of the star’s inner points

Default: 50%

Corner radius

📍 Properties panel

Rounds the corners of the polygon or star shape

Default: 0

Common Mistakes

Trying to change the number of sides by dragging the shape handles

Dragging handles only resizes the shape but does not change the number of sides or points

Use the 'Number of sides' or 'Points' setting in the Properties panel to change shape complexity

Not holding Shift while resizing to keep shape proportions

The shape can become distorted and lose symmetry

Hold Shift while dragging corner handles to resize proportionally

Summary

Polygon and star shapes let you create custom geometric figures with adjustable sides or points.

Use the Properties panel to change the number of sides, inner radius (for stars), and corner rounding.

Remember to hold Shift when resizing to keep shapes symmetrical and avoid distortion.

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