Connect Figma with Vev

Import from the project dashboard

Import from the design editor

Import from project settings

Known limitations

FAQs

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 are not reflected after importing; import only works with Figma frames

🌟 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.

Related articles

Figma import - Best practices

Figma import - Missing fonts

Figma import - Vev plugin

Did this answer your question?