UI/UX Design: Corner Smoothing
What corner smoothing is, why it exists, and how to use it in Figma.
Overview
As of iOS 13, we’ve had this feature which allows a corner-smoothing effect to be applied to essentially any element in your application.
Today we’re going over corner smoothing is, why it exists, and how to use it in Figma.
What is corner smoothing
In a nutshell, corner smoothing is a method by which we can take an object with a corner radius applied to it’s vertices, and create a shape that is known as a super-ellipse.
Basically, it’s like this:
You will notice that the effects are not especially dramatic, but on closer inspection, they are noticeable:
As you can see, there is in fact a difference, however small.
How to apply corner smoothing in Figma
The corner smoothing tool is actually hidden in Figma within the rounded corner tool-set.
Make sure that “independent corners” is toggled on, and under the ellipses button to the right, you will find the corner smoothing tool.
This value can be set from 0–100%, with 60% being the amount applied by default in iOS.
Why would you use corner smoothing?
So wait, why would we use something like this? Surely corner radius gets us close enough and we don’t really need to resort to such hat-trickery to create UI elements?
The reason for this corner smoothing is actually very simple: it allows the human eye to transition more easily from element to element.
It’s gonna be easier to show you than to tell you, so check this out:
Okay now check this out:
Lastly, try this one on for size:
You see what I’m talking about? Even in designs were color value is a little muddy (like the one above for the orange and drop-shadow) the eye has an easier time transitioning from element to element.
This is because the human optical system generally follows straight lines, and when the eye meets a corner, your optical system does the same thing you do when you physically reach a corner, it wants to stop.
However, with the rounded examples above it’s a different story. The human eye will follow a curve, but then transition off of it much more easily, because there’s no corners to get stuck on.
So what happens is that the boundaries as establishes by more straight lines, but eased by curves. This allows us to have individuated elements without having the visual transition between them be quite so harsh.
But why the super-ellipse specifically?
It smooths the curve itself so that the transition to the rounded corner is also smooth, rather than just the corner itself.
Let’s take a look at this practically.
What this can look like in practice
Again, the difference is not huge, but it can have a significant impact on how “difficult” or “easy” your UI is to visually traverse.
Whether you round your corners, or go the extra mile and apply corner smoothing, there is a noticeable improvement in eye-flow, even if the rounding is relatively small.
The bottom line
So what does this all mean for you?
- Use rounded corners to make the transition between your elements easier on the eyes.
- Use corner smoothing to give your rounded corners subtle easing.
By using corner smoothing, you can make your layout and elements easier to visually traverse, increasing usability, and ultimately leading to higher engagement in your target users.
