Hello everyone, this is Canute. Today, I'll be guiding you through a quick tutorial on integrating Figma with Wix Studio. This process involves two primary steps. Let's get started!
Step 1: Update Screen Size in Wix Studio
Once you open your Wix Studio Canvas, the first step is to update your screen size to match your Figma design layout. For instance, if your Figma design is set to 1920 pixels, ensure that the Wix Studio screen size matches this. In our use case, we will use a screen size of 1440 pixels.
Step 2: Enable Import from Figma
To enable the "Import from Figma" option, hover over the Wix Studio icon next to the home and tools options, and select "Import from Figma." Click on "Get Plugin," which will open a new tab containing the actual tool. Here, you will see an option to "Open in Figma." Click on it to access all your recent Figma files. For this tutorial, we will use the "Maveristic Master" file.
Once the Figma file is open, a pop-up will appear. Click "Run," which will bring up a dialog box. Since we've already completed the two primary steps—setting the canvas size in Wix Studio and enabling the import from Figma—we can skip the setup.
Export Styles from Figma
The next step is to export styles from Figma. This involves defining your styling within the Figma tool. Select the section where you've defined your standard color palette and typography, and then click on "Export Styles."
Link Figma URL in Wix Studio
After exporting the styles, go back to Wix Studio and link your Figma URL. Copy the URL of the Figma file and paste it into the appropriate field in Wix Studio, then click "Continue."
Once the styles are ready to import, click on "Apply Styles to Site." This will update your color palette and typography. However, it's crucial to perform a hygiene check to ensure that everything has been imported correctly and aligns with your design.
Import Sections from Figma to Wix Studio
Now, let's import a section—such as the About section—into Wix Studio. In Figma, select the frame you want to export. When you click on a particular element, you will get a preview of the text or image. Select the entire frame and click on "Export Frame."
Return to Wix Studio and refresh the import. You will see three options: add the frame as a page, a section, or a container. Adding it as a page creates a new standalone page. Adding it as a section integrates it into the current page, while adding it as a container places it within the existing section. For this tutorial, we will add it as a section. Select "Section," then "Add to Site."
Final Hygiene Check
Once Figma has been imported into Wix Studio, perform a final hygiene check. Ensure that all elements align with your design standards and that there are no discrepancies.
Conclusion
And that's it! You've successfully integrated your Figma design into Wix Studio. Remember, always perform hygiene checks to maintain the integrity of your design. Happy designing, and take care!
Comments