Can I convert my Figma design directly to Shopify with a plugin?

Technically yes, meaningfully no. Plugins like Locofy and Anima generate HTML and CSS that renders the visual design, but they do not produce Shopify-native section schema, block settings, or the Liquid loops that make a theme editable in the Shopify admin. Use plugins for prototypes and disposable campaign pages. For a production theme you'll maintain past this quarter, plan on a custom build.

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

Ranges I've shipped: a 5-section landing page runs 2 to 3 weeks. A full custom theme with 10 to 15 sections and 4 to 6 templates runs 4 to 8 weeks. A design-heavy B2B build like Javson Sports (custom theme plus a wholesale portal on top) runs 8 to 12 weeks. The Figma file's condition changes those numbers by up to 30% in either direction, which is why the handoff audit matters.

How much does a Figma-to-Shopify custom theme cost?

For a founder-scale project (5-8 sections, 3-4 templates, standard Shopify features): $4K to $10K. For a mid-market custom theme (10-15 sections, product page with metafields and variant logic, custom cart drawer): $10K to $25K. For B2B, headless, or Plus-tier work: $25K and up depending on scope. Plugin-based landing pages sit well below this at $500 to $2K, with the tradeoff described above.

What's the difference between a Figma-to-Shopify plugin and a developer build?

A plugin flattens the design into HTML and CSS. A developer builds a Shopify theme: sections with schema, blocks the merchant can add or reorder, snippets for reusable components, dynamic Liquid loops tied to real products and collections, and a build pipeline that keeps assets small. The plugin output looks right until the merchant tries to edit anything. The developer build stays editable and performant for years.

Do I need to hire a designer AND a Shopify developer?

If you already have a Figma file that clears the ten-item handoff checklist earlier in this article, no, one Shopify developer is enough. If the file is a rough draft or a template modification, you'll want both. Skipping the designer and asking the developer to "design in the browser" produces themes that ship on time and get redesigned six months later at twice the original cost.

Can I hit 90+ PageSpeed with a Figma-based custom Shopify theme?

Yes, consistently, if the four performance disciplines are baked in from day one. The Javson Sports Figma-to-Shopify build hit 92 mobile PageSpeed at launch. The win came from lazy-loading everything below the fold, inlining critical CSS, serving WebP with responsive srcset, and setting font-display: swap on every custom font. Bolt-on optimization after launch never gets you there. It has to be in the scaffold.

What Figma features should I use for the smoothest Shopify handoff?

Auto-layout on every repeatable component, published styles for color, type, and spacing tokens, variants for stateful components (hover, disabled, loading), constraints on responsive elements, and Dev Mode turned on so the developer can inspect measurements and export assets without an editor seat. Prototype connections are useful for interaction specs but not a substitute for written behavior notes.

Can I edit my Shopify theme after the Figma-to-Shopify build is done?

Yes, if the developer built it correctly. Every editorial section should appear in the Shopify theme editor with settings for text, images, links, and layout options the merchant needs. Blocks should be addable, sortable, and removable. If your finished theme has hardcoded copy, hardcoded images, or sections you cannot reorder, that is a scaffolding failure, not a Shopify limitation. Ask about editability during scoping, not after launch.

Figma to Shopify: Developer’s Handoff Playbook for 2026 (90+ PageSpeed)

Last updated: 2026-08-10 · By Abdul Razzaq · ~14-min read

TL;DR — A clean Figma to Shopify build depends on the handoff, not the code. Ship it with Dev Mode enabled, tokens named, and frames mapped to Shopify sections and blocks. Then build with lean Liquid, a Vite pipeline, responsive image srcsets, and font-display: swap so the theme lands inside Google’s Core Web Vitals thresholds on launch day.

Across the Figma-to-Shopify builds I’ve shipped in the last 12 months, the pattern is consistent: the code is rarely the reason a project stalls. The handoff is. A designer sends over a beautiful file with unnamed layers, no tokens, three redlined breakpoints, and one lonely mobile frame, and the developer spends the first week re-drawing the design in their head before writing a line of Liquid. The Javson Sports build, a Figma to Shopify project with a full B2B wholesale portal on top, hit 92 mobile PageSpeed at launch. That number did not come from a magic build tool. It came from a Figma file that had been prepared like a spec, not a pitch deck.

This playbook is the exact handoff I ask for on every Figma to Shopify project and the workflow I run once the file lands in Dev Mode. It cites Google’s Web Vitals thresholds for the performance bar, Shopify’s theme architecture docs for how sections and blocks actually work, and Figma’s Dev Mode for the handoff surface. If you’re a founder, a designer, or a developer inheriting one of these files, this is what “ready to ship” looks like before code starts.

What a Shopify developer actually needs from your Figma file

The direct answer: ten things. Design tokens, a component library, responsive breakpoint frames, Dev Mode turned on, section-based layer naming, exported image assets, documented font licenses, interaction specs, CMS-editable annotations, and accessibility contrast noted. Miss any of these and the developer spends billable hours reverse-engineering intent instead of building.

Here’s the checklist I send back to every designer before I quote a Figma-to-Shopify project:

Design tokens as named styles. Color, type, spacing, radius, and shadow published as library styles. Loose hex values inside frames become fragile CSS the moment a brand refresh lands.
Component library, not one-off frames. Header, footer, product card, cart drawer, form fields, buttons, and section headers should each be a component with variants for hover, focus, disabled, and loading. Instances everywhere else.
Three breakpoint frames minimum. Mobile 375, tablet 768, and desktop 1440 at least. Ideally a wide 1920 frame too if the design fills viewports. Anything narrower than three breakpoints is a desktop mockup pretending to be a design system.
Dev Mode turned on. Figma Dev Mode exposes CSS values, measurements, exportable assets, and code-ready specs that developers can inspect without owning an editor seat. It is the single biggest handoff accelerator Figma has shipped.
Section-based layer naming. Layers named for the Shopify section they will become: section/hero, section/featured-collection, section/press-logos, block/product-card. This is how a developer builds a mapping table in five minutes instead of five hours.
All image assets exported and linked. Hero images at 2x, product placeholders, icons as SVG, favicons and social share cards. If it appears in the design, it needs to appear in an exported asset folder.
Font licenses documented. Named foundry, weights in use, and self-hosting rights confirmed. Google Fonts is the fastest path. Adobe Fonts requires a valid Fonts subscription tied to the domain. Custom foundries need per-domain licenses you can prove on audit.
Interaction specs written down. Hover states, form validation behavior, cart drawer transitions, and any scroll-triggered motion. Prototype connections are a start; a paragraph next to the frame is what gets built correctly the first time.
CMS-editable annotations. For every text field, image, and CTA, mark whether the merchant can edit it in the Shopify theme editor. This is what determines whether a piece of copy becomes a section setting or a hard-coded string in Liquid.
Accessibility contrast noted. Every text-on-background pair checked at WCAG AA minimum. Neon-on-charcoal looks great in Figma and fails a real audit on the light hover state nobody thought about.

On the Javson Sports build, the design file had eight of these ten out of the gate. The two we had to rebuild together, CMS-editable annotations and accessibility notes, added a week of upfront work and probably saved three weeks of post-launch rework.

The Figma-to-Shopify workflow that actually works

The direct answer: nine phases from file handoff to launch. Audit, component inventory, section mapping, Liquid scaffold, Vite build for CSS and JS, section-level QA, PageSpeed pass, client acceptance, and launch. Each phase gates the next, so skipping the audit to save two days always costs a week later when the section mapping falls apart.

The diagram below is the exact procedure I walk every Figma-to-Shopify project through. It works for a five-section landing page and it works for a hundred-template B2B storefront. The only thing that scales is the time each phase eats, not the sequence.

flowchart TD
    Start(["Figma file
received in Dev Mode"]) --> Audit(["Phase 1
Handoff audit"])
    Audit --> Inventory(["Phase 2
Component inventory"])
    Inventory --> Mapping(["Phase 3
Section and block mapping"])
    Mapping --> Scaffold(["Phase 4
Liquid scaffold
+ schema"])
    Scaffold --> Build(["Phase 5
Vite CSS and JS build"])
    Build --> QA(["Phase 6
Section-level QA"])
    QA --> Perf{"PageSpeed
90+ on mobile?"}
    Perf -->|No| Fix(["Fix images, fonts,
lazy-load, defer JS"])
    Fix --> Perf
    Perf -->|Yes| Accept(["Phase 8
Client acceptance"])
    Accept --> Launch(["Phase 9
Launch
+ 30-day watch"])
    classDef step fill:#0e1218,stroke:#00d9a3,stroke-width:1px,color:#e8ecef
    classDef decision fill:#1a1f2b,stroke:#f5a742,stroke-width:1px,color:#e8ecef
    classDef good fill:#0f2818,stroke:#7dd88a,stroke-width:1.5px,color:#e8ecef
    classDef bad fill:#281818,stroke:#f28080,stroke-width:1.5px,color:#e8ecef
    class Start step
    class Audit,Inventory,Mapping,Scaffold,Build,QA step
    class Perf decision
    class Accept,Launch good
    class Fix bad

Three things about the workflow are worth calling out.

First, the handoff audit is a paid phase, not a free discovery call. It usually takes half a day and produces a written report of what is production-ready in the Figma file and what needs to be resolved before code starts. Skipping it is the single biggest predictor of a Figma-to-Shopify project going over budget.

Second, the Vite build phase is not optional for a modern Shopify theme. The Shopify performance best-practices docs push toward small critical CSS, deferred JS, and lazy-loaded below-the-fold assets. A bundler like Vite or esbuild is how you get there predictably. Hand-writing