Polygon and star shapes in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Polygon and Star Shape Properties

In Figma, when you create a polygon or star shape, you can adjust the number of points and the inner radius (for stars). Which property directly controls the number of corners or points on these shapes?

A The 'Points' property

B The 'Stroke' property

C The 'Fill' property

D The 'Opacity' property

💡 Hint

Think about how many corners a shape has and which setting changes that number.

The 'Points' property controls how many corners or points a polygon or star has. Increasing this number adds more corners.

❓ visualization

intermediate

Visualizing the Effect of Inner Radius on Star Shapes

You create a star shape in Figma and adjust the 'Inner Radius' slider. What visual change will you see as you increase the inner radius?

A The star's inner points move closer to the center, making the star look more like a circle

B The star's inner points move away from the center, making the star look more spiky

C The star's outer points become rounded

D The star's color changes automatically

💡 Hint

Think about what happens when the inner radius grows larger relative to the outer radius.

Increasing the inner radius moves the star's inner points farther from the center, making the star's spikes longer and more pronounced.

❓ data_modeling

advanced

Modeling Polygon Point Coordinates

You want to calculate the coordinates of each point of a regular polygon with n sides centered at the origin (0,0) with radius r. Which formula correctly calculates the x-coordinate of the k-th point (0-based index)?

A x = r * cos(2 * π * k / n)

B x = r * sin(2 * π * k / n)

C x = r * cos(π * k / n)

D x = r * sin(π * k / n)

💡 Hint

Recall that points are evenly spaced around a circle, and cosine gives the horizontal coordinate.

The x-coordinate of each point on a regular polygon is calculated using x = r * cos(2πk/n), where k is the point index and n is the number of points.

🔧 Formula Fix

advanced

Fixing Incorrect Star Point Calculation

Given the formula for star points, a developer wrote this code to calculate the y-coordinate of the inner points of a star with n points and inner radius r_in:

y = r_in * cos(π * k / n)

What is wrong with this formula?

A The radius should be outer radius, not inner radius

B The angle should be multiplied by 2π, not π

C It should use sine instead of cosine for y-coordinate

D The index k should start at 1, not 0

💡 Hint

Think about the relationship between sine and cosine for coordinates on a circle.

For coordinates on a circle, the y-coordinate is calculated using sine, not cosine. Using cosine for y causes incorrect vertical positioning.

🎯 Scenario

expert

Designing a Dashboard with Polygon and Star Shape Visuals

You are designing a business intelligence dashboard in Figma that uses polygon and star shapes to represent performance metrics. You want to ensure the shapes are accessible and clear for all users. Which practice should you prioritize?

A Use only star shapes with many points to make the dashboard look complex

B Use low contrast colors to reduce eye strain

C Avoid any text labels to keep the dashboard minimalistic

D Use high contrast colors and provide text labels for each shape

💡 Hint

Think about accessibility and clarity for all users, including those with visual impairments.

High contrast colors improve visibility, and text labels help users understand the meaning of shapes, making the dashboard accessible and clear.