Service · Build
Figma to Shopify
Design handed over as a component system, not a stack of static screens — implemented so merchandisers can assemble new pages without a developer and without breaking the design.
- Figma
- Liquid
- CSS custom properties
- Online Store 2.0
- Group
- Build
- Starts with
- Technical audit
- Delivery
- Git + staging theme
- Handover
- Written documentation
01Overview
Handing a Figma file to a developer and hoping for pixel accuracy is how design systems degrade one landing page at a time. Component mapping — reducing every frame to a shared set of sections, blocks and tokens before writing any Liquid — is what actually keeps a storefront consistent past launch week.
We treat the handover as an engineering problem: type scale, spacing and colour become tokens, editor settings get constrained to combinations that stay on-brand, and every breakpoint is reviewed against the source file before sign-off. That's what stops the tenth campaign page from quietly drifting off-brand.
The outcome is a build your merchandising team can extend on their own, because the constraints that keep it correct are built into the section library rather than relying on someone remembering the original file.
02The problem
Beautiful Figma files become inconsistent storefronts when each screen is implemented literally, frame by frame, instead of being mapped to a shared component system with tokens, so the fifth landing page drifts noticeably from the first.
03You will recognise this if
- The live store no longer matches the design system
- Every new page needs a developer
- Mobile layouts were an afterthought
- Spacing and type vary page to page
- Editors can't safely rearrange sections without breaking them
04How we work on it
- 01
Component mapping
Every frame in the file reduced to the smallest set of reusable sections, blocks and tokens before any implementation begins. This step is where most inconsistency gets prevented, not fixed afterwards.
- 02
Tokenised styling
Type scale, spacing, colour and radius held as design tokens rather than hard-coded values, so a brand refresh becomes a variable change instead of a re-implementation.
- 03
Editor guardrails
Section settings are constrained to the combinations that stay on-brand at every breakpoint, so merchandisers get flexibility without the ability to break the layout.
- 04
Responsive build-out
Mobile and tablet breakpoints are designed and reviewed alongside desktop, not derived from it afterwards as an afterthought.
- 05
Design QA
Side-by-side review against the source Figma file at three breakpoints, checked pixel by pixel before sign-off — spacing, type, states and interaction included.
04What you get
Deliverables, not decks.
- Component and token inventory
- Responsive section library
- Theme editor settings schema
- Interactive states (hover, focus, loading, empty)
- Design QA report against source file
- Content guidelines for editors
- Storybook-style section preview environment
1# sections/main-collection.liquid2{% liquid
paginate collection.products by 243 render 'card-product', lazy: forloop.index > 64{% endliquid %}5 6// above-the-fold budget: 12ms server, 0 CLSDelivery pipeline
- Audit
- Scope
- Build
- QA
- Measure
05What changes
- Design system holds past launch
- Tokenised styling means new pages stay visually consistent without developer oversight on every change.
- Merchandisers can self-serve
- New landing pages are assembled from the section library inside the theme editor, not built by a developer each time.
- Mobile is a first-class breakpoint
- Responsive behaviour is designed and reviewed, not inferred from the desktop layout after the fact.
06How an engagement runs
- 01
Audit
We review the Figma file for component and token gaps, and flag anything unrealistic for Shopify's editor before quoting scope.
- 02
Scope
Component and token inventory agreed with your design lead, defining exactly what sections and settings will exist.
- 03
Delivery
Build reviewed against the source file at each breakpoint, with a documented QA report before sign-off and handover.
07Stack
- Figma
- Liquid
- CSS custom properties
- Online Store 2.0
- Storybook-style section preview
09Questions
More in Build
Figma to Shopify
Send us the store and the symptom.
A senior engineer reads it, tells you what is actually going on, and scopes only what the evidence supports.