How to Convert a Figma Design to a Shopify Theme

Converting a Figma design to a Shopify theme is a translation job, not an export job: you are taking static frames and components and rebuilding them as Liquid sections and blocks, with design tokens mapped to theme settings so a merchant can edit content without touching code. There is no reliable one-click converter that does this well — the real workflow is dev-mode inspection, a token pass, and a section-by-section build. If you would rather skip the translation step entirely, Polo Themes sells matched Figma-and-Shopify pairs (Optics, Medical, Wosa, Course Whiz, Electronix, Groxery) where the handoff has already been done for you.

This guide walks through that workflow in the order a working developer would actually do it: how to read a handoff-ready Figma file in dev mode, how to turn design tokens into a Shopify theme's settings, how to map frames onto Shopify's sections-and-blocks model, and where teams typically lose the most time. It assumes you already have a Figma file and a Shopify theme (or Shopify's Horizon starting point) and want to bring the two together.

Why This Conversion Is Harder Than It Looks

Figma describes what a screen looks like at one point in time. Shopify needs something that looks right across an entire catalog, in a theme editor where a merchant can add, remove, and reorder pieces of the page without breaking the layout. A hero banner that looks perfect in Figma with a 40-character headline needs to survive a merchant typing 90 characters into that same field. A product grid designed around four demo products needs to hold up at four hundred. That gap — between a fixed design and a flexible template — is most of what "converting" a design actually means.

The second source of difficulty is that Shopify themes are not just HTML and CSS: they are built around Liquid templating, a specific file structure (sections, blocks, snippets, settings schemas), and the Shopify theme editor's expectations about what merchants can customize. A design can be pixel-perfect and still be unusable as a theme if it was never broken down into the section/block units Shopify expects.

Step 1: Get the Figma File Into Dev Mode

Figma's dev mode (sometimes still called Inspect) is the starting point, and skipping it is the single most common reason handoffs go badly. Dev mode gives you exact spacing, type styles, color values, corner radii, and component structure without guessing from a screenshot. If you are the one building the theme, open the file in dev mode yourself rather than working from exported PNGs or a shared read-only link — screenshots lose the underlying values you need.

• Check that layers are named meaningfully (Hero / Heading, not Group 14) — this is what makes a section-by-section build possible instead of guesswork.
• Look for Figma variables or styles bound to color and text layers rather than hard-coded hex values sprinkled across frames.
• Confirm components (buttons, cards, badges) are actual Figma components with variants, not duplicated static shapes — this tells you where reusable Liquid snippets should exist.
• Note responsive frames if provided (desktop, tablet, mobile) — if only one width exists, you will need to make reasonable breakpoint decisions yourself.

A design file that fails most of this checklist is not unusable, but it means more of the translation work falls on you rather than being handed to you cleanly. This is exactly the gap that a matched Figma-and-theme pair closes: when a UI kit like our Optics or Wosa Figma kit is built by the same team that builds the matching Shopify theme, the components in the file are already named and structured the way the theme's sections expect, because the theme came from that same file.

Step 2: Turn Design Tokens Into Theme Settings

Before touching a single section, extract the design's tokens — colors, type scale, spacing scale, radii, and shadow styles — and decide how each maps to Shopify's theme settings schema in config/settings_schema.json. This is the step that determines whether a merchant can later change their brand color from the theme editor, or whether it is baked into CSS and requires a developer every time.

• Color: map each Figma color style (primary, secondary, background, text, border, accent) to a corresponding color_scheme or color setting, not a hard-coded value in a Liquid or CSS file.
• Type scale: map heading and body type styles to font picker settings and a small set of size tokens (for example heading-large, heading-medium, body) rather than one-off font-size declarations per section.
• Spacing: convert Figma's spacing values into a consistent scale (4/8/16/24/48px or similar) used across margin and padding settings, so sections stay visually consistent even when merchants reorder them.
• Corner radius and shadows: these are easy to skip and are exactly what makes a converted theme look slightly "off" from the design — capture them as settings too, not as inline styles.

Doing this token pass before building sections saves significant rework later. If you build ten sections first and then realize the design's spacing scale was never formalized, you end up going back through every section to fix inconsistent padding — a token-first approach avoids that entirely.

Step 3: Map Figma Frames to Sections and Blocks

This is the core of the conversion. Shopify's Online Store 2.0 model is built around sections (self-contained, reorderable regions of a template, defined in sections/*.liquid with a JSON settings schema) and blocks (repeatable child elements within a section, like slides in a carousel or rows in a feature list). A Figma page is a flat visual composition; a Shopify template is a stack of independently configurable sections. Your job is deciding where those seams go.

• Walk the homepage frame top to bottom and mark natural breaks: hero, featured collection, value props, testimonials, newsletter signup. Each of these typically becomes one section.
• Within a section, identify what repeats — three feature cards, five testimonial quotes, an arbitrary number of collection tiles — and model that as a blocks array in the section schema rather than hard-coding a fixed count.
• Give every editable piece of text or image a setting (text, richtext, image_picker, url) so merchants can change copy and imagery without a developer, matching what the design implies is "content" versus what is structural layout.
• Reuse shared visual elements (buttons, badges, price displays) as Liquid snippets referenced by multiple sections, mirroring how the Figma file reused the same component across frames.

Product and collection pages deserve extra care in this step, because they are the pages a Figma mockup least often designs in full. A homepage hero is usually fully designed; a product page with eight variant combinations, an out-of-stock state, and a long description rarely is. Where the design does not show every state, extend the pattern the design does show rather than inventing something unrelated — consistency with the rest of the theme matters more than novelty here.

Step 4: Build, Preview, and Compare

With sections scaffolded and tokens wired into settings, build incrementally and preview constantly using Shopify CLI's local development server, checking each section against its Figma frame at the same viewport width. Small differences compound — a heading that is 2px too large or padding that is slightly tight reads as "close but not quite the design" once a merchant compares the live theme against the file they approved.

• Test every section with both minimal and maximal realistic content — a two-word headline and a very long one, one product and forty — since the design likely only showed one case.
• Verify the theme editor experience itself: can a merchant actually reorder blocks, hide a section, or swap an image the way the settings schema implies, or does something break when they do?
• Check responsive behavior at real breakpoints, not just by shrinking a browser window — Shopify themes need to hold up on actual mobile devices where most storefront traffic lands.
• Run a plain accessibility pass — contrast ratios from the design's color tokens, alt text fields wired up for every image setting, and keyboard-navigable interactive elements.

A More Realistic Workflow for Most Teams

The steps above describe the honest scope of converting an arbitrary Figma file into a working Shopify theme, and for a custom brand design, that scope is simply real — there is no shortcut around dev-mode inspection, a token pass, and a section-by-section build. But many merchants are not attached to a fully custom design; they want a well-designed storefront that matches their category and does not require weeks of translation work before the first product photo goes up.

That is the case Polo Themes builds for directly. Each of our themes — Optics for eyewear, Medical for healthcare, Wosa for fashion, Course Whiz for e-learning, Electronix for electronics, and Groxery for grocery — ships with a matching Figma UI kit built from the same components as the live theme, so the handoff described in this article has already happened. There is no dev-mode archaeology, no guessing which Figma layer maps to which Liquid section, and no token-mapping exercise, because the tokens, sections, and components were designed together in the first place. For merchants who want to customize visually in Figma before touching a storefront, or hand a design file to a freelancer, that matched pair means changes made in Figma have an obvious, already-built home in the theme rather than needing a fresh conversion pass. Course Whiz and Optics additionally offer bundles that combine the theme, the Figma kit, and extra starter content in one package, and our 5-in-1 e-commerce Figma bundle covers teams comparing several categories before committing to one.

If you do have an in-house or freelance design team producing a genuinely custom look, the workflow above is the right one to hand them — dev mode access, a documented token set, and a section/block breakdown before development starts, not after. If you would rather spend that time on merchandising and content instead of translation work, starting from a matched Figma-and-theme pair and customizing from there is usually the faster path to a launch-ready store.

Frequently Asked Questions

Can I just export my Figma design as HTML/CSS and use that as a Shopify theme?

Not usefully. Raw HTML/CSS export from Figma reproduces the exact static layout you designed, but Shopify themes need Liquid templating, a sections-and-blocks structure the theme editor understands, and settings a merchant can edit — none of which a plain export provides. It can be a useful visual reference, but it is not a starting point you build directly on top of.

How long does a Figma-to-Shopify-theme conversion typically take?

It depends heavily on how handoff-ready the Figma file is and how many unique page templates the design covers. A file with clean dev-mode structure, named layers, and real components takes meaningfully less time than one built as flat, unlabeled frames, since most of the effort is in the token-mapping and section-breakdown steps, not in writing the Liquid itself.

Do I need a developer, or can a designer do this conversion themselves?

Building the Liquid sections, wiring up the settings schema, and testing the theme editor experience requires development skill — this is not a task for design tools alone. A designer who understands Shopify's section/block model can make the handoff much smoother by structuring the Figma file accordingly, but the actual theme build needs someone comfortable with Liquid and the Shopify CLI.

Why does Polo Themes sell matched Figma and Shopify pairs instead of just the theme?

Because the conversion work described in this article is real work, and skipping it by building the Figma kit and the theme from the same components removes that cost for the merchant entirely. It also means a merchant who wants to prototype changes visually before implementing them has a Figma file that already speaks the same structural language as the live theme, rather than a design that was never meant to become that theme.