Rectangle and ellipse tools in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Rectangle Corner Radius

In Figma, when you create a rectangle and adjust its corner radius, what happens visually?

A The rectangle transforms into an ellipse.

B The rectangle's fill color changes to a gradient.

C The rectangle's border thickness increases.

D The rectangle's corners become rounded by the specified radius.

💡 Hint

Think about how corner radius affects shapes in design tools.

Adjusting the corner radius rounds the corners of the rectangle, making them smooth curves instead of sharp angles.

❓ visualization

intermediate

Ellipse Tool Output

You use the ellipse tool in Figma to draw a shape with width 100px and height 50px. What shape do you get?

A A rectangle with rounded corners.

B A perfect circle with diameter 100px.

C An ellipse with horizontal axis 100px and vertical axis 50px.

D A square with side length 50px.

💡 Hint

Recall the difference between circles and ellipses.

The ellipse tool creates an oval shape. With width 100px and height 50px, it forms an ellipse stretched horizontally.

❓ data_modeling

advanced

Combining Rectangle and Ellipse Properties

You want to create a shape in Figma that looks like a rectangle with fully rounded ends (pill shape). Which approach models this best?

A Create a rectangle and set corner radius equal to half the rectangle's height.

B Create an ellipse and stretch it horizontally to rectangle's width.

C Create a rectangle and set corner radius to zero.

D Create a rectangle with zero corner radius and overlay an ellipse on each end.

💡 Hint

Think about how corner radius relates to height for fully rounded ends.

Setting the corner radius to half the height rounds the rectangle's ends fully, creating a pill shape.

🔧 Formula Fix

advanced

Why Does My Ellipse Look Like a Circle?

You draw an ellipse in Figma with width 80px and height 80px, but it looks like a circle. Why?

A Because width and height are equal, so the ellipse is a circle.

B Because the corner radius is set to maximum.

C Because the fill color is set to transparent.

D Because the shape is locked and cannot be resized.

💡 Hint

Consider what makes a circle different from an ellipse.

An ellipse with equal width and height is a circle by definition.

🎯 Scenario

expert

Designing a Responsive Button with Rectangle and Ellipse Tools

You need to design a button in Figma that adjusts its width based on text length but always has fully rounded ends. Which method ensures this behavior?

A Create a rectangle with zero corner radius and add circles on each end as separate layers.

B Create a rectangle with corner radius set to half the button's height and use auto width resizing.

C Create an ellipse and manually resize it for each text length.

D Create a rectangle with fixed width and height and adjust text size to fit.

💡 Hint

Think about how corner radius and auto resizing work together.

Setting corner radius to half the height with auto width resizing keeps ends fully rounded regardless of width changes.