Introduction
In this course you’ll learn how to turn a Figma design into a fully functional website, with just one click (well, one click, and a paste command). This is all made possible thanks to a Figma plugin called Figma to Webflow by Webflow Labs.
► Before we go any further though, let me remind you that you can download unlimited Figma templates and more with Envato Elements.
Installing and Running the Plugin
I’m going to be using the Figma desktop app, but you can follow along using the online version if you prefer. In this lesson I’ll show you where to get the plugin, how to install it, and how to get it running.
Working With Existing Designs
When using this Figma to Webflow plugin to transfer your designs to Webflow, there are two possible scenarios.
- Firstly, you might be taking an existing design and transferring it.
- Secondly, you might be creating a design in Figma, knowing that you’ll be porting it to Webflow once you’re done.
Depending on the situation you’re in, there is a difference in the way you need to do things. One of the most important aspects you’ll need to take into account is Figma’s auto layout. Another important consideration is the element structure and naming conventions. In this lesson I’ll explain exactly what all that means.
Creating New Designs
If you’re creating a Figma document, knowing that later on you’ll be moving the design to Webflow, there are some things you can think about to plan ahead and save time. One such thing is using the plugin’s components within your design.
What the Plugin Doesn’t do
Don’t get me wrong—this is a fantastic plugin—but it can’t do all the things we might want it to (yet). In this lesson we’ll discuss this plugin’s limitations; vital to understand in order to make the most of it.
When all’s said and done, this plugin makes it super, super easy to get your Figma designs into Webflow. Don’t expect it to be perfect, because there are still some things you (logically) need to do yourself. Overall, I highly recommend this plugin.