How to convert a Figma design to Webflow

Hosting With Webflow – How to convert a Figma design to Webflow

How to convert a Figma design to Webflow

Hosting With Webflow

Tips and advice for a quick workflow moving from Figma to Webflow! I’m proud to have Webflow as a sponsor for this video. Try out converting your Figma designs to a working website here:

Converting your design mockup to a working website is made soooo much easier with Webflow. It’s a visual code tool, so even though you’re dragging elements onto a canvas and changing settings to style like you would in a design tool, you’re creating code as you do it. Here’s my workflow for taking a design in Figma and bringing it to life in Webflow!

Try Webflow out here:

and visit my finished page here:

Why I switched from Sketch to Figma:

More Webflow tips and tricks and process videos here!



My videos no longer have pre-roll ads because I think ads are annoying. That means you don’t have to sit through ads, and it also means I don’t earn anything from the content I put on YouTube. If you want to support me and my channel the best thing you can do is join my Patreon!

You’ll get tons of extra content and ways to learn, like behind-the-scenes process info, downloadable assets or even a monthly group Google Hangout! Choose your tier and sign up here:



Hello there! I’m Charli and I’m a web and graphic designer from New Zealand currently living in London and posting design videos every Saturday about tools, projects, and concepts and vlogs every Tuesday about my life as a designer. Please subscribe and say hi in the comments so we can be friends 🙂



Online apparel store:
Design portfolio:



My sister SmayJay’s channel:



Music: YouTube Audio Library

My gorgeous intro animation was created by hand lettering animator Austin Saylor, you should hire him to do yours too:

you search:

Hosting With Webflow

How to convert a Figma design to Webflow

38 thoughts on “Hosting With Webflow – How to convert a Figma design to Webflow

  1. Can we convert micro-interactions without coding in Figma with a plug-in? In Adobe XD, when you use a converter plugin(to HTML, CSS), all the functionality, animation, navigations are gone.


    Thank you! It’s very informative and helpful!
    So, basically as I understand, you first create your design in Figma and then you copy the design or recreate it in Webflow?

  3. It seems like a lot of people in the comments have no idea what is going on:
    1/ She has designed using Figma
    2/ She is developing (building) it in webflow so it becomes an actual website

  4. Lol, you can't call this shit 'converting'. You take the exactly design and build it again in Webflow. That's not how converting works. Converting i: you take the design & bring it to Webflow without doing it again. That is how you call converting, not this clickbait fake shit.

  5. Can you tell me if there are any merits of first designing in figma and then converting to webflow. Why not design in webflow directly as webflow gives a very powerful designer. I am using webflow and I am considering figma to understand what benefits it can provide. Any thoughts on this?

  6. New to all of this and appreciate all of the comments already posted. And great vid. …So, could a developer accomplish publishing a site designed on Figma faster than C.M. does in this video? Could a developer create a design faster than one can in Figma? What the heck do developers actually do? All the detail stuff that these platforms haven't figured out how to automate yet?

  7. Hi Charli,

    I am trying to learn webflow and this is by far one of the best videos to help understand building real life sites. Is it still best practise to be using the column method you talk about or has another technique taken it's place now?

  8. Hi CharlieMarie, great video. Just wondering what is the space in pixels you use in between headlines and sub-headlines and paragraphs and between each section for padding? Do you use a base font scale to measure this???

Leave a Reply

Your email address will not be published. Required fields are marked *