From Figma to Shopify: The Design-to-Store Pipeline

Designing a beautiful Shopify store in Figma is the easy part. Translating that design into a live store that matches your mockups - that's where projects stall. After building raxxo.shop from Figma designs to production, here's the pipeline that makes the translation reliable.

Phase 1: Design with Implementation in Mind

The biggest mistake in design-to-Shopify workflows happens at the very beginning: designing things that Shopify can't easily render. Before opening Figma, understand the constraints:

  • Shopify renders HTML + CSS. No WebGL, no complex animations, no canvas-based effects (unless you add custom JavaScript, which slows your store).
  • Sections are stacked vertically. The theme editor arranges sections top-to-bottom. Overlapping sections require CSS tricks.
  • Images are served via Shopify's CDN. You don't control exact compression, but you control dimensions and format.
  • Mobile is 70%+ of traffic. Design mobile-first or you're designing for the minority.

Figma Structure That Maps to Shopify

Organize your Figma file to mirror Shopify's section model:

  • One frame per section. Each frame will become one Liquid section file.
  • Name frames with your section prefix. "rx-hero," "rx-features," "rx-pricing" - these become your file names.
  • Mark editable content. Use Figma annotations or a naming convention to indicate which text and images should be editable in the Shopify theme customizer.
  • Design at 1440px and 375px. Desktop and mobile breakpoints. If it works at both, it'll work everywhere between.

Phase 2: Extract Design Tokens

Before writing any code, extract every reusable value from your Figma design into a token list:

  • Colors - every unique color, including opacity variations
  • Typography - font families, sizes, weights, line heights
  • Spacing - padding, margins, gaps between elements
  • Borders - widths, colors, radii
  • Shadows - box-shadows, text-shadows
  • Effects - backdrop-filter values, gradients, blend modes

These tokens become CSS custom properties at the top of your section styles. When the design changes, update the token and every section that references it updates automatically.

AI makes this extraction fast. Share your Figma file with Claude (via MCP or screenshots), describe your token needs, and it generates the CSS custom properties. For RAXXO, the token extraction for 42+ sections took an afternoon.

Phase 3: Build Section by Section

With tokens defined, build each section as an independent Liquid file. The workflow per section:

  1. Reference the Figma frame. Open the specific frame for this section.
  2. Write the HTML structure. Map Figma layers to semantic HTML elements.
  3. Apply CSS using tokens. Reference the custom properties defined in phase 2.
  4. Define the schema. Create settings for every piece of content the store owner should be able to edit.
  5. Test responsive behavior. Check at 375px, 768px, and 1440px.
  6. Compare to Figma. Side-by-side comparison, fix discrepancies.

The AI Advantage

This is where AI assistance transforms the workflow. Describe the section to Claude (or better, show it via Figma MCP), and it generates the Liquid/HTML/CSS in one pass. The first pass is usually 85-90% accurate. A few manual tweaks bring it to pixel-perfect.

For complex sections with interactions (accordions, tabs, carousels), add the JavaScript at the end, scoped to the section. Use minimal, vanilla JS - no libraries.

Phase 4: CSS Isolation

Every CSS class uses the rx- prefix (or whatever prefix you chose). This is critical. Without it, your styles will conflict with the theme's styles in unpredictable ways.

/* Good */
.rx-hero-heading { font-size: 48px; }

/* Bad - will conflict with theme */
.heading { font-size: 48px; }
h1 { font-size: 48px; }

Also avoid styling bare HTML elements (h1, p, a) in your section CSS. Always use class selectors. The theme has its own bare element styles, and overriding them causes cascading issues across the store.

Phase 5: Theme Editor Integration

A well-built section is one the store owner can customize without touching code. Schema settings should expose:

  • All text content (headings, body text, button labels)
  • All images (using image_picker type)
  • All links (using url type)
  • Layout toggles (show/hide certain elements, change alignment)
  • Color overrides (for sections that should support multiple color schemes)

Use blocks for repeatable content. A testimonials section should use blocks so the store owner can add or remove individual testimonials. A features grid should use blocks for each feature card.

Phase 6: Image Optimization

Images are the biggest performance factor. Optimize before uploading to Shopify:

  • Use WebP or AVIF where possible (Shopify's CDN can auto-convert)
  • Size images to 2x display size for retina (a 600px displayed image needs a 1200px source)
  • Use srcset for responsive images that serve appropriate sizes per viewport
  • Lazy load everything below the fold

Phase 7: Quality Assurance

Before going live, test on:

  • iPhone Safari (the most common mobile browser for e-commerce)
  • Android Chrome
  • Desktop Chrome and Firefox
  • Shopify theme editor preview (sometimes renders differently than the live store)

Common issues to check:

  • Backdrop-filter (blur) performance on older devices
  • Font rendering differences between macOS and Windows
  • Overflow handling on small screens
  • Image aspect ratios on different content

Maintaining the Pipeline

After launch, the pipeline continues. New pages, new sections, design updates - all follow the same flow: Figma first, then Liquid. This discipline prevents the gradual drift where live sections diverge from the original design.

Keep your Figma file as the design source of truth and your Liquid sections as the implementation source of truth. When they disagree, decide which is correct and update the other. Never let them drift apart silently.

The pipeline adds structure to what's often a chaotic process. Structure slows you down initially but accelerates everything after the first few sections. By the time you're building section 15 of 42, the workflow is automatic and each section takes a fraction of the time the first ones did.

Dieser Artikel enthält Affiliate-Links. Wenn du dich darüber anmeldest, erhalte ich eine kleine Provision - für dich entstehen keine Mehrkosten. Ich empfehle nur Tools, die ich selbst nutze. (Werbung)