Export Shopify to Figma — Capture Stores as Editable Layers
Capture any Shopify store and paste it into Figma as fully editable layers. Theme sections, product pages, checkout — all preserved. Free Chrome extension.
What this is
A focused workflow for e-commerce designers, agencies, and brand teams: capture any Shopify store page into Figma as editable layers. Homepage, collection pages, product pages, cart, checkout — anything that renders in Chrome.
Export to Figma is a Chrome extension. Open the Shopify store in Chrome, click the extension, paste into Figma. The store page lands as editable Figma frames with real typography, colors, images, and layout.
Why this matters for Shopify specifically
Shopify stores live as Liquid templates rendered server-side, augmented with theme-level JavaScript and (often) Shopify Apps that modify the DOM. Headless Shopify stores skip Liquid and use modern frameworks. Either way, the result is HTML/CSS rendered in your browser, but none of it is a Figma file.
When you need to redesign a Shopify store, audit a competitor, or build component variants in Figma, the design needs to live in Figma first. The common workflow problems Shopify designers run into:
- Manual rebuild is slow. A typical Shopify store has 5+ unique page types (home, collection, product, cart, checkout, about/policy pages). Rebuilding each by hand is hours.
- Screenshots flatten everything. Useful as reference, useless for design iteration.
- Server-side capture tools often miss dynamic content. Cart pages depend on session cookies. Variant selectors render client-side. Headless storefronts return near-empty HTML on first request.
- Logged-in views are inaccessible to anything that fetches URLs from outside your browser.
Export to Figma fixes all of these by running inside Chrome — the cart with items in it is your cart, the logged-in account page is your logged-in view, and the headless storefront has finished rendering by the time you click.
How to export Shopify to Figma
- Install Export to Figma from the Chrome Web Store — free, 30 seconds. Pin the extension.
- Open the Shopify store page you want to capture in Chrome.
- Click the Export to Figma extension icon. (Optional: hover over an element first to capture just that section.)
- Paste into Figma with
Cmd+V/Ctrl+V.
Shopify-specific things to know
Theme is irrelevant — render output is what matters
Shopify themes (Dawn, Studio, Impulse, Prestige, custom Liquid, OS 2.0 sections, headless storefronts on Hydrogen / Next.js / Remix) all produce rendered HTML in the browser. Export to Figma captures the rendered output, so the underlying theme architecture doesn't affect what you get.
If your store is on a premium theme with heavy section customization, you'll capture every customized section as it currently renders. If you're on headless with a Next.js storefront, you'll capture the painted Next.js output. Same workflow either way.
Capturing each store page type
For a full-store redesign, capture each unique page type:
- Homepage — captures the full hero, featured collections, value props, etc.
- Collection page (e.g.,
/collections/allor any specific collection) — captures the listing layout and filters. - Product page — 2–3 representative products covering: simple product (no variants), variable product (size/color swatches), product with subscription/extras (if applicable).
- Cart page — add a product first, then navigate to
/cart. - Checkout pages — proceed through checkout to capture cart, information, shipping, payment steps.
- Customer account pages — sign in to capture account dashboard, order history.
The cart and checkout captures are the ones that absolutely require an in-browser tool — they depend on your session state. Server-side capture tools see empty carts.
Variant selectors and dynamic price displays
When you load a product page, Shopify usually defaults to showing the first variant. Variant selectors (size, color, etc.) are typically dropdowns or swatch chips that change the price and image when clicked.
To capture a specific variant's visual state, select the variant in Chrome before clicking the extension. The captured Figma layers reflect whatever's visible — variant title, selected swatch state, current price, current image.
Custom apps and embedded widgets
Shopify Apps that inject UI into the storefront (review widgets, upsell popups, banner bars, currency converters) render alongside the theme. Whatever's visible when you capture comes through. If a review widget is below the fold and hasn't loaded yet, scroll first to trigger its render, then capture.
Headless Shopify storefronts
If the store is on Hydrogen, Next.js, Remix, or a custom React/Vue frontend pulling from Storefront API, you're in the same heavy-JS-app territory that breaks server-side capture tools. The frontend returns near-empty HTML on first request and paints content after fetching product data client-side.
Export to Figma waits for the browser to finish painting. By the time you click, the headless storefront has fetched its data and rendered into the DOM. The capture produces editable Figma layers same as a Liquid-themed store.
A real workflow: DTC brand redesigning their store
A direct-to-consumer brand was redesigning their Shopify store. They wanted the existing store in Figma before kicking off the new design so they could:
- Audit the current store layer-by-layer.
- Pitch redesign options to stakeholders with before/after side-by-side.
- Iterate on specific page types (PDP first, then collection, then cart/checkout) without rebuilding references each time.
The old workflow involved their designer screenshotting each page and rebuilding sections as editable Figma layers — about 1.5 days of work before any design happened.
The new workflow with Export to Figma:
- Captured the homepage in 5 seconds.
- Captured 3 product pages (covering simple, variable, and bundle products) in under a minute.
- Captured the collection page, cart, and checkout steps in another two minutes.
- Captured customer account pages from a logged-in session in 30 seconds.
Total capture time: under 5 minutes. The 1.5-day reference-building step compressed to a coffee break, and the rest of the project went straight to design work.
What gets preserved
| Element | Preserved? |
|---|---|
| Theme typography (font family, size, weight) | |
| Brand colors, gradients, borders, shadows | |
| Product imagery at original resolution | |
| Layout (flex/grid → Figma auto-layout) | |
| Editable text (product titles, prices, descriptions) | |
| Cart and checkout pages | |
| Customer account / admin pages | |
| Custom app embeds (rendered state) | |
| Add-to-cart functional behavior | (visual only) |
| Animations |
Pricing
- Free: 10 captures per month, forever, no credit card.
- Pro: $1/month during the launch promo. Unlimited captures.
Related reading
- Export WordPress to Figma — for WooCommerce stores or WP-based content sites
- Export landing page to Figma — campaign / promo page workflows
- Convert HTML to Figma — for theme code instead of a live URL
- Anima alternative — comparison vs Anima for e-com redesigns
- How to copy a website to Figma for a redesign — the workflow article
Frequently asked questions
Does it work with any Shopify theme (Dawn, Studio, Impulse, Prestige, custom)?
Yes. Export to Figma captures whatever Chrome renders, regardless of which theme is installed. Whether it's Dawn (the free OS 2.0 theme), a premium theme like Impulse or Prestige, or a custom-built Liquid theme, the extension reads the painted DOM and produces editable Figma layers.
Can I capture Shopify product pages with variant selectors and add-to-cart?
Yes. The visible UI — product images, title, price, variant selector dropdown, swatch chips, quantity field, add-to-cart button — all come through as editable Figma layers. The Add to Cart form's functional behavior isn't captured (Figma is static), but the visual representation is exact.
Does it capture the Shopify checkout flow?
Yes. Add a product to cart in Chrome, navigate to the checkout, capture. Each checkout step (cart, information, shipping, payment) renders in the browser and captures as editable layers. Useful for checkout-flow redesigns, which usually require seeing each step before designing changes.
What about Shopify's checkout extensibility (custom checkout extensions, payment apps)?
Whatever renders in your browser is what gets captured. If you have custom checkout extensions modifying the visual UI, those modifications show up in the captured Figma layers. If you're on Shopify Plus with a custom checkout, capture works the same way.
Does it work for headless Shopify storefronts (Hydrogen, Next.js, etc.)?
Yes. Headless Shopify storefronts are heavy JavaScript apps that render product data into a custom frontend. The extension reads the resolved DOM after rendering, so headless storefronts capture as cleanly as Liquid-themed stores. This is the case where server-side capture tools tend to fail.
Can I capture a Shopify admin (myshopify.com/admin) for a backend redesign?
Yes — sign into your Shopify admin in Chrome first. Admin pages capture like any other authenticated content. Useful if you're redesigning custom admin apps for merchants or extending the admin via Shopify Apps.
What about Shopify-side dynamic features like upsells, abandoned cart reminders, dynamic pricing?
Visual elements (upsell popups, banner offers, dynamic price displays) capture as their current visible state. To capture a specific state (popup open, abandoned cart banner showing), trigger the state in your browser first.
Stop screenshotting websites.
Export to Figma captures any live website as fully editable layers — fonts, colors, images, and auto-layout intact. 10 free exports a month.