Desperately seeking squircles | Figma Blog (opens in new tab)

Figma engineer Daniel Furse describes the search for an accurate mathematical model of Apple’s iOS “squircle” shape. The project illustrates Charles Eames’s idea that good design depends on recognizing and working enthusiastically within constraints. Although a superellipse initially appeared to be the answer, careful comparison showed that it was only an approximation, prompting further investigation into Bézier-based constructions.

Design Through Constraints

• Eames defined design as “a plan for arranging elements to accomplish a particular purpose.”
• Furse applies this principle to engineering, where code must balance:
  • Time
  • Simplicity
  • Maintainability
  • Aesthetic quality
• The squircle project became a mathematical example of design involving research, false starts, hidden constraints, and refinement.

Why Squircles Look Different

• Apple’s iOS 7 icons replaced conventional rounded squares with more organic-looking squircles.
• A rounded square has an abrupt transition between its straight edges and curved corners.
• A squircle has continuous curvature around its perimeter, producing a smoother, more unified appearance.
• Similar curvature continuity appears in industrial design, such as MacBook corners and earbud cases, where it prevents harsh changes in reflected highlights.

Modeling the Shape with a Superellipse

• To add squircles to Figma, the team needed a precise mathematical description.
• Early research suggested that Apple’s shape was a superellipse, a generalized ellipse described by parameters a, b, and n.
• With n = 2, the formula produces an ellipse; with equal axes, it produces a circle.
• Increasing n makes the shape increasingly resemble a rounded rectangle, approaching a sharp-cornered rectangle as n approaches infinity.
• A value around n = 5 produced an image that looked very similar to an iOS squircle.

The First False Start

• Despite its visual similarity, the superellipse did not match Apple’s actual icon geometry.
• Detailed follow-up analysis found a small but consistent discrepancy for every value of n.
• This meant that simply approximating the superellipse with Bézier curves would not produce the authentic shape.
• The investigation therefore moved toward alternative constructions, including sequences of Bézier curves for the corners.

The main lesson is that visual resemblance is not enough when reproducing a design precisely: mathematical elegance must be tested against the real artifact, and constraints often reveal the need for a more complex solution.