Skip to main content

Import designs from Figma

Use the Instant Figma plugin's AI mode to turn a selected frame into a ready-to-use Agent prompt that rebuilds your design in Instant.

If your team designs in Figma, you don't have to rebuild every layer by hand. The Figma to Shopify with Instant plugin brings your design into Instant. It has two modes:

  • AI mode (recommended) — turns your selected frame into a ready-to-use prompt for the Instant Agent, which recreates the design as editable sections.

  • Classic — copies your selection so you can paste it straight onto the canvas.

Install the plugin

  1. Install Figma to Shopify with Instant from the Figma Community.

  2. Open the plugin on the Figma file that contains your design.

You can also reach the plugin from the Agent in the builder: open the Agent, then choose Import From Figma under Start.

Import with AI mode

AI mode hands your design to the Agent as a prompt, so the Agent can rebuild it for you.

  1. In Figma, select the frame you want to bring into Instant.

  2. Open the plugin and choose the AI Mode tab.

  3. Under Generate a prompt, the plugin explains: "We'll generate and prepare a ready-to-use prompt from your selected frame."

  4. If you don't have an Instant account yet, select Create Instant account first. Otherwise, select Generate prompt.

  5. The plugin uploads your selected frame and prepares a prompt for the Instant Agent.

When you run that prompt in Instant, the Agent analyzes the imported design (you'll see Analyzing Figma in the Agent) and rebuilds it as sections you can edit on the canvas.

Generating the prompt and importing the design don't use AI credits — only running the Agent does. See AI credits for how usage is counted.

Classic mode

Classic mode copies your selection so you can paste it directly onto the canvas, without the Agent:

  1. In Figma, select your frame and copy it with the plugin (Classic tab).

  2. In the Instant builder, open the layout you want to paste into and press Ctrl+V / Cmd+V.

  3. A Figma import popover tracks progress through Paste from Figma, Matching fonts, and Uploading assets.

If you copy directly from Figma without the plugin, Instant prompts you to Install plugin — use the plugin so layers, fonts, and assets import correctly.

The import popover also surfaces two common follow-ups:

  • Missing fonts — if a font in your design isn't available, the popover lists it and shows an Upload fonts button that opens your project's font settings.

  • Auto layout — if the design doesn't use Figma auto layout, the popover shows a View guide link. Designs built with auto layout map to Instant's structure more reliably.

After you import

Whichever mode you use, review the canvas:

  • Text — confirm headings and copy map correctly

  • Images — swap placeholders for Shopify media or Studio assets if needed

  • Buttons and links — wire actions (link, cart, overlay, and so on)

  • Responsive layout — Figma desktop frames often need a mobile pass in Instant

Keep working with the Agent to refine the result — for example, binding product cards to Shopify data, stacking a hero on mobile, or matching brand spacing.

Tips for clean imports

  • Prefer auto layout in Figma so structure maps more reliably.

  • Use clear frame names for the sections you import.

  • Keep one main frame per page or section you plan to import.

  • If assets look wrong after import, re-upload them from the Assets panel or regenerate with Studio.

When the layout is ready, publish it to Shopify. For more on refining with AI and how usage is counted, see Meet Instant AI and AI credits.

Did this answer your question?