Polygon and star shapes in Figma - Deep Dive

Overview - Polygon and star shapes

What is it?

Polygon and star shapes are basic geometric forms used in design tools like Figma to create visual elements. A polygon is a shape with straight sides and angles, like triangles or hexagons. A star shape is a special polygon with points extending outward, often used for emphasis or decoration. These shapes help organize and highlight information visually in dashboards and reports.

Why it matters

Using polygon and star shapes in business intelligence dashboards helps draw attention to key data points and organize content clearly. Without these shapes, dashboards might look plain and confuse users, making it harder to understand insights quickly. They improve communication by guiding the viewer's eye and adding visual interest.

Where it fits

Before learning about polygon and star shapes, you should understand basic shape tools and layout principles in Figma. After mastering these shapes, you can explore advanced visual design techniques like custom icons, interactive components, and data-driven visuals.

Mental Model

Core Idea

Polygon and star shapes are visual building blocks that organize and highlight information by their distinct forms and points.

Think of it like...

Think of polygons as simple paper cutouts like triangles or squares, and star shapes as those festive star stickers you put on a notebook to mark something special.

Polygon (hexagon example):
  _______
 /       \
/         \
\         /
 \_______/

Star (5-point example):
    *
   * *
  *   *
 *     *
* * * * *

Build-Up - 6 Steps

1

Foundation

Understanding Basic Polygon Shapes

Concept: Introduce what polygons are and how to create them in Figma.

Polygons are shapes with straight sides. In Figma, you can create a polygon by selecting the polygon tool and choosing the number of sides. For example, a triangle has 3 sides, a square has 4, and a hexagon has 6. You can adjust the size and rotation to fit your design.

Result

You create a clean polygon shape that can be resized and styled in your design.

Knowing how to create polygons is the foundation for building complex shapes and organizing visual elements.

2

Foundation

Creating Star Shapes in Figma

Concept: Learn how star shapes differ from polygons and how to make them.

Stars are polygons with points that extend outward. In Figma, use the star tool and set the number of points. You can adjust the inner radius to control how sharp or rounded the star points are. Stars are often used to highlight or decorate parts of your design.

Result

You produce a star shape with customizable points and inner radius.

Understanding star shapes adds a way to emphasize important information visually.

3

Intermediate

Customizing Polygon and Star Properties

🤔Before reading on: Do you think changing the number of sides or points affects the shape's complexity or just its size? Commit to your answer.

Concept: Explore how adjusting sides, points, and inner radius changes the shape's appearance.

In Figma, polygons let you change the number of sides to create different shapes. Stars let you change points and inner radius to make them sharper or softer. These properties let you tailor shapes to fit your design needs, like making a star more subtle or a polygon more complex.

Result

You can create a variety of shapes from simple triangles to complex stars with smooth or sharp points.

Knowing how shape properties affect appearance helps you design visuals that match your message and style.

4

Intermediate

Using Polygons and Stars for Visual Hierarchy

🤔Before reading on: Do you think shapes like stars are better for decoration or for organizing data? Commit to your answer.

Concept: Learn how to use these shapes to guide viewer attention and organize dashboard content.

Polygons can group related data or create buttons, while stars can highlight key metrics or alerts. Using different shapes creates a visual hierarchy, making important information stand out. For example, a star next to a sales number can show it exceeded a target.

Result

Your dashboard becomes easier to scan and understand at a glance.

Using shapes strategically improves user experience by making data clearer and more engaging.

5

Advanced

Combining Shapes for Custom Visual Elements

🤔Before reading on: Can combining polygons and stars create new meaningful shapes, or do they only serve as separate decorations? Commit to your answer.

Concept: Discover how to combine and layer polygons and stars to build unique icons or indicators.

In Figma, you can overlay polygons and stars, adjust their colors and sizes, and use boolean operations like union or subtract to create custom shapes. For example, combining a star inside a hexagon can represent a special status or category in your dashboard.

Result

You create custom visual elements that fit your brand and data story.

Combining shapes unlocks creative possibilities beyond basic forms, enhancing your dashboard's uniqueness.

6

Expert

Optimizing Shape Use for Performance and Accessibility

🤔Before reading on: Do you think adding many complex shapes always improves dashboard clarity? Commit to your answer.

Concept: Learn best practices to balance visual appeal with performance and accessibility.

Too many complex shapes can slow down dashboard loading and confuse users, especially those with visual impairments. Use simple polygons and stars sparingly, ensure good color contrast, and provide alternative text or labels. Optimize shapes by flattening layers or using vector formats to keep performance smooth.

Result

Your dashboard is visually appealing, fast, and accessible to all users.

Balancing design and usability ensures your visuals communicate effectively without technical or user barriers.

Under the Hood

Figma represents polygons and stars as vector paths defined by points and curves. Polygons are created by connecting points evenly spaced around a circle, while stars add inner points that create the star shape by alternating between outer and inner radii. These vector definitions allow infinite scaling without quality loss and easy editing of shape properties.

Why designed this way?

Vector shapes like polygons and stars are designed for flexibility and precision in digital design. Using points and radii allows easy customization and smooth rendering on any screen size. Alternatives like raster images lack this scalability and editability, which is why vectors are preferred for UI and BI visuals.

Polygon creation flow:
[Center Point]
    |
    v
[Calculate points evenly spaced on circle]
    |
    v
[Connect points with straight lines]
    |
    v
[Polygon shape]

Star creation flow:
[Center Point]
    |
    v
[Calculate outer points on circle]
    |
    v
[Calculate inner points on smaller radius]
    |
    v
[Connect outer and inner points alternately]
    |
    v
[Star shape]

Myth Busters - 3 Common Misconceptions

Quick: Do you think a star shape is just a polygon with more sides? Commit to yes or no before reading on.

Common Belief: A star shape is simply a polygon with many sides.

Reality: A star shape alternates between outer and inner points, creating spikes, unlike a regular polygon which connects points evenly on one radius.

Why it matters: Confusing stars with polygons can lead to incorrect shape adjustments and poor visual results in design.

Quick: Do you think adding more points to a star always makes it clearer? Commit to yes or no before reading on.

Common Belief: More points on a star always improve its visual clarity and emphasis.

Reality: Too many points can clutter the shape, making it harder to recognize and distracting in dashboards.

Why it matters: Overcomplicated shapes reduce readability and user focus, hurting dashboard effectiveness.

Quick: Do you think polygons and stars always improve dashboard performance? Commit to yes or no before reading on.

Common Belief: Adding polygons and stars has no impact on dashboard speed or accessibility.

Reality: Complex or numerous vector shapes can slow rendering and may cause accessibility issues if not designed carefully.

Why it matters: Ignoring performance and accessibility can exclude users and degrade user experience.

Expert Zone

1

Adjusting the inner radius of stars subtly changes user perception of importance without adding clutter.

2

Boolean operations on polygons and stars can create complex icons but may increase file size and reduce editability.

3

Using consistent polygon side counts across a dashboard creates visual harmony and improves user comprehension.

When NOT to use

Avoid using complex polygons or stars when simple shapes or icons suffice, especially in data-heavy dashboards where clarity and speed are priorities. Instead, use simple rectangles, circles, or text labels for better performance and accessibility.

Production Patterns

Professionals use polygons to create buttons, badges, or data groupings, and stars to mark achievements or alerts. Combining these shapes with color coding and tooltips creates intuitive, interactive dashboards that guide user attention effectively.

Connections

Vector Graphics

Polygon and star shapes are fundamental vector graphic elements.

Understanding vector graphics principles helps in manipulating polygons and stars precisely and efficiently.

Visual Hierarchy in Design

Shapes like polygons and stars build visual hierarchy by guiding attention.

Knowing how visual hierarchy works improves the strategic use of shapes to communicate data importance.

Human Perception Psychology

The use of star shapes taps into human attention mechanisms for highlighting.

Understanding how people perceive shapes helps design dashboards that naturally draw focus to key insights.

Common Pitfalls

#1 Using too many star points making the shape cluttered.

Wrong approach:

Create a star with 20 points to emphasize importance.

Correct approach:

Use a star with 5 or 6 points for clear emphasis.

Root cause:

Misunderstanding that more points equal more emphasis, ignoring visual clutter.

#2 Confusing polygon side count with star points and adjusting incorrectly.

Wrong approach:

Increase polygon sides to 10 to make a star shape.

Correct approach:

Use the star tool and set points to 10 with inner radius adjustment.

Root cause:

Not knowing the difference between polygon and star shape properties.

#3 Adding many complex shapes without considering dashboard performance.

Wrong approach:

Add multiple layered polygons and stars with complex boolean operations everywhere.

Correct approach:

Use simple shapes sparingly and optimize layers for performance.

Root cause:

Overvaluing visual complexity over usability and speed.

Key Takeaways

Polygons and stars are essential vector shapes that help organize and highlight information visually.

Adjusting properties like sides, points, and inner radius customizes shape appearance to fit design needs.

Using these shapes strategically creates visual hierarchy, improving dashboard clarity and user focus.

Combining shapes enables custom icons but requires balance to maintain performance and accessibility.

Understanding the difference between polygons and stars prevents common design mistakes and enhances communication.

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