Hey, It’s Carly here from the Wix Studio team and I’m gonna show you how to export your designs from Figma to Wix Studio.
The Figma to Studio plugin lets you seamlessly export designs to a blank canvas or an existing Studio site. It extracts the elements and settings from your frames and imports them to Studio as responsive site designs. After that, it’s up to you to take them further by adding interactions, custom functionality and more.
Let’s get started.
Here’s our site design in Figma. We’ve created a top-level frame, containing 4 nested frames with different elements inside them. Now, we want to bring this design over to Studio.
To install the plugin, we’ll go to Plugins and search for “Figma to Wix Studio”.
When the panel appears, click here to get started”.
First, we need to connect our Figma file to a Wix Studio site. So let’s copy the file URL, before heading to Studio.
You can import your designs to a blank canvas or an existing site. I’m starting with a blank canvas.
From the top bar of the Studio Editor, open the Site Menu, select Tools and then Import from Figma. Now paste the URL—and connect. To complete the connection, we need to allow access.
Let’s go back to Figma.
Here’s a tip for getting a 1:1 result when exporting your designs. Match the width of your Figma frame to the Editing Size on Studio. If you don’t, designs might scale up—or down. One more thing. To import a frame as a Section or a Page, it must be wider than 1001px. This one’s set to 1280px, but you can go lower if you need to.
Let’s follow the recommended first step and Export Styles. This will export all of the typography and colors used in your selected frames, and wires them right to site Themes in Studio.
We’re gonna select this top-level frame, since it contains all of the styles. But you can select multiple frames if you need to.
The plugin identifies all the colors and typography used. Time to export them.
Okay. That’s done. Let’s go to the Studio Editor to import. If any fonts are missing, you’ll get a notification to upload them. You can upload them here directly.
Looks like we’re good to go, so let’s click Apply Styles to Site. We can do a quick check to make sure everything has been updated.
Now that’s done—we’re ready to head back to Figma and export some frames. We’ll start with the hero. Don’t forget to match the frame width to the Editing Size on Studio. Click to select, export, and there we go.
Once it’s exported, it’ll show up in the panel on Studio.
At the bottom of the panel, you’ll see all the ways you can import the frame. The options are based on the frame’s size and format in Figma. This frame has been identified as a Section. Perfect.
Click Add to Site. There it is. Our first Section.
And because we exported styles, section elements are wired to the site themes, allowing us to make quick global changes.
Okay, we’ll run through the flow once more by exporting another Section. Go to Figma, choose the frame, export, then import to Studio and add.
The elements in this section are identified according to the way they were built on Figma. Here we’ve got some text, images, and a button.
To keep these vertically positioned elements together, we added auto layout to the Figma frame, so they’re identified as a Stack when imported to Wix Studio—and the spacing stays defined. Because we matched the editing size on Studio, all elements scale proportionally. So as we resize the screen, the elements get bigger or smaller but their width and height keep the same ratio.
Next, let’s export this top-level Figma frame. In other words, this is a parent frame that isn’t nested within another frame.
We can export the entire frame and import it to Studio as a brand new Page. We don’t need to export section-by-section.
Done. This looks good. We can see that the page is divided into Sections, based on the spacing in the Figma design. For best results, use nested frames within your top-level frames to help maintain a clear structure in Studio.
One last thing about exporting frames. If we export a frame smaller than 1001px, like this card for example—
One last thing about exporting frames. If we export a frame smaller than 1001px, like this card for example—
Studio identifies it as a Container or Stack, not as Section or Page. And when imported to a site, it’s added inside a Section. So keep that in mind when designing.
So, now that everything has been exported and imported—the site design is ready to perfect. We can make changes to the imported designs and layout—same as we would in any other site. Here, let’s make the text in these paragraphs wrap…
Since Studio is a responsive platform, the design can be adjusted for any breakpoint.
Let’s make some tweaks. This Section looks good on Desktop and on Tablet too, but on mobile—it’s a bit crowded.
First, we’ll click the Mobile Breakpoint icon, so we can customize the mobile design without affecting the other breakpoints. Then change the Horizontal Stack to Vertical… and align the Title to the left. We’ll also change the Paragraph font size to 16px and set it to scale proportionally.
We can adjust other Sections as well.
Animations create a fun and immersive browsing experience. Let’s say we want these 2 strips to move in opposite directions as we scroll.
We’ll start with the top one. Select the Stack, click the lightning icon in the Inspector Panel to open Animations & Effects. Select Scroll, then “Add”, and choose “Move”.
We can adjust the animation so it moves how we want. Let’s go right to left.
To do that, set the angle to 90°, make the distance 100px and set the animation area to 100%. Then scroll to preview how it behaves.
For the bottom strip, add the same Scroll animation and adjust to scroll the other way—left to right. Set the angle to 270° and the rest of the properties to the same as before.
Let’s see how it looks now. Cool. There’s the animation as we scroll.
Since this is an online store, we’ll add our native eCommerce solution. You can choose other business solutions like Bookings, Hotels, Restaurants and more, depending on the project. If you want to add and manage content in bulk, connect the CMS. And if you want to extend your site’s functionality, you can do that too with custom code.
Once we’re happy with the result and ready to go live, we’ll hit publish and see it live.
And that’s it. We’re live. (And looking good.)
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.