Does Shopify's Liquid templating affect the Figma import?

No. Shopify renders Liquid templates on the server into standard HTML before sending them to the browser. By the time you open DevTools, the Liquid tags ({{ product.title }}, {% for %}) are fully rendered as real HTML content — product names, prices, and descriptions are present as text. html2design reads the rendered HTML, so Liquid is completely transparent to the import process.

Can I import the Dawn theme into Figma?

Yes. Dawn is Shopify's reference theme and uses standard HTML, CSS, and Web Components. Open your Dawn-powered store in a browser, find the section you want in DevTools, copy the outerHTML, and paste into html2design. Dawn's CSS custom properties (--color-background, --font-heading-family, etc.) are resolved to their computed values by the browser, so your Figma import reflects the actual theme settings from your Shopify customizer.

Can I use html2design with a Shopify Headless store?

Yes. Shopify Headless Commerce (using Hydrogen, Next.js Commerce, or any custom frontend) renders standard HTML in the browser. The workflow is the same — open the headless frontend in a browser, copy the outerHTML of the section you want from DevTools, and paste into html2design. The import captures the rendered output regardless of whether the frontend is Liquid, React, or any other framework.

Shopify to Figma — Convert Shopify Themes & Stores to Designs

Q: How do I convert a Shopify store to Figma?

Open the Shopify store (live site, theme preview, or Shopify CLI dev server) in a browser. Use DevTools (F12 → Elements) to find the section you want, right-click → Copy outerHTML, and paste it into the html2design Figma plugin. No Shopify Partner account or API access needed — you work directly from the rendered page in your browser.

Shopify to Figma —
Any Theme, Any Store

Converting Shopify themes to Figma is straightforward because Shopify renders Liquid templates into standard HTML before sending them to the browser. Open the store, copy the rendered HTML from DevTools, paste into html2design, and get native Figma layers with real product data. Works with Dawn, any theme marketplace theme, headless Commerce, and custom Liquid builds.

What is "Shopify to Figma"?

"Shopify to Figma" refers to importing a rendered Shopify storefront page — homepage, product page, collection page, cart — into Figma as a native, editable design. Shopify merchants, theme developers, and agencies use this workflow to redesign existing stores, audit UI consistency across themes, create design documentation for clients, and build custom themes in Figma before implementing them in Liquid.

Shopify renders Liquid templates on the server, producing standard HTML that any browser receives. The html2design Figma plugin accepts that rendered HTML — copied from the browser's DevTools Elements panel — and converts it into native Figma frames. Shopify's CSS custom properties, section styles, and block styles are all resolved to computed values by the browser before you copy, so the Figma import accurately reflects your theme customizer settings including brand colors and font choices.

The Shopify to Figma workflow

Four steps. Works with any Shopify theme — Dawn, Debut, Impulse, Brooklyn, custom Liquid builds, and Headless Commerce.

Step 01

Open the Shopify store in a browser

Navigate to the Shopify storefront you want to import — the live store URL, a theme preview URL from the Shopify admin, or a local Shopify CLI dev server running with shopify theme dev.

Navigate to the specific page type you want to capture: homepage, a product page (navigate to an actual product, not a placeholder), a collection listing, or the cart page after adding items. The richer the real content, the more useful the resulting Figma frame will be for design review.

Step 02

Copy the rendered HTML from DevTools

Open DevTools (F12) and switch to the Elements panel. For a full page import, find the <main> element or the outermost section container. For a specific Shopify section, find the <section id="shopify-section-*"> wrapper that Shopify adds to every section.

Right-click the element → Copy > Copy outerHTML. Shopify's section wrappers are great targets because they capture a single, semantically complete page section — hero, featured collection, testimonials, footer — in one copy.

Step 03

Paste into html2design and generate Figma layers

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. Shopify themes use CSS custom properties for design tokens — the Dawn theme's --color-background, --color-foreground, and --font-heading-family are all resolved to their actual values by the browser.

You get a native Figma frame with real product images (as image fills), actual product names and prices as text layers, and your brand colors from the Shopify theme customizer.

Step 04

Share the Figma frame for design review

Share the Figma frame with your client, designer, or merchant. They get an editable version of the actual store page — not a screenshot — and can annotate changes to color, typography, layout, and content directly in Figma without needing Shopify admin access.

For ongoing theme development, re-import after each significant change: navigate to the updated section in the theme preview, copy the outerHTML, and paste into html2design to keep the Figma documentation in sync with the live theme.

Shopify-specific tips for better Figma output

Shopify themes have unique structure and patterns — here's how to work with them for the most useful Figma imports.

Use Shopify section wrappers as import targets

Shopify wraps every Online Store 2.0 section in a <section id="shopify-section-[id]"> element. These are perfect import targets — semantically complete, scoped to one section, and easy to find in DevTools. Import section by section to build a Figma file that mirrors the page builder structure of your theme.

Dawn CSS custom properties reflect your customizer settings

Shopify's Dawn theme (and most modern Shopify themes) uses CSS custom properties for brand colors, font families, and spacing. The theme customizer writes these into a <style> block at the top of the page. The browser resolves var(--color-button) to the exact hex color you set in the customizer — so your Figma import reflects your actual brand settings.

Use a theme preview URL for client-safe imports

From the Shopify admin, go to Online Store → Themes → Actions → Preview. The preview URL lets you browse an unpublished theme customization without affecting the live store. Copy outerHTML from the preview to import design iterations into Figma for client review before publishing — a clean way to present proposed changes without touching the live site.

Product and collection pages: navigate to real items

For product page imports, navigate to an actual product URL (not a placeholder). Product pages with real titles, images, prices, variant selectors, and descriptions produce far more useful Figma frames than empty templates. Choose a product that represents your typical catalog — long titles, multiple variants, and real product photography make the Figma import reflect real-world use cases.

Shopify theme import use cases

The Shopify to Figma workflow is used across agencies, freelancers, and in-house Shopify teams for these common scenarios.

Store redesign auditing

Import the current theme into Figma as a starting point for a redesign brief. Annotate what stays, what changes, and what gets replaced — with the exact current design as the reference, not a rough recreation.

Client design presentations

Present proposed changes to a Shopify merchant in Figma — their actual store layout with design modifications overlaid. Clients understand Figma comments on their own storefront far better than abstract mockups.

Theme documentation

Build a Figma file that documents every page template, section type, and block variant in your custom Shopify theme. Import each page type once, organize by template, and maintain as a living design reference.

Headless Commerce design system

Import your Shopify Hydrogen or Next.js Commerce frontend into Figma section by section. Build a Figma component library that mirrors your headless frontend components — product cards, cart drawers, navigation bars — as editable Figma frames.

Frequently asked questions

How do I convert a Shopify store to Figma?

Open the Shopify store in a browser, use DevTools (F12 → Elements) to find the section you want, right-click → Copy outerHTML, and paste into html2design in Figma. No Shopify Partner account or API access needed — it works from any URL your browser can load.

Does the Dawn theme import cleanly into Figma?

Yes. Dawn uses CSS custom properties for brand colors and fonts — the browser resolves these to their actual values from your theme customizer settings. The Figma import reflects the exact colors, fonts, and spacing you've configured in the Shopify Theme Editor.

Can I import a Shopify theme preview into Figma?

Yes. Navigate to the theme preview URL from Shopify Admin → Online Store → Themes → Preview, open DevTools, copy the outerHTML of the desired section, and paste into html2design. Theme preview pages render the same HTML as the live store.

Does this work with Shopify Hydrogen (Headless Commerce)?

Yes. Shopify Hydrogen is a React-based headless framework that renders standard HTML in the browser. Run the Hydrogen dev server locally, open the page in a browser, copy the outerHTML from DevTools, and paste into html2design — the same workflow as any other React framework.