Bird
Raised Fist0
Figmabi_tool~5 mins

Corner radius and smoothing in Figma - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What is corner radius in Figma?
Corner radius is the measurement that rounds the corners of a shape, making them less sharp and more curved.
Click to reveal answer
beginner
What does smoothing do to corners in Figma?
Smoothing adjusts how soft or sharp the corner curves are, changing the shape's look from sharp edges to smooth, flowing curves.
Click to reveal answer
beginner
How do you change the corner radius of a rectangle in Figma?
Select the rectangle, then drag the circular handle near the corners or enter a number in the corner radius input box in the properties panel.
Click to reveal answer
intermediate
What happens if you increase smoothing to 100% on a corner in Figma?
The corner becomes a smooth, rounded curve that looks like a circle segment, removing sharp angles completely.
Click to reveal answer
intermediate
Can you apply different corner radius values to each corner in Figma?
Yes, Figma allows setting unique corner radius values for each corner to create custom shapes.
Click to reveal answer
What does increasing the corner radius do to a rectangle in Figma?
AMakes corners more rounded
BSharpens the corners
CChanges the color
DDeletes the shape
What is the effect of smoothing on a corner in Figma?
AChanges corner color
BAdjusts how curved or sharp the corner looks
CResizes the shape
DRotates the shape
How can you set different corner radius values for each corner in Figma?
ABy grouping shapes
BBy changing the fill color
CBy rotating the shape
DBy unlinking the corner radius values and entering numbers separately
If smoothing is set to 0%, what does the corner look like?
AFully rounded corner
BInvisible corner
CSharp corner
DCorner with shadow
Where do you find the corner radius control in Figma?
AIn the properties panel when a shape is selected
BIn the layers panel
CIn the text tool
DIn the export settings
Explain how corner radius and smoothing work together to change the look of a shape in Figma.
Think about how sharp or smooth the edges appear.
You got /3 concepts.
    Describe the steps to set different corner radius values for each corner of a rectangle in Figma.
    Look for the link icon near corner radius input.
    You got /4 concepts.

      Practice

      (1/5)
      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