Corner radius and smoothing in Figma - Deep Dive

Overview - Corner radius and smoothing

What is it?

Corner radius and smoothing are design features that control how sharp or rounded the corners of shapes appear in Figma. Corner radius sets the curve size at the corner, while smoothing adjusts how soft or natural the curve looks. These tools help create visually pleasing shapes and improve the overall look of designs.

Why it matters

Without corner radius and smoothing, designs would look harsh and mechanical, making interfaces feel less friendly and harder to use. Rounded corners guide the eye smoothly and can make buttons and shapes feel more approachable. These features solve the problem of making digital designs feel natural and polished.

Where it fits

Before learning corner radius and smoothing, you should understand basic shape creation and manipulation in Figma. After mastering these, you can explore advanced vector editing and prototyping to create interactive, refined designs.

Mental Model

Core Idea

Corner radius and smoothing shape how corners transition from straight edges to curves, controlling both size and softness of the curve.

Think of it like...

It's like shaping the edges of a wooden table: corner radius is how much you sand down the sharp corner to make it round, and smoothing is how gently you polish it to feel soft and natural.

┌───────────────┐
│               │
│   Shape with  │
│   corners →   │
│               │
└───────────────┘

Corner radius: controls the size of the curve at each corner.
Smoothing: controls how smooth or sharp the curve feels between edges.

Build-Up - 7 Steps

1

Foundation

Understanding Basic Corner Radius

Concept: Corner radius defines how rounded a corner is by setting the curve's size.

In Figma, when you select a rectangle or shape, you can adjust the corner radius by entering a number or dragging the corner radius handle. A radius of 0 means a sharp corner, while higher numbers create more rounded corners.

Result

The shape's corners become rounded according to the radius value, making the edges softer.

Knowing how to control corner radius lets you quickly change the feel of a shape from sharp and formal to soft and friendly.

2

Foundation

Applying Corner Radius to Different Shapes

Concept: Corner radius works on rectangles and some polygons, but behaves differently depending on shape type.

For rectangles, corner radius rounds all corners equally by default. For polygons, corner radius rounds each corner but may behave differently if the shape has many sides or irregular angles.

Result

You see consistent rounding on rectangles, but polygons may have varied corner curves depending on their angles.

Understanding shape-specific behavior helps you predict how corner radius affects your design and avoid unexpected results.

3

Intermediate

Using Independent Corner Radius Controls

🤔Before reading on: do you think all corners must have the same radius, or can they be set independently? Commit to your answer.

Concept: Figma allows setting different radius values for each corner independently.

You can unlock the corner radius link icon to set unique radius values for top-left, top-right, bottom-right, and bottom-left corners. This creates asymmetric shapes with varied corner roundness.

Result

Shapes can have customized corner curves, enabling more creative and tailored designs.

Knowing independent control over corners expands your design flexibility and helps create unique shapes.

4

Intermediate

Introduction to Corner Smoothing

🤔Before reading on: do you think smoothing changes the size of the curve or the shape of the curve? Commit to your answer.

Concept: Corner smoothing adjusts how the curve transitions between edges, making it softer or sharper without changing the radius size.

In Figma, corner smoothing is a percentage value that changes the curve's shape. At 0%, corners are standard arcs. Increasing smoothing makes curves more natural and flowing, while 100% creates very smooth, almost circular corners.

Result

Corners look less mechanical and more organic, improving visual appeal.

Understanding smoothing helps you refine shapes beyond simple rounding, adding polish and style.

5

Intermediate

Combining Radius and Smoothing for Design

Concept: Radius and smoothing work together to define corner appearance: radius sets size, smoothing sets curve style.

By adjusting both, you can create corners that are large and soft or small and very smooth. Experimenting with combinations helps find the best look for your design's mood and function.

Result

Shapes gain nuanced corner styles that fit the design context perfectly.

Knowing how these two controls interact unlocks precise corner customization for professional designs.

6

Advanced

Corner Radius and Smoothing on Complex Vectors

🤔Before reading on: do you think corner smoothing works the same on simple shapes and complex vectors? Commit to your answer.

Concept: Corner smoothing can be applied to complex vector paths, but results depend on path structure and node placement.

When editing vector shapes with multiple points, smoothing affects how corners blend between segments. Too much smoothing can distort shapes or cause unexpected curves, so careful node adjustment is needed.

Result

You can create smooth, flowing custom shapes, but must balance smoothing to avoid shape distortion.

Understanding smoothing's effect on vectors prevents design errors and enables advanced shape creation.

7

Expert

Technical Limits and Performance Considerations

🤔Before reading on: do you think extreme corner smoothing affects file size or rendering speed? Commit to your answer.

Concept: High corner smoothing and complex radius settings increase vector complexity, which can impact performance and export quality.

Figma calculates curves using Bezier paths. Excessive smoothing creates more control points, increasing file size and slowing rendering. For production, balance aesthetics with performance by optimizing corner settings.

Result

Designs remain visually appealing without causing slowdowns or export issues.

Knowing the technical tradeoffs helps create efficient, scalable designs suitable for real-world use.

Under the Hood

Figma uses mathematical curves called Bezier curves to render corners. Corner radius sets the radius of the arc at the corner, while smoothing adjusts the control points of the Bezier curve to change its shape from a simple arc to a more natural curve. Internally, Figma recalculates these curves dynamically as you adjust values, updating the vector path in real time.

Why designed this way?

This design allows precise control over corner appearance while keeping vector paths editable and scalable. Using Bezier curves is standard in vector graphics because they balance smoothness and computational efficiency. Alternatives like fixed arcs or pixel-based rounding would limit flexibility and scalability.

Shape with corners
┌───────────────┐
│               │
│   ┌───┐       │
│   │   │       │
│   └───┘       │
└───────────────┘

Bezier curve control points:
  ●───●
 /     \
●       ●

Radius sets arc size; smoothing adjusts control points for curve shape.

Myth Busters - 4 Common Misconceptions

Quick: Does increasing corner radius always make corners smoother? Commit yes or no.

Common Belief: Increasing corner radius automatically makes corners look smoother and more natural.

Reality: Radius only changes the size of the curve, not how smooth or natural it looks; smoothing controls the curve's softness.

Why it matters: Confusing radius with smoothing leads to designs that look mechanically rounded but lack visual polish.

Quick: Can corner smoothing be applied to all shapes equally? Commit yes or no.

Common Belief: Corner smoothing works the same way on all shapes and vectors.

Reality: Smoothing behaves differently depending on shape complexity and node arrangement; complex vectors may react unpredictably.

Why it matters: Assuming uniform behavior causes unexpected shape distortions and wasted design time.

Quick: Does setting different corner radii always produce better designs? Commit yes or no.

Common Belief: Using different radius values on each corner always improves design quality.

Reality: While it adds flexibility, inconsistent corner radii can make designs look unbalanced or confusing if not used thoughtfully.

Why it matters: Misusing independent radii can reduce usability and visual harmony.

Quick: Does extreme smoothing never affect file performance? Commit yes or no.

Common Belief: High smoothing values have no impact on file size or rendering speed.

Reality: Excessive smoothing increases vector complexity, which can slow down rendering and increase file size.

Why it matters: Ignoring performance impacts can cause slow design files and problems in production.

Expert Zone

1

Corner smoothing interacts with vector node placement, so subtle node adjustments can drastically change curve appearance.

2

Independent corner radius combined with smoothing can create complex shapes that require careful balance to maintain visual consistency.

3

Excessive smoothing can cause curves to overshoot or create loops, which are hard to detect without zooming in closely.

When NOT to use

Avoid heavy corner smoothing on very complex vectors or icons intended for small sizes; instead, use simpler radius settings or manual vector editing to maintain clarity and performance.

Production Patterns

Designers often use moderate corner radius with slight smoothing for UI elements like buttons and cards to create a friendly, modern look. For logos or custom icons, they combine independent radii and smoothing to craft unique shapes that stand out.

Connections

Bezier Curves

Corner radius and smoothing directly manipulate Bezier curve control points.

Understanding Bezier curves helps grasp how smoothing changes curve shapes beyond simple arcs.

User Interface Design

Rounded corners influence user perception and usability in UI elements.

Knowing corner styling effects helps create interfaces that feel approachable and easy to use.

Ergonomics

Rounded edges in physical products reduce discomfort, similar to how corner radius softens digital shapes.

Recognizing this cross-domain principle shows how design choices affect comfort and perception in both digital and physical worlds.

Common Pitfalls

#1 Applying maximum corner radius without smoothing for natural curves.

Wrong approach:

Set corner radius to 50 but leave smoothing at 0%, resulting in mechanical arcs.

Correct approach:

Set corner radius to 50 and increase smoothing to around 50% for softer, natural curves.

Root cause:

Confusing radius size with curve softness leads to harsh-looking corners.

#2 Using corner smoothing on complex vectors without adjusting nodes.

Wrong approach:

Apply 100% smoothing on a complex vector path without editing nodes, causing shape distortion.

Correct approach:

Apply smoothing gradually and adjust vector nodes to maintain shape integrity.

Root cause:

Not understanding smoothing's effect on vector geometry causes unexpected shape changes.

#3 Setting different corner radii randomly for visual interest.

Wrong approach:

Assign random radius values to corners without design intent, creating unbalanced shapes.

Correct approach:

Use independent radii thoughtfully to support design goals and maintain harmony.

Root cause:

Lack of design principle awareness leads to inconsistent and confusing shapes.

Key Takeaways

Corner radius controls the size of the curve at a shape's corner, changing sharp edges to rounded ones.

Corner smoothing adjusts how soft or natural the curve feels without changing its size.

Using both radius and smoothing together allows precise and polished corner styling.

Smoothing affects vector paths by changing Bezier curve control points, which can impact shape integrity.

Balancing corner settings is essential for creating visually appealing, efficient, and usable designs.

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