Figma Import
Turn static Figma designs into interactive websites in a few clicks
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

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.

Related articles

Did this answer your question?