Ready to jump from prototype to published site without involving a developer? Our native Figma import lets you instantly turn static Figma designs into interactive, responsive websites that you can publish anywhere on the web. `
In this article, we break down the whole import process step by step.
Connect Figma with Vev
First up, you need to connect Vev to your Figma account. To do this:
Click on the Figma Import button in the top-right corner of the dashboard.
Alternatively, start a completely new Vev project by clicking the "Create project" button.
Then click “Allow Figma access” to connect Vev to your Figma account.
Click "Allow access" to authenticate the connection.
If you see the following screen, you're done!
Import a Figma project from your project dashboard
Now for the magical part — instantly translating a Figma design file into a coded site in Vev.
From your main 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 and select the one you want to import. You can also select this using the drop-down as shown below. Then just click the "Import" button.
Assuming you have no custom fonts to upload, your Figma page will shortly appear in Vev!
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!
Import a Figma file from Vev's design editor
Alternatively, you can import a Figma file from inside the Design Editor. You just need to:
Click the Vev icon in the top-left corner
Hover over File
Select Import from Figma
Follow the same process detailed above
Import a Figma file from project settings
Finally, just to give you another handy shortcut, you can import a Figma file from Project Settings inside the Design Editor. To get here:
Select Project settings from the right-side panel
Click the Figma Import button at the bottom
Follow the same import process described above
Check out these Figma file best practices both for a super-speedy Figma import and to minimize effort when reviewing your imported design across devices.
Current known limitations
Limited support for blend modes
Vector files will import as SVGs or images
Limited support for cropping
Custom stroke styles are not supported
Supports only clipping mask 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, so please hit the chat bubble in the bottom-right corner to tell us which of these limitations you'd really like us to prioritise.
FAQs
#1 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.