Desperately Seeking Squircles (2018)
14 days ago
- #Figma
- #design
- #mathematics
- Charles Eames defined design as a plan for arranging elements to accomplish a particular purpose, emphasizing the importance of constraints in design.
- The article explores the challenge of implementing Apple's 'squircle' shape in Figma, highlighting the mathematical and design considerations involved.
- Squircles are a blend of squares and circles, offering a smoother transition between straight and curved edges compared to rounded squares.
- The curvature continuity in squircles is crucial for aesthetic smoothness, similar to industrial design principles seen in products like MacBooks.
- Initial attempts to model squircles used superellipses, but these were found to be mathematically incorrect for the iOS icon shape.
- Further research revealed that iOS squircles are constructed using Bézier curves, optimized for similarity to Apple's design.
- The article details the mathematical process of parameterizing squircles, including the use of arc length and curvature to design the shape.
- A simplified Bézier curve approach was ultimately chosen for implementation in Figma, balancing mathematical elegance with practical constraints.
- The final solution allows for adjustable smoothing of corners, applicable not just to squircles but to other shapes in Figma.
- The process underscores the value of simplicity and the trade-offs between perfect mathematical solutions and practical product design.