If you are like me then you are using AI tons and it has helped me a ton to build things quickly and efficiently.
Currently, my favourite tool of choice for building websites is Wix Studio, so let's see how quickly I can build Wireframes with AI and then import them to Wix.
Create Wireframes using Relume
Go to Relume dashboard and click "New Project"
Let's build a Sitemap first for a new project. In this case, I am assuming it is for a Freelancer designer-developer and I am going to use the following prompt: " Create a portfolio website for a freelance developer-designer. It should include the following: Developer Name, About me section, work history, project list with its details, contact form and an area to integrate an embed such as maps or music."
Click Generate the missing sitemap sections as well!
Click on the wireframe button and the wireframes will automatically be generated!
Export Wireframes to Figma
Now that the wireframes are generated, I prefer to move them to Figma and make any small changes before moving to Wix Studio.
Install both the Relume Figma Kit and Relume Figma Plugin here.
Once you sign in using the Figma Plugin, you will see the option to select the wireframe project.
Select "Add Wireframe" and wait for the process to finish.
Viola! Your wireframes are now in the Figma for you to make changes! Once you are happy with the changes, you can move ahead with Wix Studio!
Export Figma to Wix Studio!
We can now finally move the wireframes from Figma to Wix Studio!
Install the Figma to Wix Studio plugin by going to plugins then Manage plugins and then searching "Figma to Wix Studio".
Create a new Wix Studio site and select "Blank Canvas"
Go to tools and then import from Figma. Then, paste the URL of your Figma page with the wireframes.
Click "Start Exporting" and then select "Export Styles".
Once the export is finished, go to Wix Studio and click "Refresh Import" and after the refresh select "Apply Styles to Site". Feel free to replace any missing fonts if you like.
Finally, we can now export the wireframes itself.
Select the portion of the frame that you want to export and then select the "Figma to Wix Studio" plugin.
Click on "Export Frame" as we did on "Export Styles".
Then just as before, go to Wix Studio, and select "Refresh Import".
Click "Add to Site".
Now your component should be available in Wix Studio!
Comments