What's New: Figma Import

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.