Turn your Figma designs into interactive websites with ease. Our Figma import feature lets you quickly convert static designs into responsive sites ready to publish anywhere.
If you want to dive deeper into this topic, we recommend watching our YouTube video, where we explain the process step by step. You can find it on the Vev channel.
Connect Figma with Vev for the First Time
To get started, you need to link your Figma account with Vev. Follow these steps:
Choose "Figma Import" to start a new project.
Click “Allow Figma access” to connect Vev with your Figma account.
A new Figma tab will open automatically. Click "Allow access" to complete the authentication process.
Once you see the confirmation screen, you have successfully connected to Figma!
You can then click "Close this tab" or close the tab directly in your browser.
Import a Figma project
From the dashboard
Click the Figma import button (see section above).
Paste the URL of your chosen Figma project and click "Start import."
Browse through your Figma project pages and frames. You can also use the drop-down menu to select the one you want to import. Click the "Import" button.
Note: You can only import one page at a time. Multi-page import is currently not available.
If you have no custom fonts to upload, your Figma page will appear as a Vev project shortly!
From here, you can easily add advanced animations and interactivity using Vev's pre-coded components to bring your design to life. Once you've reviewed your design across breakpoints, you're ready to hit the publish button!
From the Design Editor
Alternatively, you can import a Figma file from inside the Design Editor:
Click the Vev icon in the top-left corner
Hover over File
Select Import from Figma
Follow the same process detailed above
Importing a Figma Project from Project Settings
You can also import a Figma file from the Project Settings inside the Design Editor.
To do this:
Click the settings icon in the bottom left corner to open Project Settings.
Scroll to the bottom and click the "Figma import" button
Follow the same import process described above
For a faster Figma import and to minimize effort when reviewing your design across devices, check out these Figma file best practices.
Current known limitations
Limited support for blend modes
Vector files will be imported as SVGs or images
Limited support for cropping
Custom stroke styles are not supported
Supports only clipping masks for rectangles (not custom shapes or multiple shapes)
If you have used different fonts within one grouped text box, that will not be reflected after importing
Figma sections, prototypes, and interactions are not reflected after importing; import only works with Figma frames and groups
🌟 We're constantly working to improve our Figma import feature. Please hit the chat bubble in the bottom-right corner or create a new feature request in our community to let us know which limitations you'd like us to prioritize.
FAQs
"Can I import Figma designs for different breakpoints?"
Not yet — currently you can only import one breakpoint. However, you could create a new Vev project to import the design for another breakpoint. You can also style an imported design across all breakpoints in Vev.
"I can't import a Figma design to Vev, I click import without initiating the import process."
This issue might be caused by your browser settings. The authentication process requires pop-ups, which your browser might be blocking. Please check your browser settings and enable pop-ups for Vev.