This lesson is exclusive to members

Figma UI UX Design Essentials

Squircle buttons with iOS rounded courses in Figma

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, in this video we're going to look at squircles, which is, this is a squircley one, and that one is non-squircley. So it is a great word, it kind of, can you see the roundness difference on here, this is kind of an iOS, smooth rounded edges, this is just a regular old geometric rounded corners. We'll learn how to do that in this video, we'll also do kind of like individual rounded corners as well, plus a few shortcuts, all right, let's get squircling. 

So let's start with squircles, because it has the best name, we're going to start with a couple of buttons down here on my Home page. I'm going to grab the Rectangle tool, which is the R key, I'm going to drag out some sort of button, I'm going to pick a color style, a good enough contrast, I think it's all right. 

We'll have two of them, and what we'll do is, we'll do both of them with a rounded corner of say 10. Now the squircle thing is, actually called something called Corner Smoothing in here. So what we're going to do is we need to click on this, it says, transition these from all connected corners to independent corners. 

Now we can see all this, and here, it is in here, they call it Corner Smoothing, and what you can do is just drag it right up. Can you kind of see it there, that, I'll keep dragging it, and I'll get the editor to zoom in, can you see, it kind of like flexes, so that is squircle, not squircle, squircle, not squircle. 

So it is kind of a square, kind of a circle, what do you think in comparison to this one? It's a very Apple iOS thing, is where it's from,you can use it anywhere, but it's borrowed from them, they did some, yeah, they did it, and it's cool. I found this to kind of give you a bit more of a better visual example, it's from Figma, if you Google "Figma squircle", if you can spell it, and it'll bring it to something like this, so yeah, you don't have to do squircles, what you might do is, you might do independent rounded corners though. 

So remember, you can go independent rounded corner, you could say, actually, I want, can you see over here, if I click, you see those icons, it tells you which one. So up the top, I might go, you go back to 0, see this little kind of tab thing on it, I might do it over here, so you can do that manually by typing it, or you can do it over here. I've got my rectangle here, if I hold down, the 'Option' key on a Mac, 'Alt' key on a PC, and I just click and drag one of them, you can kind of just work on this. 

 All right, that's going to be it, corner smoothing or not, let me know in the comments, is it worth it, are you-- can you see the difference? I like it, it's got so much more personality for a button, anyway. All right, on to the next video.