Studio Editor: Exporting Your Designs from Figma
Using Figma to design sections and elements? The Wix Studio plugin lets you turn your static designs into a responsive live site, with one streamlined process. You can import entire Figma frames, specific components and sections, or use our wireframes (UI kits).
Once in Studio, you can enhance your designs with no-code animations, custom CSS, connection to business solutions like Wix Stores, and much more.
We recommend keeping Figma and the Studio Editor open, in separate browser tabs, as you'll need both for this process.
In the middle of the process and need help? Read our FAQs and troubleshooting info below.
Step 1 | Prepare for the export
Before trying to import designs from Figma, there's a few things we recommend checking. This will ensure a seamless transition from Figma to Wix Studio.
a | Upload custom fonts to Wix Studio
Make sure all of the fonts you're using on Figma are also available in your Wix account. It's better to upload the fonts to Wix in advance – otherwise, system fonts replace the fonts you intended to show.
b | Compare the frame width to the editing size
The Figma frame width should match the editing size of the relevant page in your client's site. If there's a mismatch, your design won't be exported in the same ratio, which means it will not appear in the right proportions in Wix Studio.
Exporting elements?
You should still check the width of the frame that contains them to ensure a 1:1 result.
Step 2 | Install the plugin
If you haven't already, install the Wix Studio plugin from the file you want to export. Once installed, you can easily access the plugin from any other designs in your account.
Next, open the plugin panel from the Studio Editor.
a | Install the plugin on Figma
Open the file you want to export in your Figma account.
Press Ctrl + K on your keyboard (Cmd + K on Mac).
Click the Plugins and widgets tab.
Search 'Wix Studio' and select Figma to Wix Studio from the results.
Click Run.
Sign in to your Wix account on the plugin.
b | Open the tool on your client's site
Go to your client's site in the editor.
Click the Wix Studio icon
at the top left.
Hover over Tools.
Click Import from Figma.
Tip: This adds a new icon
on the left side of the editor.
Step 3 | Choose what to export from Figma
After installing the plugin, go back to the file in your Figma account. The plugin lets you choose what to export–a frame, or your styles.
We recommend exporting your styles first (i.e. typography and colors), so they're already set up in the Studio Editor by the time you start exporting frames.
Which elements does the plugin recognize automatically?
When you select a frame on Figma, our plugin is able to identify the following:
Page
Section
Stack
Container
Button
Text
Image
GIF
SVG
Note: Make sure your file is smaller than 250kb.
The plugin does not auto-recognize menus, forms, galleries, videos and input elements. Once you import the frame to the Studio Editor, these specific elements won't be functional. However, you can quickly replace them with the available elements in the editor.
To export from Figma:
(If not already open) Open the relevant Figma file.
Access the Studio plugin:
Click the Figma icon
to open the main menu.
Hover over Plugins and click Figma to Wix Studio.
Click Set up Export.
Click Next.
Verify that the editing size in Wix Studio matches the Figma frame width. When ready, click Start Export.
Choose what to export and follow the steps:
Styles
Select frames that include all the colors and fonts that should be exported. This can be one or multiple frames, including top-level ones.
In the panel, you’ll notice the plugin automatically recognizes the colors and typography in the frame(s) you select. This includes all text elements and their styles, such as font, size, color, and formatting, along with the colors present in text, buttons, shapes, and backgrounds in the selected area.
Review the styles before exporting and once satisfied, click Export Styles. Once the export is complete, head back to the editor.
Frame
Click the frame you want to export. The plugin will show you a preview of the frame and its width – at this point, we recommend double-checking it matches the editing size in the editor.
When ready, click Export Frame. Once the export is complete, head back to the editor.
Step 4 | Complete the import in the editor
Once the export is finished in Figma, go back to your editor and make sure there are no missing fonts or size mismatches.
Working with a frame? You can choose whether to import it as a container, section, etc.
To complete the import:
Go to your client's site in the editor.
(If not already open) Click the Import from Figma
icon on the left.
Depending whether you've previously imported from Figma to the current Wix account, refresh the panel:
First time import: Click Refresh.
Have previously imported: Click the the Refresh import icon
.
Depending on what you're importing, follow the steps below:
Styles
Review the colors and fonts that you're about to import.
(If there are missing fonts) Click Upload Fonts and upload those that are missing from your account.
Click Apply Styles to Site.
(Optional) Go back to Figma to export the relevant frame.
Frame
Review the frame you're going to import:
If the editing size doesn't match the Figma frame width, click Match Editing Size.
Tip: Alternatively, you can resize the Frame on Figma and then export it again. See our FAQs section for more instructions.
If there are missing fonts, click Upload Fonts.
Select the relevant option next to Add frame as: Container, Section, Page or Stack.
Click Add to Site.
Enhance your Figma design:
Adjust your design’s responsiveness using the Responsive AI tool or by manually setting the exact behavior you want.
Add movement tailored to your exact specs with no-code animations and effects.
Connect our business solutions for eCommerce, Bookings, Restaurants, Hotels and more
Connect elements with the CMS to display dynamic content.
FAQs
Click a question below to learn more about importing designs from Figma.
Can I import designs from Figma to an existing site?
Yes, you can import your Figma designs to an existing site or to a brand new site.
Can I import multiple pages at once?
No. Currently, this option is not supported.
Do my Figma designs automatically connect to Wix apps (e.g. Wix Stores)?
No. You will need to manually install the relevant Wix app(s) on your client's site.
What happens when importing menus, forms, and buttons? Will they function on my client's site?
Buttons are imported as functional button elements if they have text only (more specifically, a symbol / frame with 1 text element and a fill color).
If your button on Figma is a shape or icon, the plugin does not identify it as a button.
Menus and forms are imported as regular text elements, so they won't function like the menus and forms offered by Wix Studio.
After importing your design, we recommend replacing these elements with the menu and form elements available in the Studio Editor.
How will my imported design look across breakpoints?
As long as the desktop Figma frame width matches the editing size on the specific site page, the result will be accurate, and the designs will scale proportionally across breakpoints.
If you want to make further adjustments for desktop, tablet or mobile, you can do it manually or use Responsive AI to optimize your designs for all breakpoints.
If I make further changes to my Figma design after importing it to Studio, will they automatically sync?
No, your changes won’t automatically update. Any changes need to be exported and imported again.
Can I export designs the other way around, from Wix Studio to Figma?
No. Currently, this option is not supported.
Troubleshooting
Experiencing issues while exporting your Figma designs to Wix Studio? Click an issue below to learn what caused it and how to resolve it.
Before you troubleshoot:
If you are unable to export your design, we recommend checking whether you have reached the rate limit on your Figma account.
(On Figma) No styles appear in the panel when trying to export
Make sure the relevant frame(s) is selected. You can see if it's selected or not on the canvas, as well as the Layers panel.
For more specific tips, read below.
Typography styles:
If you can't see a specific typography style, check that:
Live text elements were used.
All relevant fonts are installed on your computer.
Colors:
Colors appearing in images cannot be automatically recognized. If needed, you can add them later on as custom colors in the Studio Editor (using their HEX, RGB or RSB codes).
(In the editor) Can't see the option to add a frame as a page / section
The options you see next to Add frame as depend on the specific frame you've exported:
Page: Top-level frames only
Section: Nested frames wider than 1001px
Container: All frame sizes
Stack: Frames with auto layout
If you can't see the option you're looking for, you might have exported a frame that does not meet the above requirement.
(In the editor) The design doesn't look proportionate after importing it
When the Figma frame width does not match the editing size in the editor, the design automatically scales up or down. If your design isn't in the same proportions as it was on Figma, there might be a mismatch.
Note: The editing size is set per page in the Studio Editor.
If you prefer resizing the frame on Figma so it matches your editing size, you can use the Scale tool. Then, export the frame again.
Still need help?
What information should I include if I need to reach out for assistance?
For us to best assist you, it helps to have the following information ready:
The Figma URL of the relevant project
Note: Make sure to make it public so our team can view it.
A video or screenshot of the specific issue
(If the issue relates to a specific frame) The frame name as it appears in the Layers panel on Figma.