What's New: Figma Import

May 25, 2022

Words by Yujin Jo


What if you could turn static Figma designs files (.fig) into fully-functional, interactive websites without coding anything?

With Vev’s Figma Import feature, it’s possible! We know that using design tools like Figma in combination with web creation platforms like Vev can be an extremely powerful, winning combo. Rather than having to rebuild your Figma design from scratch, you can now just import it into Vev in a few easy steps.

Here’s how the magic works. 🥳

Step 1: Set Up an API Key in Figma

In Figma, you can create what's called a "Personal Access Token" which allows Vev to access your Figma design files and render them as a Vev project via API.

  1. Open a project in Figma. For this tutorial, we’ll use this Figma file shared in the Figma community to demonstrate.
  2. Click on the Figma menu and go to Help and Account > Account settings.
  3. Scroll down to “Personal access tokens”.
  4. Give your access token a name. For this example, we'll call it "Vev”.
  5. Press the return key to generate a new API key, then copy the key using the “Copy this token” link.

Step 2: Import Your Figma File to Vev

  1. To import your Figma project, press the “Figma import” button on the new project page in Vev.
  2. Paste in the API key you just copied into the "Figma access token" field, and copy/paste the link to your Figma project into the "Project URL" field.
  3. Click the "Start Import" button and your Figma file will be turned into a Vev project. You can then start adding animations and interactive elements, such as navbars and buttons.

For now, we do not support importing multiple frames and pages. It’s also worth noting these current limitations.

Current limitations
- Limited support for blend modes, image cropping, and clipping masks
- Vectors will import as SVGs
- Custom stroke styles are not supported

Your Feedback Is Invaluable to Us!

We're constantly striving to improve Vev, and your input is invaluable to that process. Please share your feature ideas here and hit the chat bubble inside Vev to tell us what you make of the new Figma import!

Atmosphere, Dishware

Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy

Material property, Dishware, Serveware

Want More Inspo?