Figma to Shopify with Instant

About this plugin

Figma to Shopify with Instant

Build responsive Shopify pages and sections 10X faster with the Figma to Shopify plugin by Instant. Copy and paste any Figma frame to Instant and publish to your Shopify store in seconds without code.

How it works

1. Connect, Create your Instant account at https://app.instant.so/register and connect your Shopify store to your Instant project.
2. Copy & Paste, Design Pages or Sections in Figma and use the plugin to copy the designs, then paste it into Instant.
3. Publish, Connect eCommerce data and actions from your Shopify store in the Instant Builder and publish your designs as Pages or Sections to your Shopify theme with one click!

Video tutorial

Watch on YouTube: Transforming Figma designs into Shopify stores

Support

If you have any questions, issues, or suggestions, please reach out to [email protected].

Design with Auto layout

Use auto layout as much as possible for the best result. This will automatically convert all layers to responsive web elements, making publishing your designs to Shopify even easier. If done correctly, you only need to add your finishing touches in the Instant Page Builder to make your layouts fully responsive on all devices.

Figma Starter Kit

We've released a free Figma UI Kit consisting of eCommerce sections designed with Auto layout, you can use the UI Kit as a starting point for your next project: Landing Page Starter Kit

Additional resources

1. Figma Auto layout tutorials
2. Explore Auto layout properties

Publish to Shopify with ease

This plugin makes it easy to turn your Figma designs into Shopify sections and pages. When you're ready to publish with Instant, we ensure your webshop is built using best practices; that way, it loads quickly across all devices.

Your design mockups are converted in Instant into native Liquid, CSS, and JavaScript code. And, we optimize for performance by minifying all the JavaScript and image files and serving assets from the Shopify CDN.

What is supported

1. Auto layout
2. Absolute positioning
3. Images
4. Borders
5. Opacity
6. Shadows
7. Typography
8. Rotation
9. Vector and shape conversion to SVGs