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 exportBefore 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 StudioMake 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 sizeThe 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 and connect the Figma fileIf you haven't already, head over to the Figma Community page and install the Wix Studio plugin. Once installed, you can use right-click to access the plugin from any design you're working on.Next, copy the Figma file link and head back to the editor, where you can connect it to your client's site. a | Install the plugin on Figma
Go to the Figma to Wix studio plugin page. Add the plugin to your Figma account. Open the Figma file that contains the frame you want to export.  Copy the URL of your Figma file.b | Connect the Figma file to 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. Paste the URL of your Figma file and click Connect. (First time only) Click Allow access to finish connecting the file.Step 3 | Choose what to export from FigmaAfter installing the plugin, locate the relevant design 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:
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. Select the I'm done connecting my file checkbox and 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:StylesSelect 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.FrameClick 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 editorAfter choosing the styles and / or frames you wish to export, go back to your client's site in the editor. You'll notice the Import from Figma panel now shows your selection. Make sure there are no missing fonts or size mismatches, then choose whether to import the frame 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 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 there are missing fonts, click Upload Fonts. 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.   Select the relevant option next to Add frame as: Container, Section, Page or Stack. Click Add. 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.

  FAQsClick 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. TroubleshootingExperiencing issues while exporting your Figma designs to Wix Studio? Click an issue below to learn what caused it and how to resolve it.(On Figma) No styles appear in the panel when trying to exportMake 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 / sectionThe 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 layoutIf 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 itWhen 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?If the problem persists, contact us with the information below: 
Figma URL of the relevant project.
Note: Make sure to make it public so our team can view it. 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.