Designing for performance from the first sketch
Speed is a design decision. Here is how we keep motion-rich sites fast without giving up the craft.
Beautiful interfaces lose their shine when they stutter. We set a performance budget before we open Figma, and every animation has to earn its place in it.
Budget first
We agree on a JavaScript budget, an image budget and target frame rates for mid-range phones. Designers and engineers share the same numbers.
Animate the cheap things
Transforms, opacity and clip-paths run on the compositor. Layout properties don’t. We design motion around what the browser can do quickly.
Load 3D last
WebGL scenes are progressive enhancements. The headline, copy and call to action always render as HTML first.