Figma to Webflow tutorial from start to finish

In this tutorial you will learn the process of converting a design from figma and translate it into a working website in Webflow.

by Michael Burns

Webflow is a great tool to use if you're a beginner that doesn't have any knowledge in development and you just want to build a website on a fly. The process of making a website in Webflow is simply unbelievable, imagine you can animate something without knowing any Javascript or Jquery. Without any further ado let's just go straight to the tutorial. Don't forget to register a free account on Webflow.

Part 1: Assets and Structuring.

The first thing you need to build a website in webflow is to prepare the assets of the website that you've design. For me, I exported all the needed assets from Figma and imported it to Webflow assets manager. Then, I started placing the elements to structure the page.

Part 2: Building the Search Bar

With Webflow it's easy to build tabs and forms since they have a premade components. But of course we still need to style this to match our design.

Part 3: Menu and Video Lightbox

Controlling on how you want to display the menu in webflow is easy. You can select on mobile, tablet or desktop with just a click. Another cool feature in Webflow is the ability to add lightboxes. You just need the url of the video or photo and then you will have a workign lightbox.

Part 4: Carousel Image Gallery

Creating an image gallery on Webflow is easy. By using the carousel element you will have the functionality you need of an image gallery. Also, we will combine it with lightbox so will get the full gallery experience.

Part 5: Final Tweaks

On this final part we're going to build the ramaining section and tweak the little details that needs fixing on the page.

You can watch the full playlist on youtube.

If you enjoyed the tutorial don't forget to share and subscribe on my YouTube channel. And if you want to get notified on my next tutorials please be a part of my creative newsletter by subscribing below.

Tagged with: webflow, figma, web design, web development

My Creative Newsletter

Subscribe to my newsletter and get the latest tutorial and resources directly in your inbox.