> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/~/changes/289/figma-to-shopify-with-foxify.md).
# Figma to Shopify with Foxify
The **Figma to Shopify plugin** allows you to **import your Figma designs directly into Foxify**, the smart visual page builder in Shopify.
This tool speeds up your workflow 10X and saves you hours of rebuilding your designs from scratch.
## How it works
* **1-click copy-paste**: Quickly copy-paste the Figma design into Foxify editor.
* Figma components are automatically transformed into Foxify-compatible static elements and layouts.
* Your original design is preserved, with minimal formatting needed. What you designed in Figma is what you’ll see in Foxify.
* **Layer structure stays intact:** Your organization of layers and names is retained, so you can stay organized and pick up right where you left off.
## Best practices
* **Focus on Section, not a Full page**: For best results, copy and paste individual **sections** 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 in Figma**: [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. This makes your pages adapt better across desktop, tablet, and mobile screens.
* **Test responsiveness**: After importing, always preview your design across different devices to ensure your page looks great everywhere. \
We are constantly improving [AI responsive ✨](/foxify-app/~/changes/289/foxstudio/foxstudio-tools/ai-responsive.md)feature over time to automatically add responsiveness to your design.
* **Stick to Static elements**: Dynamic Shopify elements like product collections, carousels, and sliders aren’t fully supported in the plugin yet. Interactivity (carousels, button links) must be added manually after conversion.
* **Upload Custom fonts**: Figma doesn't allow plugin access to export fonts, so you’ll need to upload any custom fonts yourself in Foxify. If your design uses fonts that aren't available, Foxify will flag them.
* 👉 Learn more about uploading fonts in Foxify: [Add custom font](/foxify-app/~/changes/289/faq/edit-your-pages/add-custom-font.md)
## How to use Figma to Shopify with Foxify plugin
### Step 1: Get the plugin
{% 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-page-builder) 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
{% hint style="success" %}
Steps:
1. Open your Figma file and click  /**Actions** in the toolbar.
2. From the **Plugins & widgets** tab, select **Figma to Shopify with Foxify** plugin to run it.
3. Select a Figma frame or group layer that you would like to copy into Foxify.
4. Click **Copy design** button in the plugin interface.
Your selected design is now stored in your clipboard, ready to paste into Foxify.
{% endhint %}
### Step 3: Paste into Foxify
{% hint style="success" %}
Steps:
1. Open a page editor you want to paste the copied Figma design into.
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.
The position of the pasted element will depend on the cursor's current location.
{% endhint %}
{% hint style="warning" %}
Image uploads may take a few seconds.
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.
### 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.
👉 Learn how: [Animations](/foxify-app/~/changes/289/foxstudio/working-with-pages/animations.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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/~/changes/289/figma-to-shopify-with-foxify.md?ask=
```
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.