TL;DR
A Figma engineer investigated Apple’s iOS 'squircle' icon shape, tracing prior work and testing mathematical models. The team found the commonly suggested superellipse formula insufficient and moved toward a parametrizable Bézier-based smoothing approach that could generalize across many cornered shapes.
What happened
An engineer at Figma was tasked with adding Apple’s distinctive 'squircle' shape to the design tool. The investigation began by reviewing prior attempts: a proposed superellipse formulation matched the look loosely but showed systematic differences from the actual iOS icons. Researchers including Mike Swanson and Manfred Schwind produced Bézier-based reconstructions that matched the official shape, confirming that a sequence of Bézier curves could reproduce the icon. However, the iOS implementation contained small quirks—minor asymmetry and an unintended straight segment—that the Figma team did not want to replicate. Rather than copying Apple’s fixed formula, the engineer pursued a continuously adjustable smoothing scheme that could reproduce the iOS appearance at one setting while allowing designers to gradually morph between rounded rectangles and squircles. The goal expanded from simply cloning a single icon to offering a flexible parameter that could be applied to stars, polygons, and arbitrary vector corners.
Why it matters
- Visual continuity: shapes with continuous curvature read as unified objects and can change how users perceive UI elements.
- Design fidelity: matching platform-specific shapes helps designers prototype accurately for target platforms.
- Tool flexibility: a parametrizable smoothing feature could extend beyond icons to many cornered shapes in vector workflows.
- Robust implementation: avoiding replication of platform-specific bugs keeps code and tests simpler and more predictable.
Key facts
- The iOS icon transition toward squircles became visible with iOS 7, released June 10, 2013.
- A superellipse formula can describe circles, ellipses, and superellipses depending on parameters (a, b, n); n=2 yields an ellipse, larger n produces a superellipse.
- Early suggestions used superellipse parameters that looked close to Apple’s icon but did not match it exactly—there was a consistent discrepancy.
- Independent work reconstructed the iOS shape using sequences of Bézier curves; Mike Swanson and Manfred Schwind produced matching Bézier structures.
- The iOS implementation exhibited small anomalies: asymmetry in corners and a tiny straight segment on one side.
- Figma’s team chose not to replicate the exact iOS bug; they handled it by mirroring a bug-free half of the corner where needed.
- The team prioritized a parametrizable smoothing scheme so designers can smoothly adjust between rounded rectangles and squircles.
- A flexible smoothing parameter could be applied to other primitives—stars, polygons, and arbitrary vector networks.
What to watch next
- not confirmed in the source
- not confirmed in the source
- not confirmed in the source
Quick glossary
- Squircle: A shape intermediate between a square and a circle; it has more gradual curvature transitions than a rounded rectangle.
- Superellipse: A generalized ellipse described by an exponent parameter that controls how rounded or rectangular the shape is.
- Bézier curve: A parametric curve commonly used in vector graphics, defined by control points that determine its shape.
- Curvature continuity: A property where the curvature of a shape changes smoothly along its boundary, avoiding abrupt transitions.
Reader FAQ
What is the difference between a rounded square and a squircle?
A squircle has continuous curvature at its perimeter so transitions from straight to curved feel smoother; a rounded square can have abrupt curvature changes.
Was the superellipse the final answer for Apple’s icon shape?
No. The superellipse looks similar but showed systematic discrepancies compared with the actual iOS icon.
Did Figma copy Apple’s exact squircle implementation?
Figma examined the iOS approach and confirmed Bézier reconstructions matched it, but avoided reproducing minor iOS quirks and pursued a parametrizable smoothing method instead.
Has Figma shipped the parametric squircle feature?
not confirmed in the source
10 UI/UX Design Internships Figma Users Swear By October 30, 2017 By Valerie Veteto Not all internships are created equal, especially in tech. WORKING WELL UI/UX TIPS & INSPIRATION APRIL…
Sources
- Desperately Seeking Squircles (2018)
- Goodbye Circles, Hello Squircles: Perfect Corners in CSS …
- The Hunt for the Squircle
- Squircles on the Web — Houdini to the rescue – Pavel Laptev
Related posts
- Engineering Schizophrenia: Applying Systems Debugging to Psychosis
- Interactive California Budget: Year-by-Year Revenue and Expenditure Projections
- Pigeon’s Device (2009): Sparse Archive Entry on PigeonsNest.co.uk