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.
Overview
The Figma plugin bridges the gap between design and development. Turn your Figma mockups into live Shopify pages and sections without writing any code.
Key Benefits
Benefit | Description |
Speed | Go from design to live store in minutes |
No code required | Copy, paste, and publish without development |
Responsive output | Auto layout converts to responsive web elements |
Optimized performance | Code is minified and assets served from Shopify CDN |
How It Works
Step 1: Connect
Create your Instant account and connect your Shopify store to your Instant project.
Step 2: Copy & Paste
Design your pages or sections in Figma
Use the plugin to copy your designs
Paste directly into Instant
Step 3: Publish
Connect eCommerce data and actions from your Shopify store in the Instant Builder
Publish your designs as pages or sections to your Shopify theme with one click
Designing with Auto Layout
Use auto layout as much as possible for the best results. Auto layout automatically converts all layers to responsive web elements, making publishing to Shopify even easier.
Benefits of Auto Layout
Benefit | Description |
Automatic responsiveness | Layers convert to flexible web elements |
Minimal adjustments | Only finishing touches needed in Instant |
Cross-device compatibility | Layouts work on all screen sizes |
Tip: When done correctly, you only need to add 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 with eCommerce sections designed using Auto layout. Use it as a starting point for your next project.
Landing Page Starter Kit — Pre-built sections ready to copy and paste into Instant.
Additional Resources
Resource | Description |
Figma Auto layout tutorials | Learn how to use auto layout effectively |
Explore Auto layout properties | Deep dive into auto layout settings |
What Gets Published
When you publish with Instant, your designs are converted using best practices to ensure fast loading across all devices.
Technical Output
Output | Description |
Liquid | Native Shopify templating code |
CSS | Styling for your designs |
JavaScript | Interactive functionality |
Performance Optimization
Optimization | Description |
Minification | JavaScript files are compressed for faster loading |
Image optimization | Image files are optimized for web |
CDN delivery | Assets served from Shopify's content delivery network |
Supported Features
The plugin supports a wide range of Figma features:
Feature | Supported |
Auto layout | ✓ |
Absolute positioning | ✓ |
Images | ✓ |
Borders | ✓ |
Opacity | ✓ |
Shadows | ✓ |
Typography | ✓ |
Rotation | ✓ |
Vectors and shapes | ✓ (converted to SVGs) |
Troubleshooting
If your Figma imports aren't working, try these solutions.
Pasting Not Working
The most common cause is using the Figma web version, which cannot store all the design information in browser tab memory.
Issue | Solution |
Paste doesn't work | Install the Figma desktop app instead of using the web version |
Large designs fail | Desktop app handles memory more efficiently |
Incomplete imports | Switch to desktop app for reliable transfers |
Quick Reference
Task | Action |
Install plugin | Figma → Plugins → Search "Instant" |
Copy from Figma | Select frame → Run plugin → Copy |
Paste into Instant | Open Instant Builder → Paste |
Publish to Shopify | Connect data → Click Publish |
Workflow Summary
Step | In Figma | In Instant |
1 | Design with auto layout | — |
2 | Copy using plugin | Paste design |
3 | — | Connect Shopify data |
4 | — | Adjust responsiveness |
5 | — | Publish to Shopify |