Step-by-step guide: Figma to Wix Studio best practices

Accessing and installing the Wix Studio plugin

To start the process, you’ll need to work simultaneously on Figma and Studio.

On Figma

First, install the plugin either via the Figma Community page, or directly from your chosen Figma file by opening the Plugins panel (Shift + I) and searching for “Figma to Wix Studio”.

When you install the plugin, you’ll see a new panel with instructions. Click Get Started, then copy the URL of the Figma file that you want to connect. If you're using the Figma desktop app, you can use a shortcut: Cmd/Ctrl + L. Next, go to Studio.

Connecting Figma files to Studio

On Studio

Open a blank canvas or an existing site in the Editor. In the top bar, hover over the Studio logo to reveal the site menu and click to access the dropdown options. Select Tools > Import from Figma. 

Paste the Figma file URL into the Import from Figma panel that appears in the left sidebar and click Connect. Follow the short, one-off authorization process to complete the connection. 

Exporting styles from Figma

Tip: To achieve a 1:1 result when you export frames from Figma to Studio, we recommend that you start by matching the width of the Figma frame to the editing size on Studio. If you choose not to, your designs won't be the same ratio. Instead, they’ll scale up or down.

When choosing a starting point, you’ll see 3 options:

1. Export Styles: This is the recommended first step to transfer your designs. By exporting typography and colors you’ll maintain the highest level of design consistency. If you choose not to, elements imported to Studio will be styled with defaults, which may affect the design and layout.

2. Export Frame: If you choose to export a frame, without first exporting styles, you will need to manually update these design elements in Studio, to get the look you desire.

3. Get Wireframes: If you prefer to start from scratch, you can design using 100+ components, including wireframes, specifically built for Figma and fully-optimized for exporting to Studio.

How to export styles

Select the frames that include all the styles you want to export for your site theme. This can be one or multiple frames, including top-level ones.

In the panel, you’ll see that the frame’s colors and typography are automatically recognized by the plugin. 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. You’ll see a notification when the export is complete.

Importing Styles on Studio

In Studio, the styles will appear in the Import from Figma panel. Click Apply Styles to Site. Once applied, you’ll find all of your themes in the Themes panel under Typography and Colors.

Note: If any fonts are missing, you’ll get a notification in the panel and will have the option to upload them to Studio. If you continue without uploading them, it could affect your design as all missing fonts will be replaced by defaults.

Exporting frames from Figma

To continue, go back to Figma and select Export Frame from your starting point options.

How to export frames

Click on the frame you want to export. In the panel, you’ll see the width of the selected frame. 

The frame’s design will determine how it’s imported to Studio.

• Page: top-level frames only

• Section: nested frames wider than 1001px

• Container: all frame sizes

• Stack: available for frames with auto layout

Once you’re ready, click Export Frame, then head to Studio to import.

Tip: To keep horizontally or vertically positioned elements together when exporting, you’ll need to add auto layout to the selected Figma frame or components. Once they’re imported to Wix Studio, they will be identified as a Stack—a flexbox container that keeps the elements together and maintains the defined spacing so they don’t overlap.

On Studio

The exported frame will appear in the Import from Figma panel.

Select the frame you want to add to your site and click Add frame as, to view the available options in the dropdown menu. As outlined above, these options will depend on your chosen frame’s format.

• Add as a Section: adds the frame as a section in your current viewport

• Add as a Page: creates a new page on the site 

• Add as a Container: adds the frame in the middle of the selected element

Note: only top-level frames from Figma can become pages in Studio.

Click Add to Site. A notification on the screen will let you know if the frame is added successfully.

Keep adding frames, until all designs have been transferred over to Studio.

Note: Elements that don’t import as intended, for example, menus and forms, will need to be redesigned using the Studio component. You can add, switch or remove elements directly in the Studio Editor—no need to redesign in Figma and export.

Getting the best results for your elements in Studio

Ensure a smooth export to Studio by understanding which elements are supported by the plugin.

The plugin automatically identifies the following:

• Page

• Section

• Stack

• Container

• Images

• Button

• Text

• GIF

• SVG

  
  

Note: Each file can be up to 250KB.

The plugin does not auto-recognize menus, forms, galleries, videos and input elements, so once you import them to Studio, they won’t be functional. However, you can replace them with similar available elements in the Studio Editor.

Exporting images

When a frame is selected on Figma, Studio recognizes the images used and extracts them. If an image is masked, it will appear on the canvas as the masked shape, but you won’t be able to unmask it.

Once the frame is imported to Studio, you'll see the images appearing just as intended. Additionally, they're added to your site's Media Manager for future use.

Exporting shapes (SVGs)

When a frame is selected on Figma, Studio recognizes the shapes you've used. This includes vector groups, which are automatically detected as SVGs. Only SVGs that are 250KB or smaller are supported.

Once the frame is imported to Studio, you'll see the SVGs just as you designed them. Additionally, they're added to your site's Media Manager for future use.

Building your sections on Figma

When exporting a top-level frame from Figma and importing it as a page, sections are automatically created based on the spacing in your design.

You can make sure sections appear correctly in Studio by framing the relevant elements for each section in Figma and setting them as the child of your top-level frame. To avoid any overlap between sections, hold the Cmd / Ctrl key while resizing the overlapping edges of your frames.

We also recommend checking that the layers of your Figma file are organized to match the visual order of your design, from top to bottom.

The Layers panel in Studio displays sections in a top-to-bottom hierarchy, so organizing your layers in advance can help prevent mistakes and missing sections. 

Backgrounds

Wix Studio supports color, image and gradient backgrounds for Sections only. 

When your designs are exported, the solid color, gradient (Linear/Radial/Conic) or image you've used for the background are extracted and made available on Studio.

• Gradients will be saved for future use under My color gradients in the Color Picker panel in Studio. 

• Background images will appear in your site's Media Manager.

For background images, make sure you're exporting a full-width image, or a full-width frame/rectangle with an image fill. 

Buttons 

Designed buttons in Figma import to Studio as button components if they have text only.  Currently, shapes or icons inside buttons on Figma, can not be exported as button components.

To appear as a button on your new site, your design should look like this: a symbol/frame with 1 text element and a fill color.

Containers

A container is a layouting tool in the Studio Editor that helps to structure the content on your site. You can attach any element to a container—text, images, and even other containers. You can also apply a grid on a container to make your layout more precise.

In Figma, you can combine multiple elements together in a frame, so they appear inside a container in Studio. If a frame shouldn't appear as a container, make sure to ungroup these unnecessary frames in your Figma file.

Tip: After adding to your Studio site, you can add or remove containers as needed.

Use auto layout to stack elements

A Stack is a way to control the relationship between elements on your canvas, whether they’re in a vertical or horizontal order. Stacking automatically puts elements inside a flex container that prevents overlap when the viewport changes size. 

In Figma, you can add auto layout to a frame/group of elements in a vertical or horizontal direction to ensure it appears as a Stack in Studio. The spacing between items you set in Figma converts to margins in your Studio site.

Horizontal Stacks will be created from a horizontal auto layout—of any size—with the width set to Hug contents.

Working on your Studio site

Now that you’ve imported your Figma designs to a Studio site, it’s time to fine tune the details before you publish.

• Adjust your design’s responsiveness using the Responsive AI tool or by manually setting the exact behavior you want.

• Add movement and tailor to your exact specs with no-code animations and effects

• Connect native business solutions for eCommerce, Bookings, Restaurants, Hotels and more

• Display dynamic content on site elements with the CMS and make updates without touching the design

• Align your site with SEO best practices using industry-leading native tools

Let the step-by-step lessons and hands-on challenges in the Wix Studio Essentials course be your guide if you haven’t built on Studio before, or or explore our library of tutorials and webinars to brush up on a particular area. 

All done? Next step: connect a domain (or stick with the free one) and hit publish.