From Figma to Webflow: How to turn your designs into a live website
By: Soliudeen Ogunsola
Tags: Figma, UI Design, Web Design, Design, Webflow

You can become a Badass Web Designer by converting your Figma designs into a working website using Webflow without writing a single line of code.

What I love about Webflow is the ability to translate my Figma designs into something awesome without bothering myself to code. It’s not about being lazy but the way you can use your design superpower to build something great with Webflow is something so special to mention.

First, what is Webflow?

Webflow is a visual web design tool firmly grounded in web standards and best practices, the Designer translates your design decisions into clean, production-ready code. It’s built to enable designers to develop websites familiarly — i.e., visually — without sacrificing quality.

The Designer

For a prototype, you can use the Designer alone, either sharing the prototype with devs to reproduce or exporting the code.

But to experience the full power of Webflow, you can combine the Designer with the CMS and their Hosting which allows you to publish on the free webflow.io subdomain when in development.

Things to Consider

Before you dive into bringing your designs to Webflow, you need to consider some basic settings which will allow you to think about the foundation you want to build your site on:

Layout Grid

Component

Colour

Layer

Typography

Layout Grid: It is advisable to use a 12 column grid when designing for the web on Figma which is also the standard grid in Webflow, where each container is 940px wide as it’s a standard width.

Component: Save some parts of your design such as Header/ Navbar and Footer made in Figma as components that work the same way as a Symbol in Webflow, where you make it once and reuse it on any pages.

Colour: Save your document colour in Figma into global swatches in Webflow so you can use it on your site.

Layer: turning layers to divs should be carefully considered to create consistency across the entire site. You can easily switch between the design tab and code tab in Figma to know the value of margin, padding etc. of each layer.

Typography: for fonts, Since Webflow also uses Google fonts like Figma. You can reuse your fonts on your site.

Demo

I designed a replicate version of hotels.ng landing page in Figma which was what I made in Webflow to use as a demo. One of the reasons why I choose hotels.ng landing page was just to test my design skills but I think I made something close to it and am open to feedback.

Replicate of hotels.ng designed in Figma

You can view my complete hotels.ng design here

Made In Webflow

Link: https://hotels-demo.webflow.io/

I didn’t make the demo function fully as the original website, it contains a combination of static assets exported from Figma which I just created to serve as a stepping stone to see what you can make in Webflow. All things are possible with Figma and Webflow.

For a complete hands-on session for converting your designs from Figma to Webflow, I recommend going through the series by Charlie Marie on her YouTube channel:

Time to bring your ideas live with Webflow 👨‍💻

Build something great with your design superpower, if you follow the details here and the one provided by Charlie Marie — It will help you set up a successful web experience with your Figma designs. I will be looking forward to seeing what you guys will build 🥂