FIGS · 2026 Website Redesign

Motion Lab

A sandbox for settling how the new site moves. The cards below open full template prototypes; the individual motion patterns they’re built from live in Motion demos. Every experiment is plain HTML, CSS and JavaScript — no framework, no build-time magic — so whatever gets approved here lifts straight into production. Durations, easings, travel and stagger all come from src/motion.css; nothing is hardcoded.

Every motion demo carries a review toolbar. Drop Speed to 0.2x to watch an easing curve resolve, toggle Reduced to review the accessibility fallback as a real design state, and press H to hide the toolbar for screen recordings.

01 Homepage prototype The full MVP homepage, fluid from 390 to 4K, with the interactive Color Lab — 23 models, click-to-change on desktop, swipe on mobile. Decides whether the motion system holds across a whole page. templateColor Labresponsive 02 New Customer Landing · V1 The first visit, told in order — the Homepage hero's copy with Shop Women / Shop Men, the mission, Scrub Sets and the Uniform Builder as split banners, the core line on the Homepage's product rail with Quick Buy, fabric tabs with their logos, and the Homepage's Color Lab, for Women and Men. Decides how a landing page introduces FIGS to a new customer. templatelandingquick buyresponsive 02B New Customer Landing · V0 (archive) The landing as reviewed through 2026-10-23, frozen for comparison: the Core Line as tabs with ghost previews, fabric tabs over looping plates, and Define Your Uniform with colour-dynamic ghosts and Quick Buy, for Women and Men. archivelandingquick buy 03 PLP · Women’s Scrub Pants The full women’s scrub pants PLP — Core and Limited Edition sections, filter drawer, quick buy and staggered grid reveals. Decides how much motion a PLP can carry before it fights scanning. templatefiltersstagger 04 PLP · Classic Fit Women’s classic-fit scrub pants grouped by fabric — FIONx, FIBREx and FORMx — with a fit-led category rail and the same filter drawer and quick buy. templatePLPfabric sections 05 PLP · Core The men’s Core collection — 132 products across tops, pants, layers, loungewear, footwear and socks, with Load More. The heaviest grid in the lab. templatePLPload more 06 PLP · Charcoal A shop-by-colour PLP: every Charcoal style across tops, pants, underscrubs, outerwear and socks in one grid. templatePLPcolour 07 PLP · Scrub Sets Women’s scrub sets from the Site Workshop deck — a set-shape category rail, the “Ready. SET. Go.” banner and six set cards, each opening Quick Buy and the set PDP. templatePLPsets 08 PDP · Scrub Top The Catarina scrub top PDP — size and type drawer that confirms and closes itself, Shop the Look into Quick Buy, colour-true galleries, reviews, and embroidery from the typewriter card through the configurator to Embroidery Added. Decides whether add-to-bag can stay one CTA through every state. templateadd to bagquick buy 09 PDP · Scrub Pants The Isabel wide-leg pant on the same PDP — size and length, a swipeable Wear It With cross-sell of the four core tops in the pant’s colour, Visual Color Compare and the sold-out waitlist (Navy 6XL). templatecross-sellwaitlist 10 PDP · Preset Bundles The preset-bundle template on the live Wide-Leg Set, where every Scrub Sets PLP card lands. One size drawer shops every product in the set and one ADD adds them all; reviews tab by product. Decides whether a bundle can shop like a single product. templatebundlessize drawer 10B PDP · Men’s Set The preset-bundle template on the live men’s set: the Leon top and Tansen jogger in all 33 colours, with the men’s size charts, its Wear It With row and the Cobaki jacket as Complete the Set. The nav’s men’s Scrub Sets lands here. templatebundlesmen’s 11 Embroidery Personalize Your FIGS — text, icon and logo embroidery on four placements with a live preview, then the Embroidery Added card and the embroidered gallery plate. The same configurator opens from the Scrub Top PDP and the Preset Bundles kit drawer. Decides whether embroidery can be bought on the PDP without leaving it. templateembroideryconfigurator 12 Uniform Builder Build Your Uniform — pick a color, then one product per layer from tops to accessories, each added through Quick Buy. The outfit builds up on an invisible mannequin, Cher’s-closet style, in any of 20 colors. Decides whether a whole uniform can shop as one outfit. templateoutfitterinvisible mannequin 13 Uniform Builder · v1 (archive) The Uniform Builder as reviewed through 2026-10-13, frozen for comparison: the photo hero and an AI-generated human model who wears the outfit as it grows. Decides which outfitter direction carries forward. archiveoutfitterAI model 14 Navigation The global header: hero masthead, compact sticky bar that slides in once the masthead scrolls away, Women mega-menu with Shop by Color, the full-screen mobile drawer, and the account flow — log in, sign up, forgot password, complete profile and the signed-in My Account. Shared by the Homepage, PLP and PDP prototypes. templatestickymega-menuaccount 15 Account My Account, one screen per feature — Profile, Order History, Order Details, Buy It Again, Favorites, Account Details, Addresses and Preferences — with edits in side drawers and Buy It Again through Quick Buy into the shared bag. Decides whether My Account can live inside the redesigned site. templateaccountdrawers 16 Newsroom The press page as a Shopify blog index — the live Newsroom’s 31 articles, twelve a page with Load More, in pill-outlined cards that turn toward the cursor so the photo and the copy slide past the outline. Decides whether press can move to a native Shopify blog with depth. templateblog3D hover 17 Motion demos The library of individual motion patterns — hero reveal, pinned story, grid stagger, PDP parallax, cart drawer and collection landing. One decision per page, each with the review toolbar. 6 demospatternstoolbar

The vocabulary

Not a reference table — a playground. Every value below is read live from src/motion.css, and every specimen runs the real tween. Plot a curve, race CSS against GSAP, drag a duration until it feels right, then export the block and paste it back into the file.