Ready to transform your Figma designs into live, interactive websites? Our Figma import feature enables you to effortlessly convert static Figma designs into responsive websites that you can publish anywhere on the web.
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.