How to convert a Figma design to 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: a

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: w

and visit my finished page here: y

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 🙂



Blog: m
Online apparel store: /
Design portfolio: o
Podcast: m


Twitter: y
Instagram: y
Facebook: V

My sister SmayJay’s channel: e



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 May Also Like