From Figma to Shopify: A Pixel-Accurate Handoff Workflow

Design handoff is where most Shopify builds quietly lose quality. Here's the workflow that keeps the final theme matching the Figma file, pixel for pixel.

1. Extract the design tokens first

Before writing a single section, pull spacing, type scale, and color values out of Figma into CSS custom properties. This becomes the theme's design-token layer — everything else references it.

2. Break the page into schema-driven sections

Every distinct visual block becomes its own Liquid section with a {% schema %} block exposing the settings a merchant would realistically want to change — not every CSS value, just the meaningful ones (headline, image, CTA link).

3. Build responsive behavior from the smallest breakpoint up

Mobile frames in Figma are the source of truth for the base styles; larger breakpoints layer on with min-width media queries, never the reverse.

4. Match typography with real font-loading, not approximations

Load the exact web font Figma specifies via {{ 'font.woff2' | asset_url }} with font-display: swap, rather than substituting a "close enough" system font.

5. QA against the Figma file directly

I keep the Figma tab open side-by-side with the live preview during QA — overlaying screenshots when something looks even slightly off, rather than eyeballing it.

The result: a theme merchants can actually edit through the theme editor, that still looks exactly like what the client approved.