Member-only story
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…
