How to turn your Figma designs into an animated website, with Vev

Figma is a great tool for static designs and basic prototyping, but occasionally you may run into scenarios where you need to have more complex animations to make your entire design cohesive and immerse your stakeholders or customers.

Vev provides a shortcut for this with their Figma plugin. We can import an entire Figma design to create an interactive website and apply advanced animations, making everything feel far more premium.

Why you should animate Figma with no-code

Animated designs are far more compelling than static designs, and will help you convince stakeholders or customers that your site is worth their attention.

Using no-code tools like Vev to animate Figma means you can quickly create complex animations which would take lots of time (and money) if coded by hand.

In this tutorial, we will be creating a website that displays different examples of AI art, along with some prompts used to generate them. We’ll add animations to different sections to make the site feel compelling.

Let’s get started.

Creating our Figma design

We need to generate some AI art for our design. For this, I have used DALL-E, a product of OpenAI. You can create a limited number of generations for free, or download some of their sample art from the website.

I’m a fan of the synthwave aesthetic, so I’ve generated a few different sceneries and objects in that style.

Once we’ve placed our generated images into Figma, we can begin work on the layout. When importing your design into Vev, I’ve found the most effective thing to do is split sections into different artboards, and then include them in one single artboard when you’re satisfied that the section is complete. This allows Vev to properly create sections of your design in the generated website.

As you can see, we have three sections, each with different styles. At the moment, all of these designs are static with no animations. We’ll add the animations in Vev.

Once we’re satisfied with our design in Figma, we will use the Vev plugin to import our design into Vev. Here’s a link to duplicate the design I created if you want to follow along with me.

We need to select our main artboard, and then run the plugin. You’ll see a dialog open which confirms the assets Vev will be importing, along with an input for you to add the Figma link to your design.

Once you’ve confirmed the link, your browser will open a new tab showing the imported project in Vev.

Because we’ve used things like autolayout in our Figma design, Vev imports the structure in the same way so things immediately look consistent across the tools.

That wraps up everything we needed to do in Figma, we can now begin making our design come to life in Vev.

How to quickly animate Figma designs in Vev

Starting with our first section, we currently have three pieces of art on show. It feels quite lifeless at the moment, so we’re going to make it feel more engaging and interactive with some hover animations.

We’ll select the first image and then click the ‘Addons’ menu in the top right, and select the ‘Animation’ addon.

We want a hover animation, so we’ll set up some effects to happen on hover. It would be nice if the art grew in size while also rotating slightly.

We can apply both of these effects with the scale and rotation effects, shown here:

We’re scaling the element by 1.5 its original size, and rotating it very slightly to give the feeling we’re muddling through printed artwork on a cluttered desk.

We can set the duration and delays of the animation to make the interaction clearly visible when the user hovers. Feel free to play around with the durations yourself so that it feels right for you.

After we’re done, we can preview the design and it will look something like this when we hover:

You could make a preset of this animation and apply it to the other two pieces of art on the page, however, I want to add some variation so I am going to give them some different scale and rotation values.

Moving onto our next section, we have another piece of art which is designed to look like it’s under a spotlight to feature it.

Here we’ll apply a couple of different animations:

1. We’ll make the spotlight seem to turn on as you scroll into the section.
2. When the user is moving their mouse on the page, we’ll make the artwork move with the cursor.

So let’s start with the light.

We can select the background image which looks like a fading light beam and apply a scroll animation to it, which adjusts the opacity of the element. This will essentially mean that when we scroll into the section, it will look as though the light beam slowly appears.

This will mean as you scroll into the next section, this beam of light will appear around the artwork, drawing attention to it.

Moving our attention to the artwork, if this is something we want to feature prominently we should add a unique and interesting interaction to it.

Going beyond Vev’s animation plugin, they also have a collection of pre-built interactions that would take forever to hand-code, but moments to implement in their designer.

We will select the artwork here and apply one of them now. With the artwork selected, choose the ‘Mouse Move Parallax’ addon.

You can enter a value for the movement factor. Lower values result in less movement, while higher values mean the element moves rapidly in response to your cursor’s placement.

You can also either have the element move towards or against the cursor. Because we want the user to feel close to our art, we will uncheck the ‘move against cursor’ option so that the element moves towards the cursor as the user scrolls around the page.

Here you can see the artwork moving towards the cursor as it moves in different directions around it.

Now we’re done with the featured artwork, we can move on to the final section.

Here we have a collection of four pieces of art which are all stacked over each other. Ideally, we want the user to be able to see them in more detail as they hover over them.

With an element selected, we can add an animation addon and get it to run on hover as we did in our first section.

We will apply some effects so that the element scales and changes its horizontal position on hover:

We can create a shared preset so we don’t have to keep making unique animations for each element. We’ll click the plus icon at the top of the animation controls to create and name our new preset.

Now we can apply that preset to the other elements really quickly, by giving them the animation addon and choosing the preset from the dropdown list.

Now all of those elements have the same behaviour. But let’s take it a step further. Vev has an awesome isometric addon which lets you animate an element into an isometric view.

For each element, let’s add the isometric addon and select the option to animate it on hover. You can customise the values of the axes to suit your taste.

We’ll change the values for some of the axes on the other elements so they animate in a different direction.

This is such an engaging way to show off your content, and it only takes a few clicks in the Vev editor to achieve.

Now, to finish off our design we can make it responsive by using the viewport selector in the bottom left and moving our elements around so they still look great on the smaller screen sizes of tablet and mobile.

For example, here you can see the final section we just designed with the artwork rearranged to fit on the smaller screen.

And that’s it. This might be the quickest way to animate Figma designs and turn them into super-interactive and engaging websites with modern, sophisticated animations based on user behaviour.

Interested in seeing how it ended up? Here’s a link to my published site on Vev.