Figma to Shopify: The Complete Conversion Guide (No Design Left Behind)

You've invested weeks (or months) in a Figma design. Every pixel is deliberate, every interaction mapped out, every brand element precisely placed. Now comes the critical question: how do you turn it into a Shopify theme without losing what makes the design special?

This is where most projects go wrong. The handoff from design to development is where designs get diluted, responsive behavior gets improvised, and "close enough" becomes the standard. At Jhango, we've converted over 200 Figma files into production Shopify themes. This guide covers the complete process — from organizing your Figma file for a clean handoff to the development decisions that preserve design integrity.

Phase 1: Preparing the Figma File for Conversion

A poorly organized Figma file costs development time and design accuracy. Before any code is written, the design file needs to be structured for Shopify conversion.

Layer Structure That Maps to Shopify

Shopify themes are built with sections and blocks. Your Figma file should mirror this architecture:

• Top-level frames = Pages — Homepage, Product Page, Collection Page, Cart, etc. Each should be a separate frame in Figma
• Major content areas = Sections — Hero, Featured Collection, Testimonials, FAQ, Newsletter. Each should be a distinct group or frame within the page
• Repeating elements within sections = Blocks — Individual testimonial cards, FAQ items, feature cards. These should be Figma components

Name your layers using a convention that maps to Shopify. Instead of "Frame 432," use "section-hero" or "section-featured-collection." This naming convention carries directly into the Liquid template code.

Responsive Breakpoints

Design at minimum three breakpoints. Here are the ones that map to Shopify's standard media queries:

Breakpoint	Figma Frame Width	CSS Media Query	What It Covers
Mobile	375px	max-width: 749px	All phones. This is your primary design — 70% of traffic
Tablet	768px	750px - 989px	iPad portrait, small laptops
Desktop	1440px	min-width: 990px	Laptops and monitors

Component Architecture in Figma

Use Figma components for anything that repeats or has variants. These map directly to Shopify blocks or snippets:

• Button component with variants: primary, secondary, outline, large, small. These become CSS classes in the theme
• Product card component — Used in collection grids, featured products, and search results. One component, one snippet in Liquid
• Section header component — Tag, title, subtitle pattern. Consistent across the site
• Form input components — Text field, select, checkbox, radio. Consistent form styling across the theme

Design Tokens / Style Guide

Create a dedicated "Style Guide" page in your Figma file that documents:

• Color palette — Every color used, with names. These become CSS custom properties (--color-primary, --color-text-body, etc.)
• Typography scale — All font sizes, weights, and line heights. These become CSS variables and font-size classes
• Spacing scale — Padding and margin values. Using a consistent scale (4, 8, 12, 16, 24, 32, 48, 64, 96) keeps the design system clean
• Border radius values — Small, medium, large, full. CSS variables
• Shadow definitions — If used. CSS variables

Phase 2: Mapping Figma to Shopify Architecture

This is where design meets development decisions. Each Figma element needs to be mapped to the right Shopify concept.

What Becomes a Section

A Shopify section is a self-contained, reusable content area with its own settings. In Figma terms: if a content area appears as a full-width strip across the page that could potentially be reordered, hidden, or duplicated — it's a section.

// Example: Hero section schema definition
{% schema %}
{
  "name": "Hero Banner",
  "tag": "section",
  "class": "section-hero",
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    },
    {
      "type": "richtext",
      "id": "subheading",
      "label": "Subheading"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    }
  ],
  "presets": [
    {
      "name": "Hero Banner"
    }
  ]
}
{% endschema %}

What Becomes a Block

Blocks are repeating items within a section. In Figma: if something appears multiple times in a grid or list (feature cards, FAQ items, team members), each item is a block.

Blocks are added, removed, and reordered by the merchant through the theme editor. Design your Figma components to work with any number of instances: What does the section look like with 1 card? 3? 6? 8? The layout needs to handle all scenarios gracefully.

What Becomes a Snippet

Snippets are reusable Liquid partials. In Figma terms: components used across multiple sections or pages (product cards, icons, buttons). They don't have their own settings — they receive data from the section that renders them.

The Mapping Table

Figma Element	Shopify Concept	Files Created
Full-width content strip	Section	sections/hero-banner.liquid
Repeating card within a section	Block	Defined in section schema
Reusable component (product card)	Snippet	snippets/product-card.liquid
Page-level layout	JSON Template	templates/index.json
Header / Footer	Section Group	sections/header.liquid
Design tokens (colors, fonts)	Theme Settings	config/settings_schema.json

Phase 3: Development Workflow

Setting Up the Development Environment

# Install Shopify CLI
npm install -g @shopify/cli @shopify/theme

# Clone your starter theme or create new
shopify theme init my-theme

# Start local development with hot reload
shopify theme dev --store your-dev-store.myshopify.com

Shopify CLI's hot reload makes development fast — changes to Liquid, CSS, and JS files reflect in the browser within seconds. Use a development store (free) for building, and preview on the live store only when ready for QA.

CSS Architecture

We recommend a single CSS file with CSS custom properties (variables) that map to your Figma design tokens. Here's the structure:

/* 1. Design Tokens (from Figma) */
:root {
  /* Colors */
  --color-primary: #377e62;
  --color-text-dark: #1a1a1a;
  --color-text-body: #4a4a4a;
  --color-bg-alt: #f8f4ef;

  /* Typography */
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-h1: clamp(32px, 5vw, 56px);
  --font-size-h2: clamp(24px, 3.5vw, 36px);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-section: 80px;

  /* Other */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --container-max: 1200px;
}

/* 2. Base / Reset */
/* 3. Layout (container, grid) */
/* 4. Components (buttons, forms, cards) */
/* 5. Sections (each section's unique styles) */
/* 6. Utilities (text-center, visually-hidden, etc.) */

Handling Dynamic Content

This is the biggest gap between Figma and Shopify. Figma designs use placeholder content that's always the perfect length. Real Shopify stores have:

• Product titles from 3 to 80 characters — Your card layout must handle both without breaking
• Images in inconsistent aspect ratios — Use object-fit: cover with fixed aspect ratios to normalize
• Descriptions from empty to 2,000 words — Design for both extremes
• Variable number of variants — A product might have 1 color or 24
• Missing data — What happens when there's no product image? No description? No reviews? Every section needs empty states

Phase 4: Making the Theme Editor Powerful

A great Figma-to-Shopify conversion isn't just pixel-perfect — it empowers the merchant to make changes without touching code. This means thoughtful schema definitions.

What Should Be Editable

• All text content — Headlines, body copy, button labels. Use text, richtext, or inline_richtext input types
• Images — Every image should be replaceable via image_picker
• Colors — Key accent colors per section via color or color_scheme selectors
• Layout options — Number of columns, text alignment, section padding via select or range inputs
• Visibility toggles — Show/hide optional elements (badge, subtitle, button) via checkbox

What Should NOT Be Editable

• Font sizes, line heights, letter spacing — These are design decisions that should be consistent
• Animation timing and easing — Hardcoded for consistency
• Grid gaps and structural spacing — Part of the design system, not merchant-configurable
• Border radius on components — Should follow the design system scale

Phase 5: Quality Assurance

The QA Checklist

1. Pixel comparison — Overlay Figma screenshots on the live theme at each breakpoint. Use browser extensions like PixelPerfect or PerfectPixel
2. Content stress testing — Test with very long titles, very short titles, missing images, empty descriptions, 1 product, 100 products
3. Responsive behavior — Manually resize the browser from 320px to 1920px. Watch for layout breaks at every point, not just the standard breakpoints
4. Browser testing — Chrome, Safari (especially iOS), Firefox, Edge. Safari rendering differences are the most common source of bugs
5. Theme editor testing — Can the merchant change every setting without breaking the layout? Does every section work when added via the theme editor?
6. Performance — Run Lighthouse. Target 90+ on performance, accessibility, best practices, and SEO
7. Accessibility — Keyboard navigation, screen reader testing, color contrast verification

Common QA Failures

Issue	Cause	Fix
Text overflows on mobile	Fixed width containers	Use percentage widths and overflow-wrap: break-word
Images stretch or squash	No aspect ratio enforcement	aspect-ratio CSS property + object-fit: cover
Fonts look different	Figma vs browser rendering	Fine-tune letter-spacing and font-weight to match visually
Sections break when reordered	Styles dependent on section order	Make each section fully self-contained with no ordering dependencies
Safari layout issues	Missing -webkit- prefixes	Use autoprefixer or manually add required prefixes

"The goal of a Figma-to-Shopify conversion isn't just to make it look like the design. It's to build a system that looks like the design today and continues to look great as the merchant adds products, changes content, and evolves their brand."

Need a pixel-perfect Figma-to-Shopify conversion? Learn about our Figma to Shopify service or send us your Figma file for a free estimate. We'll review the design, identify any potential conversion challenges, and give you a timeline and quote.