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.