Desperately Seeking Squircles (2018)

Summary

My story begins long before I started at Figma, on June 10th, 2013, the day Apple released iOS 7. There was something subtle about the update: the home screen’s app chiclets had a juicier, more organic feel. They’d gone from squares with rounded corners, to squircles (a portmanteau of ‘square’ and ‘circle’).What is the difference, you ask? To be fair, it’s slight — A squircle begins as the old rounded square, but with some sandpaper applied to the part where the rounding begins on each side of each corner so the transition from straight to curved is less abrupt.Articulating this using mathematical language is precise: The curvature of a squircle’s perimeter is continuous, whereas a rounded square’s is not. This may seem trivial, a cool story, but subconsciously it really makes a big impact: a squircle doesn’t look like a square with surgery performed on it; it registers as an entity in its own right, like the shape of a smooth pebble in a riverbed, a unified and elemental whole.1.1 — Rounded squares vs squircles: it’s the little things, apparently!For a long time, industrial designers making physical objects have known how important curvature is to an object’s perception. Try taking a careful look at the corners of a Macbook, or at an old-school, wired earbud case under a desk lamp. Notice how difficult it is to find an orientation where the corners have harshly contrasting highlights.This is the result of curvature continuity, and it’s very deliberately included in the design. It’s no surprise that Apple, with fingers uniquely in both the hard and software pies, eventually cross-pollinated their interface designs with industrial ideas by making their icons look like the physical things they produce.Of course, at Figma we love iOS designers, and we feel our users should have the platform elements they need right at their fingertips. In order to give them access to this new shape while designing, we need to find a precise mathematical description so we can start figu...