Shopdev: Figma to Shopify Liquid

Figma to Shopify LiquidTurn 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 worksOpen the plugin: Launch the plugin directly within your Figma design file.

Select the frame: Choose any frame, like a hero, banner, testimonial, or promo section.

Click “Import frame”: The plugin automatically transfers your selected design to shopdev.ai.

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").

Submit the prompt: Shopdev will generate responsive Liquid code you can preview.

Edit and iterate: Continue prompting shopdev to refine your design until it’s perfect.

Publish: Click to deploy directly to your Shopify theme.

SupportFor 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 developerWith the Shopdev Figma plugin, you can convert any static Figma design into live, editable Shopify theme sections, ideal for:

Homepage sections like banners, product features, testimonials, or value propsLanding page sections that can be reused across multiple campaignsPDP add-ons like trust badges, comparison charts, or upsell modulesReusable content blocks that can be dragged and dropped across templatesCustom sections for any part of your store without needing a developerShopdev 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.