computational-geometry

Behind the feature: shedding light on shadow spread | Figma Blog (opens in new tab)

Figma’s shadow spread feature appeared simple but required solving difficult geometry and rendering problems. Shadow spread must expand or contract a shape uniformly in every direction, which cannot be achieved reliably by merely scaling complex geometry. The feature ultimately illustrates how seemingly small product requests demand careful algorithmic and product tradeoffs. ## What Shadow Spread Does - Figma added support for adjusting shadow spread on: - Rectangles - Ellipses - Frame backgrounds - Component backgrounds - The feature mirrors CSS `box-shadow` behavior. - Users had requested the capability for more than two years. ## Why Shadow Rendering Is Complicated - A standard drop shadow is created by: - Copying an object’s geometry - Filling it with a single color - Applying a blur - Rendering it beneath the original object - Simply scaling the geometry works for basic rectangles but fails for complex shapes. - For shapes with holes, such as the Figma logo, spread must expand or contract every boundary independently rather than scale the entire object. - Correct behavior requires preserving the shape’s internal structure while offsetting its edges uniformly. ## Algorithmic and Rendering Constraints - Several algorithms could produce the desired geometry, but they did not fit cleanly into Figma’s existing rendering architecture. - Using strokes as a shortcut was also unsuitable because: - Stroke handling treats certain vertex angles differently from shadow spread. - The prototype renderer lacked stroke-generation code. - Implementing the feature robustly risked adding complicated geometry logic to two separate rendering codebases. ## Lessons from the Implementation - The project began as a small Maker Week experiment but grew into a weeks-long engineering effort. - The work involved exploring geometry algorithms, studying relevant W3C specifications, and making product-prioritization decisions. - The feature demonstrates that visual effects which appear basic in a user interface can require substantial low-level rendering infrastructure. Figma’s approach was to balance visual correctness, implementation complexity, and compatibility with its existing renderers rather than pursue an idealized solution at any cost.

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.

Delete and Heal for Vector Networks | Figma Blog (opens in new tab)

Figma’s “delete and heal” feature removes a vertex while preserving the surrounding shape as much as possible. What begins as a simple graph-editing operation becomes complex for curved segments and vector networks, where vertices may connect to many edges. Figma addresses this by fitting replacement Bézier curves and pairing edges according to their geometry. ## Basic Deletion and Healing - Standard deletion removes the selected vertex, its incident edges, and any fills that depend on those edges. - “Delete and heal” instead attempts to connect the neighboring vertices. - If a vertex touches only one edge, that edge is removed because no meaningful healing is possible. - Triangles and other small paths require special-case decisions about whether healing produces one edge or multiple edges. - The behavior differs between open and closed paths. ## Preserving Curvature - Curved segments are represented as cubic Bézier curves. - Deleting a vertex joins two cubic curves into one replacement curve. - Figma keeps the original endpoints fixed but adjusts the neighboring control handles to preserve the original curvature. - The algorithm: - Samples points along both original Bézier curves. - Treats the shared vertex as a single point. - Fits a new cubic Bézier curve through the resulting samples. - Figma uses a curve-fitting technique from Philip J. Schneider’s “An Algorithm for Automatically Fitting Digitized Curves,” published in *Graphics Gems*. ## Healing Vector Networks - Unlike traditional path-based editors, Figma models vector objects as undirected multigraphs with edge identity. - A vertex can therefore have more than two incident edges. - If the vertex has an odd number of connected edges, Figma removes all incident edges because no complete pairing is possible. - With an even number of edges, the edges are paired and replaced with new edges. - To determine which edges are “opposite,” the incident edges are sorted by their angles around the deleted vertex. - This graph-based approach allows delete-and-heal to work on branching vector networks, not just simple paths. Figma’s implementation combines graph topology, geometric pairing, Bézier sampling, and curve fitting to make deletion feel intuitive while retaining as much of the original design as possible.