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.

Connect Figma with Vev

First up, you need to connect Vev to your Figma account. To do this:

  1. Start a completely new Vev project by clicking the "Create project" button.

  2. Then click β€œAllow Figma access” to connect Vev to your Figma account.

  3. Click "Allow access" to authenticate the connection.

  4. If you see the following screen, you're done!

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 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!

From the Design Editor

Alternatively, you can import a Figma file from inside the Design Editor:

  1. Click the Vev icon in the top-left corner

  2. Hover over File

  3. Select Import from Figma

  4. Follow the same process detailed above

From the project settings

You can import a Figma file from Project Settings inside the Design Editor. To get here:

  1. Select Project settings from the right-side panel

  2. Click the Figma Import button at the bottom

  3. 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 prioritize.


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.

Did this answer your question?