How to Prepare Figma Files for Shopify Development

A beautiful Figma file doesn't automatically become a great Shopify store. Somewhere between the final design review and the live site, a lot of questions come up. What happens when a product title runs to three lines? Where does the sale price go? Can the marketing team move this banner without calling a developer?

When those questions are answered in the design, the build goes faster, costs less, and looks closer to what you designed. When they aren't, developers have to guess, and the guesses rarely match the vision.

This guide is for designers and brand teams preparing Figma files for a Shopify build. It explains how Shopify themes are structured and how to design and organize your files so the handoff is smooth.

The Short Answer

To prepare Figma files for Shopify, design in sections and blocks that match how Shopify themes work, set up colors and typography as reusable styles, design every page type Shopify needs, and include mobile layouts and real-world states such as long titles, sale prices, and empty carts. Then annotate anything the theme editor should let your team change.

How Shopify Themes Are Built (in Designer Terms)

You don't need to know how to code a theme, but knowing its building blocks changes how you design. Shopify's theme architecture comes down to a few pieces:

The important idea is that your team will build and edit pages in Shopify's theme editor by adding sections, reordering them, and changing settings. Shopify notes that a JSON template can render up to 25 sections, and each section can have up to 50 blocks.

So instead of designing a homepage as one big picture, think of it as a set of modules your team will rearrange over time.

Design the Pages Shopify Actually Needs

Design files often cover the homepage, one product page, and one collection page beautifully, then stop. A Shopify store has more page types than that, and each one needs a design decision, even if it's a simple one.

Core pages (design in full):

• Homepage

• Collection page, including filters and sorting

• Product page

• Cart page and cart drawer (if you're using one)

• Search results

Supporting pages (can reuse sections from the core pages):

• Standard content page (About, FAQ, Shipping)

• Blog listing and blog post

• Contact page

• 404 page

• Password page (shown before launch)

Customer account pages:

• Login and account pages

• Order history

Check with your developer how customer accounts will be handled, since Shopify's newer customer accounts are styled differently from older theme-based account pages.

Checkout: Shopify's checkout isn't built in your theme. It's customized through checkout settings (and checkout extensions on Shopify Plus). Design your brand elements (logo, colors, fonts) for it, but don't design a completely custom checkout layout unless your developer has confirmed what's possible.

Alternate templates: If some products or pages need a different layout (a bundle product, a landing page), design those as separate templates and say which products or pages use them.

Design in Sections and Blocks

This is the single biggest change that makes a Figma file "Shopify-ready."

Build a Section Library

Create a page in your Figma file that lists every section as its own component: hero banner, featured collection, image with text, testimonials, FAQ, newsletter signup, and so on. Then build your page designs from those components.

This does two things. It shows the developer exactly which sections need to be built, and it shows you where two "different" sections are actually the same one with different content.

Reuse Before You Invent

Every new section is extra development time. Before designing a new one, ask whether an existing section with a small setting (image left or right, light or dark background) would do the job.

Mark What's Flexible

For each section, annotate what your team should be able to change in the theme editor:

• Which text, images, and links are editable

• Which parts are blocks that can be added, removed, or reordered (for example, individual testimonials or FAQ items)

• Which layout options are needed (alignment, columns, background color)

• Maximum and minimum number of blocks, if it matters for the design

A simple note like "3 to 6 testimonial blocks, reorderable" saves a developer from guessing.

Show Real Content, Not Just Placeholders

Design with realistic product names, prices, and images where you can. "Lorem ipsum" hides problems that real content reveals immediately.

Set Up Styles: Colors, Typography, and Spacing

Shopify's documentation notes that theme settings are a good place for store-wide options such as typography and colors. If your Figma file defines these as reusable styles or variables, they translate directly into theme settings your team can adjust later.

Colors

• Define every color as a named style or variable (for example, Primary, Accent, Text, Background, Sale, Error)

• Group colors into a small number of color schemes (such as light and dark) that sections can switch between

• Include states: hover, disabled, and focus colors for buttons and links

• Check contrast between text and background colors for readability and accessibility

Typography

• Define a clear type scale: headings H1 to H6, body, small text, buttons, and labels

• Use a limited number of font families and weights. Each one adds files the store has to load

• Specify sizes for both desktop and mobile

• Confirm font licensing early. Shopify themes typically offer fonts from Shopify's font library in theme settings; other fonts need to be licensed for web use and uploaded by your developer

Spacing and Layout

• Use a consistent spacing scale (for example, 4, 8, 16, 24, 32, 48, 64)

• Define the page grid: maximum content width, columns, and gutters for each breakpoint

• Use auto layout in Figma so spacing is clear and consistent

Components

• Buttons (primary, secondary, text link) with all states

• Form fields, checkboxes, and dropdowns

• Product card, used everywhere products appear

• Badges (Sale, New, Sold out)

• Icons, exported as SVG

Design Every State, Not Just the Perfect One

Real stores are messy. Products have long names, some are on sale, some are sold out, and some have no reviews yet. Designing these cases upfront is what separates a smooth build from weeks of back-and-forth.

Mobile First (or at Least Mobile Too)

For most stores, a large share of shoppers browse on their phones. Design mobile layouts for every section, not just the homepage hero. Pay special attention to:

• Navigation and the mobile menu

• Product image galleries and swiping

• Filters and sorting on collection pages

• The "Add to cart" button position on product pages

• The cart drawer or cart page

Product Card and Product Page States

Empty and Edge Cases

• Empty cart

• Search with no results

• Collection with no products, or only one

• Form errors and success messages

• Loading states for the cart and filters

Interactions

Show hover states, open and closed menus, and how the cart drawer opens. If something animates, describe it in a note or link to a short prototype. Keep in mind that heavy animations can affect store speed, so agree on them with your developer.

Images, Fonts, and Assets

Images

• Pick aspect ratios and stick to them. Decide on ratios for product images (for example, square or portrait), collection banners, and hero images. Consistent ratios make grids look tidy and stop layouts from jumping as images load.

• Design for crops. Hero images will be cropped differently on mobile and desktop. Mark the important area of each image, or provide separate mobile versions.

• Avoid text baked into images. Put headings and buttons in the design as real text so they're readable, translatable, and editable. Text inside images also can't be read by search engines.

• Supply high-quality originals. Shopify resizes and compresses images automatically, so give your developer good-quality source files rather than pre-shrunk exports.

Fonts

Confirm before handoff which fonts come from Shopify's font library and which are custom. For custom fonts, provide the licensed web font files, and keep the number of weights to what the design actually uses.

Icons and Logos

• Export icons and logos as SVG

• Provide a favicon

• Include logo versions for light and dark backgrounds

Organizing the File

• One page for styles and components, one for the section library, and one for each page type

• Name frames and layers clearly ("Product page / Desktop", "Product page / Mobile")

• Mark which frames are final and remove or archive old explorations

• Use Figma's developer handoff tools (such as Dev Mode) if your team has access, so developers can inspect spacing, colors, and type directly

The Handoff Checklist

Before you send the file, run through this list. If you can tick everything, your developer can start building instead of asking questions.

Structure

• Every page type is designed (core pages in full, supporting pages at least roughly)

• A section library exists, and every page is built from it

• Editable content and flexible blocks are annotated for each section

Styles

• Colors, typography, and spacing are defined as reusable styles or variables

• Components include all states (hover, disabled, focus, error)

• Fonts and licensing are confirmed

Responsive design

• Mobile layouts exist for every section

• Breakpoints and the page grid are defined

Real-world states

• Sale, sold-out, long title, and no-review states for products

• Empty cart, no search results, and error messages

Assets

• Icons and logos exported as SVG

• Image aspect ratios and crop areas specified

• High-quality source images available

Notes for the developer

• Which features come from apps (reviews, subscriptions, search) and where they appear

• Animations and interactions described or prototyped

• A short list of priorities: what must launch first, and what can follow

Before handoff

• Walk the developer through the file in a short call. Ten minutes of explanation can save days of guessing.

Frequently Asked Questions

Can a Figma design be turned directly into a Shopify theme?

Yes, a developer can build a Shopify theme from Figma designs. Some tools try to convert Figma automatically, but a hand-built theme usually gives you cleaner code, better performance, and sections your team can edit properly in the theme editor.

What pages do I need to design for a Shopify store?

At minimum: homepage, collection page, product page, cart (page or drawer), and search results. Supporting pages such as content pages, blog, contact, 404, and account pages can reuse sections from the core designs.

Can I design a custom Shopify checkout in Figma?

You can design branding for it, such as your logo, colors, and fonts. The checkout itself is customized through Shopify's checkout settings, and deeper changes use checkout extensions on Shopify Plus. Check with your developer before designing a custom checkout layout.

What are sections and blocks in Shopify?

Sections are reusable modules of content that make up a page, such as a hero banner or featured collection. Blocks are smaller pieces inside a section, such as individual testimonials, that can be added, removed, and reordered in the theme editor.

Do I need to design mobile versions of every page?

Yes, at least for every section. Many shoppers browse on their phones, and mobile layouts often need different decisions about navigation, images, and buttons.

Can I use any font in a Shopify theme?

You can use fonts from Shopify's font library, or custom fonts that are licensed for web use and uploaded by your developer. Keep the number of font files low to protect store speed.

Ready to Turn Your Designs Into a Shopify Store?

CodeVibez is a Shopify Plus Preferred Partner that has supported more than 1,000 Shopify stores. We turn Figma designs into fast, editable Shopify themes, with sections your team can manage in the theme editor.

Send us your Figma file, finished or in progress, and we'll review it against this checklist and flag anything that needs attention before the build starts.

Schedule a free call or contact our team.