Shopdev: Figma to Shopify Liquid

About this plugin

Figma to Shopify Liquid

Turn any Figma design into responsive Liquid code that’s ready to publish to your Shopify theme with the Shopdev Figma plugin. Select your frame in Figma, import it into Shopdev, and deploy in a few clicks, no coding required.

How it works

1. Open the plugin: Launch the plugin directly within your Figma design file.
2. Select the frame: Choose any frame, like a hero, banner, testimonial, or promo section.
3. Click “Import frame”: The plugin automatically transfers your selected design to shopdev.ai.
4. Customize prompt (Optional): You’ll see a pre-filled prompt “Build this Figma import”; you have the option to add extra input if desired (e.g., "Use a slider for the images on mobile").
5. Submit the prompt: Shopdev will generate responsive Liquid code you can preview.
6. Edit and iterate: Continue prompting shopdev to refine your design until it’s perfect.
7. Publish: Click to deploy directly to your Shopify theme.

Support

For additional support using this plugin, ask questions in the Shopdev Discord channel.

Tips for best results: Use Auto Layout

Auto Layout isn’t required, but it helps the AI better understand your design’s structure and spacing. Using it can lead to more accurate imports with less additional prompting needed, especially for responsive layouts.

From Figma to Shopify with the help of Shopdev, an AI Shopify developer

With the Shopdev Figma plugin, you can convert any static Figma design into live, editable Shopify theme sections, ideal for:

1. Homepage sections like banners, product features, testimonials, or value props
2. Landing page sections that can be reused across multiple campaigns
3. PDP add-ons like trust badges, comparison charts, or upsell modules
4. Reusable content blocks that can be dragged and dropped across templates
5. Custom sections for any part of your store without needing a developer

Shopdev automatically interprets your Figma design and generates responsive Liquid code that works natively within Shopify’s theme system. You can edit the output manually or continue refining it through prompts.