Our Figma plugin lets you instantly turn your design files into fully-functional websites — all without involving a developer. Once coded in Vev, you can easily weave in advanced animations and publish your design directly to the web!
Here's a quick walkthrough on how the whole process works, starting in Figma.
Run the Vev Plugin
Head to Figma Community and search for “Vev” in the search bar. Click “Vev - Turn Figma Designs into Websites” in the search results, and then the blue “Try it out” button.
Done! You will be redirected to an empty Figma file with the plugin window open:
The Vev plugin will now appear under Resources > Plugins, so you don't need to search for it on the community page every time you want to use it.
Export your Figma design to Vev
When you're ready to turn your Figma design into a coded web page, just click the plugin "Run" button, which will open the following modal:
You just need to select the top-level frames you want to export as web pages. You can do that either by selecting the top-level frame on the left panel, or on the canvas itself:
NOTE: make sure that you really have selected the top-level frame, otherwise, you will only export the frame you have selected.
The plugin will then detect and highlight:
the name of the frame
the dimensions of the frame
the colors
the images
If the frame highlights are correct, then click the "Export to Vev" button.
Next, copy the URL for your open Figma project and paste it into the modal, making sure you've pasted the correct URL. Then you just need to click "Export" to export your Figma file to Vev.
Your Figma design in Vev
If you are logged into Vev already, a new browser tab will open and you will be redirected to your Vev Dashboard where the following modal will appear:
You can follow your Figma design as it is analyzed and transformed into a Vev project! Once successful, you will be redirected to the project containing your freshly coded site.
NOTE: If you aren’t logged into Vev when the export starts, you will be taken to a page where you can log in or create a free account.
Troubleshooting
Should the process fail, you will see the following screen:
Please double-check that you have pasted the correct Figma file URL before clicking the Export button. Should this message show for a correct URL, please click the "Give feedback" link and kindly explain the steps you took in the chat window that appears. We'll be in touch as soon as we can to help!
Don't forget to like the Plugin in Figma if you found it useful. 🙂
Related articles