Squircles
Actual publishing date: Jan 9, 2022
👋 Hey, everyone!
Some time ago I started buying some 🍎 shit. There was some time since I used an 🍎 device, so the iOS design guidelines were a bit new for me.
After using the the 🍎 ecosystem for a while (a couple of months) I started a romance with that sleek, simple and well done interface.
I started trying to use those guidelines (or something inspired in them) in personal projects and I noticed something was off. Something wasn't “smooth” or “lickable” (you get me? When something is so sexy and good looking you wanna lick the screen? I hope I didn't sound like a weirdo lol) enough. Then I learned the bitter and sweet truth about what was going on. It was them, the squircles.
Squircles are basically another way to draw rounded rectangles. Instead of a “harsh” curve, it's a little more pointy. It's very subtle, but it makes a big difference in how final products look.
Here’s another point of view:
It’s a nice little touch to make everything more enjoyable.
On swift (iOS native language) apps it’s really easy to achieve that effect, but what about other areas?
Design apps
Only a small portion of the available design apps enables the user to use that kinda stuff.
Figma and Sketch are the only ones I know that offer the feature. Adobe XD and Framer doesn’t have anything similar.
There’s a really cool article about the Squircle development from one of the Figma developers: https://www.figma.com/blog/desperately-seeking-squircles/
Web Development
Unfortunately there’s no easy solution for that. The easiest way for us to mimic that function is using clip-path property from css mixed with some JS.
Here’s a nice little package to make easier to generate the needed code:
https://www.npmjs.com/package/figma-squircle
Well, this is it 🎉
Thanks for reading.
And here it goes the wallpaper:
