How to Use the Figma to Webflow Plugin | FREE COURSE

in this video you'll learn how to transform a figma design into a fully functional webflow site with just one click well one click and a paste command and before you say ADI what is the sorcery there's no way that's possible I say yeah that's possible it's 2023 and we now have a figma plugin called figma to webflow so if you want to learn how this works and how you can get your figma designs into webflow really fast stick around and I'll tell you but hey if we're just meeting my name is Adi I'm a web designer and developer and in this course you'll learn the following how to install and run the figma to webflow plugin how to work with existing figma designs and also how you can make these compatible so you can move them to webflow how to create new designs in figma knowing that you'll be bringing them to webflow and finally we'll have a look at a few things that the plugin doesn't do so if you like the sound of that then let's get the show on the road but first I can't really start this video without telling you about envato elements so here we go envato elements is an amazing resource where you can find tons of assets like fonts icons UI kits WordPress themes music stock photos and much more for creatives like me this is an awesome resource because all these assets have simple commercial licensing and you're not bound to any contract therefore you can cancel whenever you want so if you're interested check out the link in the video description alright let's see how we can install this plugin before we get started here is a quick reminder that all the resources I used in this video are linked in the video description also don't forget to subscribe to envato test Plus for more free courses and tutorials just like this one alright so let's go ahead and install the plugin and see it in action first of all this plugin is created by webflow Labs which is like a smaller team inside the bigger team at webflow and you can get more information about this plugin but if you go to webflow.com figma to webflow or you can also find a link here that's going to take you to the figma Community page for the plugin now I'll be using the figma desktop app so I'm going to be installing it in a different way and the first thing I'll do is open up my resources here and I'll search for a figma to webflow and there it is this is the plugin and I'm going to hit run now if it's the first time you're running the plugin you're gonna have to authorize it with webflow so that it has access to um to your webflow account basically so here you're just going to click next next uh then create account and that's gonna open a link in the browser and here I'm logged in to webflow and I can choose either you know my entire workspace and the plugin will have access to all of the projects in my workspace or just a specific project in my case I just have a demo project created called figma to webflow so I'm going to select this one I'm going to click authorize app and now webflow the account successfully linked I can close this and I can go back here in figma and it says the same thing account successfully linked let's start now I'm actually going to run this plugin to show you exactly what it can do and the uh figma file that I'm using here is actually provided by webflow it's one of their playground designs you can find links to uh to those in the video description so what you do is you select the parent frame and then you choose the webflow site that you want to copy this to you click copy the webflow and this is going to prepare the assets basically when this copy button is clicked the plugin is basically parsing all the selected frames and elements and uh converts them to HTML and CSS and then once that's done you saw the message there copied successfully what you need to do is you go to your webflow project let's open the designer here and as you can see I have a like a blank document and all I got to do is select the body element command or control V so I'm pasting that design basically and now the plugin just got my entire design into webflow and here's the cool part if I click preview it's already done basically it's already coded all the layout is done for me how cool is this even the buttons are buttons right webflow the plugin actually knows that and it's making buttons from figma into buttons in webflow really cool and the best part is also responsive right as you can see the menu bar here on the top it could use a bit of styling sure but it's functional right and of course there are a few tweaks here and there to make it like fully responsive but for like a copy paste basically this is just phenomenal and that's it really you saw just how simple it is you just select the frame you copy from here and then once the copy is successful you go back to webflow and you paste it and that's it you're done now in here you have a couple different options and we'll uh we'll talk about these uh in the in this course we have some pre-made templates here for layouts uh you also have some pre-made templates for structure basically this is just to create containers and columns and such and in the options here you also have a very interesting ability uh to copy text and color styles and this basically allows you to create a style guide in a webflow so for example if I were to create let's say a color style for this button right so I go in here I create a new style let's call this primary fill right so now in my document I have the primary fill color style well I can go into plugin I can copy that color style or if I have text Styles I can copy those and then I want to go back to webflow right let's actually delete this uh I can paste this in here and it's gonna create a style guide for me right it's gonna add the color styles and it's going to add exactly what I had in figma a preview of the color the name of the style and also a hex code for it so pretty handy if you want like a quick export of all of your Styles this is a great way to do it that's pretty awesome isn't it a simple thing really you copy from figma you paste the webflow and you just went from design to code in a matter of seconds but actually it's not that simple uh there are a few things you need to do in figma before you copy before you click the copy button right to to make this go smoothly so let's actually go over those things right now when using this plugin to transform your figma design in a webflow site there are two possible workflows right number one is when you're working with an existing design and number two is when you're creating a design from scratch knowing ahead of time that you'll be moving it to webflow and depending on the workflow there are differences in your approach so let's first see the things that you need to do in order to move an existing design from figma to webflow and the number one thing you need to do is make sure that you're using Auto layout if you don't know what Auto layout is well it's probably the best feature in figma uh it's basically a system that allows you to automatically uh stack elements either horizontally or sorry vertically or display them side by side horizontally uh it allows you to add or change the spacing between those items to align them in different ways and also to add horizontal and vertical padding now the reason this is necessary in order for the plugin to work correctly is that webflow is using flexbox right so for anything you do here in terms of layout it's using flexbox and auto layout is actually designed to work just like flexbox does in CSS so using Auto layout is super important if you don't know how to use it just yet just do a search on on the environment YouTube channel we have a dedicated course on using figma's Auto layout but yeah in order to ensure that everything works correctly and everything is displayed exactly like you want it to be displayed you need to use Auto layout the plugin will actually require the frame that you're selecting for copying to have Auto layout applied to it so for example uh this playground file that's provided by webflow is using Auto layout as you can see here in the main frame but if I remove it right you won't be able to to copy that the plugin says select an auto layout frame to copy right so let's let's actually bring that back and if we look at this design of course this was uh prepared specifically for this purpose right for being copied from figma's webflow so it was designed with Auto layout any section like this has Auto layout applied right you can even see it here you can see it here everything in this page can be copied either as a whole or you can even copy it individually so for example if you just want this uh this footer element you can copy it to webflow I can then go to webflow you can paste that in and you now have just the uh the footer elements or if you want to copy the whole thing just like I did previously you can copy the whole thing you can paste it of course you can you need to click the copy button and you can then paste that in now one thing to remember is that the frame that you're selecting and you want to copy must have Auto layout applied but also any nested frames so for example if I select this Frame and I remove auto layout and then I select the main frame again I'm gonna get a warning here saying that all nested frames must use Auto layout right and you can actually click this and it's selected the the hero sections uh the part that we removed Auto layout from now in the design you saw that all of these sections are properly named right we have the nav bar we have the hero section we have a section with a container and then two columns so every single frame in here is named correctly and most importantly it's structured right you can see we have a a very good structure here and this is important because these frame names in figma are transported as class names in webflow so if we take a look at our design here we can see that the navbar is called navbar logo left this is the class name right this is the hero this is the section container and then we have two columns and then column and so on so basically the structure that you see here in figma is being transported over to webflow as class names and we can of course see that if we take a look at the HTML code here we can see like all the divs all the navigation with the classes that I mentioned look we have the hero section the container we have some some numbers added here because I kept you know pasting the same design in the same document and we had some classes left over so webflow just kind of added the number two or the number three depending on how many times we pasted just to avoid some some conflicts and in fact it it gave us a little warning here when we pasted if you paid attention but that's not really important right now the one thing you need to remember keep your figma structure clean because that's going to be used to structure your webflow site so it's really important use names proper names for your frames and then of course use Auto layout now here's something else you need to consider uh images such as this one yeah are exported correctly as images right so here we have the image three uh this right here if we take a look this is also an image right and in webflow it's exported as an image now if I were to group something let's say this is a frame right with auto layout let's say I don't want it to be a frame anymore but instead I want it to be a group so I'm going to say command G and I'm going to ungroup this so now we have group one so if I take this just this hero section right and I add Auto layout to it and I copy it to webflow and let's actually delete this and we're just gonna play around with this section uh you'll see that this bit now is actually considered an image in webflow right so previously it was an image plus uh this piece of text but because I I grouped these up and I used an actual group in figma this is now uh considered uh an image in webflow so pay really close attention to this because uh you might end up with some images instead of uh you know proper text if you're not using frames and you're using groups so as you can see when working with an existing design uh there are a few things that you need to do in order to ensure a successful export on the other hand if you're creating a figma design from scratch knowing ahead of time that you'll be exporting it to webflow using this plugin then there is a certain workflow that will help you get that done a lot faster so let's go ahead and explore that next all right so if you're creating a figma document knowing that you'll later be exporting it to webflow there are a few things you can do to ensure this process goes smoothly and the first thing is to use the pre-built components in the plugin and those components can be accessed from the plugin interface so let me run the plugin really quick let's start here in the structure right so I'm going to create a new page right this is basically just uh creates a new frame 1440 pixels in width but it also adds Auto layout right of course you can do this manually but using this method will uh we'll just make it a bit easier and from here you can choose one of these predefined structures so we have a two column layout three column four column heading and three column and two by two grid or we can grab a section with a container so you can actually put that there and this creates a frame called section inside and it also sets the the vertical padding yeah on the top and bottom and inside it creates another frame called container and in this container if you want you can go ahead and put yet another structure this time we put two columns and these are again frames and they have like a predefined horizontal space which you can of course customize to your liking but uh the point of using these even though you can create them yourself is it saves you a bit of time because you basically click a button and it makes a frame for you it adds Auto layout it sets the right name it sets the right padding spacing everything like that so once you have the structure done you can then go to layouts and you can choose from one of these pre-built components there are a couple of them and you can filter them by using these buttons and once you find one that you like let's uh select this this page let's say we want to add a navigation right so we just click this you add it to your canvas and of course you can then move it up because this is already using Auto layout it's really easy to to move stuff around right and again this is pre-built it offers some a basic structure and you can get a go ahead and customize these to your liking and then maybe I don't know uh you add like a hero so let's click this and let's actually move this here inside the page and let's say we want to add I don't know a contact form right so I'm going to select this uh right column uh click there and it's going to add that contact form and on the left column of course you don't necessarily need to add something from here you can add your own maybe you want to add some some text right so with that selected just create some text hello and you can then go ahead and align this to the left and I'll populate it as you see fit and maybe at the end we want to add a footer so let's copy that and let's add it to our page and now we just quickly mocked up a really fast page so now if we select this we select our webflow site we click copy and we go back to webflow and we paste it in we have everything we need and the best part is that it's responsive right so if I start shrinking this you'll see that because I used the pre-built components specifically in this in the case of the header it's not responsive in certain breakpoints it changes it's it's displaying this menu this drop down menu and the same thing goes for the other components of course this uh this hero section you can see it's responsive as well it switches to a column view on smaller screens and the same goes for the footer and of course you can do this yourself however if you were to recreate this uh the snap bar let's say if you were recreating it in figma it wouldn't have the same functionality as the pre-built component because this is a special kind of component all right it's already set up to be responsive it's already set up to have Auto layout if you were gonna create it yourself uh you will need to manually add the responsive characteristics later in webflow but if you're using the pre-made versions then you don't have to worry about that you just need to do minor touch-ups in webflow after the import now these pre-built components as I said they're not so many of them more will be added in the future as uh as the plugin grows and more and more people start using it remember this is still in in its infancy so as it gets a bit older it's gonna get even better uh so yeah new components will be added for now you're just limited to this to these you have a couple of options for uh or just one option really for the navigation uh for hero you have four different uh variants here uh you have two forms contact the newsletter and some other um you know Common patterns that we find in web design like Galleries and features and testimonials and stuff like that so if you're going to create a new design knowing full well that you'll bring it to webflow later using this plugin do yourself a favor use the pre-made structure because it's gonna save you time and use some of these pre-made components you don't have to use all of them obviously but at least you use the ones that will again make things easier for you like this navigation with the logo because it's already set up to be responsive in the end of course the choice is yours if you want you can just skip these entirely but uh you're only going to have to work just a little bit more later on in webflow and also I would just like to remind you one more time that you do need to pay close attention to the um to the structure here and how everything is named and this is uh another reason that I I do recommend working with these pre-made templates at least for the structure you know because it it adds those uh those classes that you see here like the container column content and so on the section right it saves you a little bit of time and if you remember what we talked about in the previous lesson uh naming these in figma is super important because they will be transported into webflow as class names and basically the structure that you see here will be the structure that you get here in webflow So based on what you've seen so far you might think that the this figment uh to webflow plugin is like all knowing and all powerful because it seems to do magic but that's not actually the case as you'll see in the next lesson now don't get me wrong this is a fantastic plugin but it can't do all the things that we wanted to do yet it's still in its infancy so it's only gonna get better with time however I think it's important to know its limitations and the things that it cannot do and the first thing that it cannot do is it doesn't or it can't copy custom fonts to webflow so in this example right I have just a simple landing page which I'm gonna copy to webflow and this page uses the pop-ins font that's a free font from Google right and I have that font installed in my system so when I go to webflow and I paste that in we can see that we have a couple of issues here particularly with the fonts so this one is actually using Ariel oops as you can see right here and this one as well and this one as well so clearly that's a problem now what you can do to don't have this problem is to go to the project settings and you need to go to fonts and you need to load that font first in workflow and then import from figma so I'm using a Google font but you can also upload a custom font or something from Adobe but since I'm using a Google font I'm just going to search for pop-ins and I'm gonna you know load uh regular 700 and 900 and of course here you need to select all the uh the weights and the variants you need to include so I'm going to add that font and now if I go back to the um to leave the designer here and I'm going to paste my design now the font is loaded correctly as you can see I'm using pop-ins in every single piece of uh of text that I have here awesome so just keep that in mind uh the plugin does not copy custom fonts to workflow now something else the plugin doesn't do is uh translate changes you make in webflow back to figma right it's not a a two-way street it just works one way right from figma to webflow right so for example if I were to take this text for example and change it to browse the collection and save of course nothing would happen back in figma it would still have the same text because as I said this is a one-way street from figma to webflow something else that you cannot do with this plugin is create custom responsive components so in the previous lesson I talked about these pre-built components and how they're responsive by default right well you can't create new ones nor you can uh you know select a component and turn it into something responsive using this plugin it doesn't do that for now if you want responsive components and then you're gonna have to stick with the ones that you have here the pre-built ones and finally this plugin is not like some magic bullet that perfectly uh transforms a figment design into a fully functional website right you still need to do a little bit of Polish after importing to webflow so for example if I'm gonna copy this page yeah even though uh this is built with auto layout right all the items in here are using Auto layout well almost all of them here I'm actually using a group let's actually turn that into an auto layout frame and let's actually take a look at the rest yeah Auto layout Auto layout Auto layout yeah so pretty much in here uh everything in here is using Auto layout so let's copy that again and we'll jump here to webflow we'll paste it in and sure it got all of the content if we do a preview here it got all of the content but there are still a few things that need to be touched up here and there right like for example this is just a piece of text it's not exactly a button right the content is not positioned in the center the spacing here is not exactly right so even if you're gonna spend a lot of time making sure this is perfectly done in figma you do need to uh you know to polish things a little bit after you import them to uh to webflow oh and because I um I talked about this button before here's actually a cool little trick when you're in figma you can select a certain element and by default it's going to be a div right but you can turn it into a link and that's gonna actually turn it into a link in webflow uh also something else that's uh that's pretty cool uh you can select this and you can rename it to button something and that's gonna automatically turn it into a link so now if I uh copy this again and I go back in here and I paste this again uh you'll see that this bit now is now marked as a button so if we go to preview it's now clickable so yeah this plugin makes it like super super easy to get uh Your Design from figma to webflow but don't expect it to be perfect because you'll still need to do a little bit of work after the import is complete but overall I highly highly recommend this plugin all right and that's about it for this video on figma to webflow let us know if you enjoyed it and if you have any questions please leave a comment down below as always don't forget to check out the envato test plus YouTube channel for more content like this but also to learn about web design web development and a whole lot more it's all free so make sure to also hit that subscribe button and give this video a thumbs up if you liked it I'm ADI thank you for watching and until next time take care [Music] thank you [Music]

Channel: Envato Tuts+

Views: 31,365

Keywords: how to use the figma to webflow plugin, figma to webflow, webflow, figma, web design, webflow tutorial, figma to webflow plugin, responsive web design, figma to webflow tutorial, figma webflow, figma to webflow design, web design workflow, website design workflow, figma design to webflow, figma webflow plugin, webflow for beginners, figma to webflow course

Id: BcKOz6kAgg0

Length: 32min 52sec (1972 seconds)

Published: Wed May 10 2023