Figma Explores the Search for Squircles in Design

The article "Desperately Seeking Squircles" investigates the geometric shape known as the squircle, which bridges the gap between a square and a circle. It examines the mathematical foundations of this shape, specifically the superellipse equation, and contrasts it with standard Bezier curves used in most design software.

The text explores the aesthetic and functional benefits of using squircles in user interface design, such as creating softer, more organic visuals while retaining structural definition. It addresses the technical challenges designers encounter when attempting to create perfect squircles with standard vector tools, emphasizing the need for mathematical precision. Ultimately, the piece frames the search for the perfect squircle as a quest for visual harmony in digital environments.

The term squircle is a portmanteau of "square" and "circle," describing a shape that interpolates between the two forms. Unlike a simple rounded square, which uses circular arcs attached to straight lines, a squircle follows a continuous curve defined by a specific mathematical equation. The article highlights the superellipse equation, often attributed to Piet Hein, as the governing formula for this shape.

This mathematical distinction is crucial for understanding the visual properties of the squircle. While standard design tools rely on cubic Bezier curves to approximate curves, these curves often lack the mathematical purity of the squircle. Bezier curves can produce "bumps" or uneven transitions when manipulated, whereas the squircle maintains a consistent rate of curvature.

Key characteristics of the squircle include:

• A continuous curve without straight lines.
• A perimeter that is shorter than a circle inscribed in the same square.
• A visual appearance that feels more natural to the human eye than a standard square.

In the realm of user interface design, the squircle has gained significant traction. It is frequently observed in app icons and button designs, particularly within the Apple ecosystem. The shape offers a compromise: it provides the friendly, approachable feel of a circle while preserving the bounding box efficiency of a square.

The article suggests that the human eye is naturally drawn to curves that mimic organic forms. By using a squircle, designers can reduce the harshness of right angles found in standard rectangles. This reduction in visual tension creates a more pleasant user experience. Furthermore, the squircle allows for larger surface areas for touch targets compared to a circle of the same height, making it highly practical for mobile interfaces.

Designers often struggle to create a true squircle in software like Figma or Adobe Illustrator because these tools are built on Bezier mathematics. Consequently, designers often use "superellipse" plugins or mathematical approximations to achieve the desired shape rather than drawing it manually.

Creating a perfect squircle requires solving for the superellipse equation, which is not natively supported by standard vector path tools. The article details the complexity involved in generating a path that adheres strictly to the formula |x/a|^n + |y/b|^n = 1, where n is typically around 4 for a squircle.

The difficulty lies in the fact that most design software treats curves as segments of circles or ellipses (arcs) or uses Bezier control points. To replicate the squircle's unique curvature, one must calculate the exact coordinates of the path points. The article references the work of Steve Jobs and the early Macintosh team, who were obsessed with the "squircle" for the startup disk icon, utilizing a specific algorithm to render it.

The pursuit of this shape represents a dedication to precision in design. It is not merely about aesthetics but about adhering to a strict geometric standard that ensures consistency across different sizes and resolutions.

The search for the "perfect" squircle is a metaphor for the designer's constant struggle to balance form and function. It represents a move away from the rigid constraints of the pixel grid toward a more fluid, mathematical ideal. While the shape is subtle, its impact on the feel of an interface is profound.

As design tools evolve, the ability to natively create and manipulate squircles may become standard. Until then, the shape remains a specialized pursuit for those willing to delve into the math behind the visuals. The article concludes that the squircle is more than just a trendy shape; it is a fundamental building block for creating digital environments that feel inherently human and balanced.