close

Squirclemorphism

Mobile design trend in which squircles — special forms — are used. This trend appeared with the release of iOS 7, where application icons were masked with squircles. Now this shape is used by web designers outside the iOS platform.

 

6460f66dbd3eadde85cf830c572903f8
Here is a typical squircle. It is something between a square and a circle, but not just a rounded square. It’s closer to superellipse. The trend is about avoiding sharp corners and straight lines. It is considered that smooth, rounded, curving lines look more modern

How to Draw a Squircle

    In Figma

    To create a squircle, enable the Corner Smoothing option. To do this, click on the corner radius icon and open the detailed radius settings for each corner. Here you will see the required parameter in the menu with three dots. You have to click it and set the parameter from 60 to 100% — the highest value is typical for iOS design. You can also use this plugin in Figma to create a squircle.

    In Sketch

    To reproduce the squircle shape in Sketch, you need to create a rectangle-shaped layer with rounded corners. You can set the radius of these corners in the Inspector panel — it is on the right — just select the Smooth Corners option from the Radius menu. That's all.

    Useful Tools

    share the term