Corner radius and smoothing in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Corner Radius and Smoothing

In Figma, what does increasing the corner radius of a rectangle do?

A It makes the corners more rounded by increasing the curve size.

B It changes the color of the corners to a lighter shade.

C It adds a shadow effect to the corners.

D It sharpens the corners making them more pointed.

💡 Hint

Think about how the shape's edges change when you drag the corner radius slider.

Increasing the corner radius rounds the corners by enlarging the curve radius, making edges smoother.

🧠 Conceptual

intermediate

Effect of Smoothing on Corners

What is the effect of increasing the smoothing value on a shape's corners in Figma?

A It rotates the shape clockwise.

B It increases the thickness of the shape's border.

C It fills the shape with a gradient color.

D It changes the corner type from sharp to smooth, creating a more natural curve.

💡 Hint

Smoothing affects how the corner curves look, not the border or fill.

Smoothing adjusts the corner's curve style, making it look more natural and less angular.

❓ visualization

advanced

Visualizing Corner Radius and Smoothing Effects

You have a rectangle with a corner radius of 20 and smoothing set to 50%. Which visualization best represents this shape?

A A rectangle with sharp corners and no curves.

B A rectangle with small rounded corners and jagged edges.

C A rectangle with moderately rounded corners and smooth, flowing curves.

D A rectangle with very large rounded corners and no smoothing effect.

💡 Hint

Think about how both corner radius and smoothing combine to affect corner shape.

Corner radius sets the roundness size, smoothing controls curve softness, so 20 radius and 50% smoothing produce moderately rounded, smooth corners.

🎯 Scenario

advanced

Adjusting Corner Radius and Smoothing for UI Buttons

You are designing a UI button in Figma. The design requires the button corners to be rounded but with a natural, soft curve rather than a perfect circle. Which settings should you choose?

A Set corner radius to 12 and smoothing to 70%.

B Set corner radius to 0 and smoothing to 0%.

C Set corner radius to 50 and smoothing to 0%.

D Set corner radius to 12 and smoothing to 0%.

💡 Hint

Natural soft curves require some smoothing, not zero.

Setting a moderate corner radius with high smoothing creates rounded corners with soft, natural curves suitable for UI buttons.

🔧 Formula Fix

expert

Troubleshooting Unexpected Corner Shapes

You set a corner radius of 30 on a rectangle but notice the corners are not as rounded as expected. You also set smoothing to 0%. What is the most likely cause?

A The rectangle's fill color is affecting corner appearance.

B Smoothing is set to 0%, so corners remain angular despite the radius.

C The corner radius value is too high and causing errors.

D The shape is locked and cannot update corner radius.

💡 Hint

Think about how smoothing affects the shape of corners beyond radius size.

With smoothing at 0%, corners keep a sharp transition even if radius is large, so corners appear less rounded.

Practice

1. What does the corner radius setting do in Figma when designing charts?

easy

A. It adds shadows to the chart for depth.

B. It changes the color of the chart elements.

C. It rounds the edges of shapes to make them softer.

D. It adjusts the size of the chart.

Solution

1. Step 1: Understand the role of corner radius

   Corner radius is used to round the edges of shapes, making them look softer and less sharp.

2. Step 2: Relate to chart design

   In charts, applying corner radius smooths the edges of bars or shapes, improving visual appeal.

3. Final Answer:

   It rounds the edges of shapes to make them softer. -> Option C

4. Quick Check:

   Corner radius = Rounded edges [OK]

Hint: Corner radius always softens edges by rounding them [OK]

Common Mistakes:

• Confusing corner radius with color or size changes
• Thinking it adds shadows instead of rounding edges

2. Which of the following is the correct way to set a corner radius of 10 pixels in Figma's properties panel?

easy

A. Enter 10 in the corner radius input box.

B. Type radius: 10px in the code editor.

C. Select the shape and drag the smoothing slider to 10.

D. Right-click the shape and choose 'Add radius 10'.

Solution

1. Step 1: Identify how corner radius is set in Figma

   Figma uses a corner radius input box where you enter a numeric value (without units) to set the radius in pixels.

2. Step 2: Match the correct method

   Typing '10' in the corner radius input box correctly sets the radius to 10 pixels.

3. Final Answer:

   Enter 10 in the corner radius input box. -> Option A

4. Quick Check:

   Corner radius input = numeric value [OK]

Hint: Enter number only in corner radius box, no units needed [OK]

Common Mistakes:

• Adding 'px' units which Figma does not require
• Confusing smoothing slider with corner radius input
• Using right-click menu which doesn't set radius

3. Given a rectangle with corner radius set to 20 and smoothing set to 50%, what visual effect will you see?

medium

A. Sharp corners with no rounding.

B. Rounded corners with smooth, natural curves.

C. Corners become square and edges sharpen.

D. Corners disappear and shape becomes a circle.

Solution

1. Step 1: Understand corner radius effect

   Corner radius of 20 means the corners are rounded with a radius of 20 pixels.

2. Step 2: Understand smoothing effect

   Smoothing at 50% makes the corners appear more natural and curved rather than angular or mechanical.

3. Final Answer:

   Rounded corners with smooth, natural curves. -> Option B

4. Quick Check:

   Corner radius + smoothing = smooth rounded corners [OK]

Hint: Smoothing softens the curve shape of rounded corners [OK]

Common Mistakes:

• Thinking smoothing removes rounding
• Confusing smoothing with corner radius size
• Assuming corners become square with smoothing

4. You set a corner radius of 15 but the corners still look sharp. What is the most likely reason?

medium

A. The fill color is transparent, hiding the corners.

B. The shape is not selected, so changes don't apply.

C. The corner radius input was set to 150 by mistake.

D. The smoothing value is set to 0%, making corners angular.

Solution

1. Step 1: Analyze corner radius and smoothing interaction

   Even with corner radius set, smoothing controls how curved the corners appear. At 0%, corners remain angular despite radius.

2. Step 2: Check other options

   Selection and input errors would cause no change or wrong radius, but sharp corners with radius 15 usually mean smoothing is zero.

3. Final Answer:

   The smoothing value is set to 0%, making corners angular. -> Option D

4. Quick Check:

   Smoothing 0% = sharp corners despite radius [OK]

Hint: Check smoothing slider if corners stay sharp [OK]

Common Mistakes:

• Ignoring smoothing effect on corner shape
• Assuming fill color affects corner rounding
• Not verifying shape selection before editing

5. You want to create a dashboard bar chart with bars that have soft, natural corners. Which combination of corner radius and smoothing should you use?

hard

A. Corner radius 15, smoothing 50%

B. Corner radius 0, smoothing 100%

C. Corner radius 30, smoothing 0%

D. Corner radius 5, smoothing 0%

Solution

1. Step 1: Define soft, natural corners

   Soft corners require a noticeable corner radius and smoothing to curve the edges naturally.

2. Step 2: Evaluate options

   Corner radius 15, smoothing 50% has a moderate radius (15) and smoothing (50%) which creates soft, natural curves. Others either have zero radius or zero smoothing, resulting in sharp or no rounding.

3. Final Answer:

   Corner radius 15, smoothing 50% -> Option A

4. Quick Check:

   Soft corners = radius + smoothing > 0 [OK]

Hint: Use both radius and smoothing above zero for soft corners [OK]

Common Mistakes:

• Setting smoothing to 0% which keeps corners sharp
• Using zero corner radius which means no rounding
• Confusing high smoothing with no radius effect