How to publish your Figma design as a functional website with no code

Designing for the web can be a little repetitive.

Typically after you’ve done all your research and are satisfied you know what to build, you’ll hop into a design tool like Figma, Sketch or Adobe XD and design a high-fidelity, pixel-perfect interface.

Then — depending on your process — you’ll either pass your designs on to developers who might not implement your vision exactly as you saw it, or you’ll have to completely recreate the design again in another tool.

This wastes time, effort and money as you or your team are doing the same work twice.

However, we don’t have to keep working like this. There are no-code tools which can take our design from Figma and turn it into a functioning, interactive website.

Vev is the no-code design tool we will be using in this tutorial. If you’ve been prototyping in Figma before, this tool might provide you with a creative shortcut to get your design published online, ready for people to use. Vev lets us convert our designs in Figma to interactive, publishable websites without having to code.

Together in this tutorial, we will:

1. create a Figma design for a fake startup’s landing page,
2. import that Figma design into Vev,
3. make the design responsive and interactive with animations, and,
4. export the Vev site so it can be published.

Let’s get started.

Creating a Figma design

For this tutorial, I will assume you have knowledge of how to use Figma to a reasonable level. If you find yourself getting lost at any point, you should check out Figma’s learning resources.

First, we want to create our artboard. We should select the ‘Desktop’ option (W1440 x H1024) as we will be importing our design as a desktop website.

Next, we should decide what our fake brand should do. Feel free to run with any idea you’re excited about. The fake brand I’ll use will be called Sprout, which helps offset CO2 emissions for companies by planting trees. We’ll quickly decide on a colour palette and typeface.

Now we need to create the landing page which is going to generate some hype for the brand’s launch.

For each section of our landing page, we will use a frame inside our main desktop frame. This will help when we import the design into Vev later.

We’ll also be using autolayout when elements are laid out next to each other. In the example below, there is an icon next to some text teasing the launch date which uses autolayout.

We’ve also got some images overlaying the rest of the layout at the moment. The plan is that when the user loads the page, the branches move and reveal the tagline and launch date of Sprout.

Next, we’ll add some information about what Sprout will do as a company in the section below the hero.

When we import this into Vev, we’ll try animating the trees as the person scrolls around the page.

Finally, we’ll add a section to the end of the page for logos to help enhance the social proofing of the site.

These are just a group of simple autolayout components, with shapes for the logo and text for the company names.

With that, we’re done in Figma. If you don’t want to create your own Figma design and just want to follow on from here, then you can duplicate this design into your Figma account from here.

Importing the Figma design into Vev

We now want to take our Figma design over to Vev so we can create an interactive site. We don’t need to do any copy and pasting of styles or laborious asset exports and imports, that’s all handled by Vev.

Firstly, we need to use Vev’s Figma plugin. You can install it here. Vev also has an in-app Figma importing feature if you’d prefer to get started in the Vev app.

Once we run the plugin we’ll be asked to enter the link to the Figma file.

We can grab the shareable link from the sharing menu in the top right of the editor.

After we’ve pasted the link to the Figma file, we have to grant Vev access to the Figma file so it can import the design.

Vev then analyses the design for the colour palette used and the images included. Once we click ‘Export to Vev’ a new window will open which creates a new project and imports the design into Vev.

As you can see, most of the design has been imported like-for-like. The great thing about Vev is that it uses a lot of the same semantics as Figma, so if you commonly use things like autolayout then things will behave as you expect once you import your design to Vev.

Some design elements might need a tweak, for example, our tree branches which obscured the initial hero section slightly have moved around slightly. We can reposition them visually to get complete parity with the Figma design.

And that’s it, we have imported our static Figma design into Vev, which is now publishable as a website.

But, before you do that, we should make some further adjustments:

• we should add our animations based on user interactions so the site feels interesting to use, and,
• we should optimise our imported design for tablet and mobile so that people using smaller devices can use our website.

Making our design interactive and responsive

There are two things we want to make interactive:

• the branches lifting away from the hero text when the user loads the page, and,
• the trees in the second section to animate as the user enters the section,

Let’s get started.

To create the initial load animation of the tree branches uncovering the hero section, we need to select the image of the branch and add an animation add-on to it.

We’ll select the ‘Load Animation’ option here so that it’s triggered as soon as the user lands on the page.

We have some animation types to choose from by default, but for this custom animation, we’ll use the ‘Custom’ option so that we can make our visualisation unique.

For the purpose of this animation, we will use the ‘Back’ easing function, and make it ease in and out. This will make the branch look like it’s being initially blown down, only for it to lift and then slightly settle down again, which is the natural effect we’re aiming for.

Finally, we’ll customise the types of changes we want to make to the element when we animate it. We can choose to impact multiple properties by clicking the ‘+ Effect’ button. In this animation we want the branch to rotate away from the test, and to move horizontally backwards.

If we preview the design now, you’ll see that the branch lifts away from the text on the left side. We can replicate a similar animation for the branch on the right to complete the look.

Next, we want to animate the trees in the second section as the user scrolls.

For this, we’ll use a lot of the same steps as above when customising animations. We’ll select a single tree, but this time choose ‘Scroll Animation’ instead of the animation being triggered when the page loads. Then, we’ll alter the properties of the element so that the opacity and vertical positions are changed when the user is scrolling.

Naming your preset allows you to copy the same animation customisations to other elements too. If we call this animation ‘leaf-animation-1’ then we can easily re-use the preset across other elements, which saves us lots of time and repetitive actions.

Once we apply this animation preset to a few of our trees at random, we can preview the page and see that as we scroll down the trees emerge.

Making our design responsive

It’s important to ensure our design appears respectably across all viewports so that users feel they can trust the site, as design quality is a key aspect of trustworthiness in web design.

Luckily, making designs responsive in Vev is a breeze.

Using the viewport selector in the bottom left of the page, we can toggle between desktop (which we’ve already designed for), tablet and mobile. Designs are inherited from larger viewports downwards, so if you make a change on tablet, the change will also impact mobile, for example.

As you can see, on tablet we need to adjust some widths and positioning to ensure our design remains usable.

After a few minutes of rearranging, the designs are now responsive across all viewports. This includes making the animations work on smaller screens too.

Publishing our site

Now that the site is interactive, responsive and looking good, we can share it with the world.

Vev provides you with some options when publishing your site:

1. Publish it to their servers with a staging link (you can check out my design here).
2. Link a custom domain to Vev to publish your site to your own domain.
3. Embed your design on another page in an iframe.

If you want to embed your design, you can simply copy the embed code and paste it into any HTML file or as an HTML embed in another tool. It’s a very simple embed script, for example here’s mine:

<script src=”https://embed.vev.page/v1/DSFbltK-H9/pSCRQ9ECx0l"></script>

Conclusion

To summarise, together we’ve:

• created a website design in Figma,
• imported the design into Vev,
• made the design interactive with animations based on different triggers,
• made our website responsive across all viewports, and,
• published our site.

We’ve been able to do all of that without touching a line of code, needing a developer, or having to rebuild our entire design in another tool, all thanks Vev’s Figma import functionality.