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.

Practice

1.

What happens if you hold the Shift key while drawing a rectangle in Figma?

easy

A. It locks the rectangle size to a fixed width.

B. It creates a rectangle with rounded corners.

C. It changes the rectangle color automatically.

D. It creates a perfect square.

Solution

1. Step 1: Understand the Shift key function in shape drawing

   Holding Shift while drawing a rectangle constrains the proportions to equal width and height.

2. Step 2: Apply this to rectangle shape

   This means the rectangle becomes a perfect square when Shift is held.

3. Final Answer:

   It creates a perfect square. -> Option D

4. Quick Check:

   Shift + draw rectangle = square [OK]

Hint: Hold Shift to keep width and height equal [OK]

Common Mistakes:

• Thinking Shift rounds corners
• Assuming Shift locks size
• Believing Shift changes color

2.

Which of the following is the correct way to draw a perfect circle using the ellipse tool in Figma?

easy

A. Click and drag without holding any key.

B. Click and drag while holding the Shift key.

C. Click and drag while holding the Alt key.

D. Double-click the ellipse tool icon.

Solution

1. Step 1: Recall ellipse tool behavior

   Dragging normally creates an ellipse with free width and height.

2. Step 2: Effect of holding Shift key

   Holding Shift while dragging constrains the ellipse to equal width and height, making a perfect circle.

3. Final Answer:

   Click and drag while holding the Shift key. -> Option B

4. Quick Check:

   Shift + drag ellipse = circle [OK]

Hint: Hold Shift while dragging ellipse for circle [OK]

Common Mistakes:

• Not holding Shift and getting oval
• Using Alt instead of Shift
• Thinking double-click draws circle

3.

Consider you draw a rectangle of width 200px and height 100px, then you hold Shift and drag a corner to resize. What will be the new shape?

medium

A. A circle with diameter equal to the smaller side.

B. A rectangle with width and height resized independently.

C. A perfect square with equal width and height.

D. An ellipse with width and height equal.

Solution

1. Step 1: Understand Shift key effect on resizing

   Holding Shift while resizing a rectangle constrains proportions, keeping width and height equal.

2. Step 2: Apply to initial rectangle

   Starting from 200x100, resizing with Shift will make width and height equal, forming a square.

3. Final Answer:

   A perfect square with equal width and height. -> Option C

4. Quick Check:

   Shift + resize rectangle = square [OK]

Hint: Shift locks aspect ratio to keep shape square [OK]

Common Mistakes:

• Thinking width and height resize separately
• Confusing rectangle with ellipse
• Assuming shape becomes circle

4.

You tried to draw a perfect circle using the ellipse tool but ended up with an oval. What is the most likely mistake?

medium

A. You did not hold the Shift key while dragging.

B. You held the Alt key instead of Shift.

C. You double-clicked the ellipse tool instead of dragging.

D. You used the rectangle tool instead of ellipse.

Solution

1. Step 1: Identify how to draw a perfect circle

   Holding Shift while dragging the ellipse tool constrains width and height to be equal.

2. Step 2: Analyze the mistake

   Not holding Shift means free width and height, resulting in an oval shape.

3. Final Answer:

   You did not hold the Shift key while dragging. -> Option A

4. Quick Check:

   No Shift = oval, Shift = circle [OK]

Hint: Always hold Shift for perfect circles [OK]

Common Mistakes:

• Using Alt instead of Shift
• Double-clicking instead of dragging
• Confusing ellipse with rectangle tool

5.

You want to create a dashboard highlight using a perfect circle and a square of the same size side by side. You draw an ellipse and a rectangle. How do you ensure both shapes have exactly 150px sides?

hard

A. Hold Shift while drawing both shapes and set width and height to 150px.

B. Hold Shift while drawing both shapes and resize to 150px width only.

C. Draw both shapes freely and then set width to 150px manually.

D. Draw shapes without Shift and set width to 150px, height to 150px only for rectangle.

Solution

1. Step 1: Use Shift to constrain proportions

   Holding Shift while drawing ensures the ellipse becomes a perfect circle and rectangle becomes a square.

2. Step 2: Set both width and height to 150px

   Manually setting both width and height to 150px guarantees exact size for both shapes.

3. Final Answer:

   Hold Shift while drawing both shapes and set width and height to 150px. -> Option A

4. Quick Check:

   Shift + set width & height = perfect circle and square [OK]

Hint: Hold Shift and set both width and height to same value [OK]

Common Mistakes:

• Setting only width or height, causing shape distortion
• Not holding Shift and getting oval or rectangle
• Assuming resizing width alone is enough