# Figma to Shopify with Foxify

<figure><img src="/files/2Ot0Eg8zzeFDaULCqKX0" alt=""><figcaption><p><a href="https://www.figma.com/community/plugin/1415136291103675876/figma-to-shopify-with-foxify-shopify-smart-visual-page-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_figma_to_shopify&#x26;utm_campaign=anchor_text&#x26;utm_term=figma_to_shopify_with_foxify_plugin">Figma to Shopify with Foxify plugin</a> </p></figcaption></figure>

The **Figma to Shopify with Foxify plugin** lets you **copy-paste your Figma designs directly into Foxify**, Shopify smart visual page builder.&#x20;

This tool speeds up your workflow **5x faster**, **turning your Figma design into live pages in seconds** instead of hours.&#x20;

You can **go from concept to conversion in 1 click, with 98% design fidelity**.&#x20;

{% embed url="<https://www.youtube.com/watch?v=4t_U5YiY5CU>" %}
Convert a Static design
{% endembed %}

{% embed url="<https://www.youtube.com/watch?v=jOi7EqqaOWg>" %}
Convert a Newsletter section
{% endembed %}

{% embed url="<https://youtu.be/ZkOvk7q1PZw?si=t2ND7ky14oTewCQw>" %}
Convert a Countdown timer section
{% endembed %}

{% hint style="info" %}
Figma to Shopify is available in Foxify **Growth** and **Enterprise** plans. *Learn more:* [Pricing plans](/foxify-app/getting-started/account-and-billing/pricing-plans.md)
{% endhint %}

## How it works&#x20;

* **1-click copy-paste**: Just copy your Figma design and paste it into Shopify. No need to rebuild anything or write code.
* **Looks exactly like your design**. Your imported section will match your Figma file with up to 98% accuracy, so what you see is what you get.
* **At least 5x faster**. What used to take hours can now be done in minutes - sometimes even seconds.
* **Fully editable and customizable**. Your design isn’t just a static block. Once pasted, it becomes a clean, editable Shopify section you can tweak anytime using the Foxify Smart Page Builder.

## Best practices

### Copy Section by Section, not a Full Page

* For the best result, copy and paste one individual **section at a time,** rather than an entire page.
* Smaller sections load faster, perform better, and are less likely to run into formatting issues during import.

### Use Auto-Layout for your Figma design

* [Design with **Auto Layout**](https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design) to ensure your elements translate into responsive layouts in Foxify.&#x20;
* Auto-Layout designs adapt better across desktop, tablet, and mobile screens.

### Test responsiveness

* Preview your design across different devices to ensure your page looks great everywhere.&#x20;
* We constantly improve the [AI responsive](/foxify-app/foxstudio/editor-tools/ai-responsive.md)feature to optimize the responsiveness of your design.

### Use static elements only

* Dynamic Shopify elements like product collections, carousels, and sliders aren’t fully supported with the plugin yet.&#x20;
* Interactivity (carousels, button links) must be added manually after conversion.

### Upload your own Custom Fonts

* Figma doesn't allow plugin access to export fonts, so you’ll need to upload any custom fonts into Foxify yourself.
  * If your design uses fonts that aren't available, Foxify will flag them.&#x20;
  * 👉 Learn more about uploading fonts in Foxify: [Add custom font](/foxify-app/faqs-and-troubleshooting/faqs/add-custom-font.md)

## How to convert Figma design to Shopify with Foxify plugin&#x20;

### Step 1: Get the plugin

<figure><img src="/files/2Ot0Eg8zzeFDaULCqKX0" alt=""><figcaption><p><a href="https://www.figma.com/community/plugin/1415136291103675876/figma-to-shopify-with-foxify-shopify-smart-visual-page-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_figma_to_shopify&#x26;utm_campaign=anchor_text&#x26;utm_term=figma_to_shopify_with_foxify_plugin">Figma to Shopify with Foxify plugin</a> </p></figcaption></figure>

{% hint style="success" %}
Steps:

1. Go to [Figma to Shopify with Foxify plugin](https://www.figma.com/community/plugin/1415136291103675876/figma-to-shopify-with-foxify-shopify-smart-visual-page-builder?utm_source=foxecom\&utm_medium=help_center_foxify_figma_to_shopify\&utm_campaign=anchor_text\&utm_term=figma_to_shopify_with_foxify_plugin) on the Figma Community.
2. Click **Open in Figma** to add the plugin to your Figma account. The plugin is completely free to use.
   {% endhint %}

### Step 2: Copy a Figma design

<figure><img src="/files/5vS7AU3jTdsXdsnwp2Wz" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps:

1. Open your Figma file and click ![](/files/YZCkDPihu3sDzwcfcRGz) /![](/files/9Voictqx0PATCL1tHypr)**Actions** in the toolbar.
2. From the **Plugins & widgets** tab, select **Figma to Shopify with Foxify** plugin to run it.
3. From the plugin interface, you can control:

<img src="/files/RHAej7sSTQVq1Gv6MT9S" alt="" data-size="original">

* **Image scale**: the resolution size of your exported images.
  * Use **1x** for standard resolution (best for most users).
  * Use **2x or 3x** for high-resolution displays (e.g., Retina screens or detailed graphics).
* **Image quality**: the compression level of exported images.
  * :pushpin: **Tip:** Use **85%** for a balance between quality and load speed. Lower the value if you're optimizing for performance.
    {% endhint %}

{% hint style="success" %}
4\.  Select a Figma frame or group layer that you would like to copy into Foxify.

```
:pushpin: **Tip**: To speed up the process, copy 1 section at a time - instead of the whole page
```

5\. Click **Copy design** button in the plugin interface.&#x20;

Your selected design is now stored in your clipboard, ready to paste into Foxify.
{% endhint %}

<figure><img src="/files/tpYSwQHmJ7xOr6r9I6Hx" alt=""><figcaption></figcaption></figure>

### Step 3: Paste it into Foxify editor

<figure><img src="/files/kPjmU9S1MwkRMzgHIX8S" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps:

1. Open the page editor where you want to paste the copied Figma design.
2. Select **Paste from Figma** or use the shortcut **Cmd+V (Mac) / Ctrl+V (Windows)**.
   {% endhint %}

{% hint style="info" %}
The design will automatically appear, with layers preserved and static elements ready to customize.&#x20;

The position of the pasted element will depend on the cursor's current location.&#x20;
{% endhint %}

{% hint style="warning" %}
Image uploads may take a few seconds.&#x20;

For best performance, optimize your images in Figma before copying.
{% endhint %}

## FAQs

### Is the Figma to Shopify plugin free?

Yes! The plugin is completely free to use on Figma Community.

However, to *paste designs into Foxify*, you’ll need an active Foxify plan (Growth or Enterprise). See [Pricing plans](/foxify-app/getting-started/account-and-billing/pricing-plans.md)

### Can I import full Shopify product sections?

Currently, the plugin only supports **static design elements**. Dynamic Shopify features (like product collections or live product data) need to be added manually after the paste.

### Does the plugin support interactivity like hover states or animations?

Animations can be added inside Foxify after the design has been imported.&#x20;

👉 Learn how: [Animations](/foxify-app/foxstudio/layout-and-styling/animations.md)

***

<div data-full-width="false"><figure><img src="/files/kcilvHtHzK8t5VOGf1nR" alt=""><figcaption><p>Foxify AI turns a prompt into a well-structured page layout in seconds. <a href="https://admin.shopify.com/apps/foxify-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_figma_to_shopify_with_foxify&#x26;utm_campaign=anchor_text&#x26;utm_term=try_foxify_ai"><mark style="color:orange;">Try Foxify AI</mark></a> ✨</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/figma-to-shopify-with-foxify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.