Build responsive Shopify pages and sections 10X faster with the Figma to Shopify plugin. Copy and paste any Figma frame to Instant and publish to your Shopify store in seconds without code.
How it works
Connect, Create your Instant account and connect your Shopify store to your Instant project.
Copy & Paste, Design Pages or Sections in Figma and use the plugin to copy the designs, then paste it into Instant.
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!
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
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
Auto layout
Absolute positioning
Images
Borders
Opacity
Shadows
Typography
Rotation
Vector and shape conversion to SVGs