The Plugin You’ve Been Dreaming About: Figma To Webflow

let's jump right into it and I'll show you how the magic works so I have a page designed here in figma and I have the figma to webflow plugin open here I'm just going to select the frame and I'm going to hit copy the webflow and once it's copied I'm going to jump right into webflow and hit command V and Bam everything right here is copied images Styles everything is right here I'm actually just going to do one thing which is going to this wrapper and remove the max width just because we were working on a 1440 frame in figma so it's things that's kind of like the maximum width but I just want this to be like all the way through and it's actually let me close this paste thing it's centered it's even responsive check this out even the menu here works it's not styled because we didn't style it but everything just works buttons are buttons isn't this amazing mind-blowing all right so let's dive into how this plugin Works how this magic happens what you can or cannot do without it and how to actually use it um so the the core of this plugin is to understand that basically Auto layout in figma and flex in webflow are actually the same thing there are the same properties and basically how telling the the browser how to organize element the browser or figma how to organize elements within a frame or within a container right so the the number one thing you need to do in figma if you want this to work is to set is to make your designs and use Auto layout and wrap everything just like you would in webflow so let's see how this page is structured so we have here first of all the whole frame is auto layout just to stack them you know um horizontally or sorry vertically one on top of the other and then we have the this navbar which is an auto layout the hero which is basically the section and within it we have the container right so the container has a 1200 pixels width and it is fixed that's how we create the container that's basically the max width within webflow and then we have a column two columns here and each of them is also Auto layout so this is crucial to make sure that this plugin works just originally when I designed this it was just basically a bunch of groups and you can see my unorganized design here which is basically a bunch of layouts and just like things grouped together without logic this will not work when I'm trying to copy it you can even see I have to select an auto layout frame to make this work just because otherwise webflow wouldn't know how to organize the the the elements coherently will just be like uh you know fixed or absolute positioning which is really the worst thing ever and why most other kind of like plugins to move things from figma to the web doesn't work because it doesn't understand the logic so here the logic using Auto layout just transfers and everything that's transferring the text the styles are transferring the images are transferring it understands when you organize when you um call some something a button it turns it into a link so it's going to be a button and it's going to work that way if you have icons it's automatically going to export them as svgs so everything just happens out of the box so let's talk about how responsiveness happen and how the how a new to basically turn this navigation into you know a mobile navigation with a link and that's because here in the plugin you can see that besides hitting the the copy button we actually have a bunch of ready-made components kind of like wireframing components here and they include the logic and the logic basically means how do they behave in different breakpoints because right now we cannot just design for different breakpoints using this plugin so we can just design for desktop and if we use these components then you know the logic is going to transfer so basically there are two possible workflows to work with using this plugin number one you can take your original design and just start organizing it and turning these groups into Auto layouts that's one thing that you can do and it will work however it will not transport the logic of responsiveness right so another ideal probably workflow would be and one more thing by the way that I forgot to mention and it is crucial it cannot transport the or just copy the fonts inside right because it doesn't really know what fonts you're using in this case specifically we're using Google fonts but you might be using custom fonts so the plugin cannot copy the fonts into webflow so before you do the copy you have to go into the project setting which I did before I did the demo when is the project setting load the fonts and only then copy and paste and then it will match the font into the right font one more thing that I didn't say is that you know it's going to actually transport the name of the classes as well which is really really useful you can see here we already have hero features like everything is named correctly and makes it really easy to later use and reuse within webflow so I was talking about the the ideal workflow number one thing you want to start your project you want to load the fonts inside of webflow and then here if you have your design which might not be really organized what I would probably do is I would go ahead and create a new frame like a new desktop frame and then I would of course turn that into an auto layout because it needs to be an auto layout and then I would just start bringing in the relevant uh kind of template blocks or layout blocks that already have the functionality that I need like maybe a nav and maybe a hero and just add them into this Auto layout I'll start restructuring kind of like the the the website and then basically I'll just copy and paste the okay so this is not what I wanted because it's doing the auto layout horizontally and start vertically but now this looks better so basically I would start pasting my design into these components if I want them to have the special responsiveness and other functionality that webflow included for us right here I think this is really really an exciting plugin that's going to make you know again instead of trans taking an hour to build this now turning this into webflow in just a few seconds but actually it's probably going to be minutes if we're going to take time to organize the the artboard and the the frames correctly in Auto layout it's going to take minutes instead of hours and it's going to make our work so much faster I'm really excited about this of course right now this is really great for pretty standard components or layouts like the ones that we have here if you have a more customized design that might not work in auto layout might need some other things or either kind of like sliders or things that are a little bit out of the box of course you know the the the logic of the plugin wouldn't know how you want to transport it um but I think for like 80 or 90 percent of common layout blocks this is going to be so useful and it's going to even just the copying of the Styles right so imagine just even transparent transporting your style guide using this and you already have your H1 h2h3 you already have your colors you already have you know your typography set in your images you don't have to go ahead and upload them so I think it's going to be a huge huge Time Saver and I'm really really excited about this I encourage you to go ahead and give this plugin a try if you want to learn more about exactly how to use this because I didn't touch on points like you know when when we are using Auto layout and we have to understand that it's it's being migrated into a flexbox you have to think about things like um you know when we have here we have this property here in the frame fill or hog which is basically correlated to the the flex box here of the sizing so you want to make sure that it's set to fill and you have to pay attention to all of these kind of like flexbox details so if you want to learn more about them here in the plugin you have here help with a little bit of documentation to learn exactly how to use this so that it copies into webflow and looking exactly like you want this to copy and and look let me know in the comments if you're excited about this plugin as I am and what you're going to do with it I'll see you in the next video peace out foreign [Music]

Channel: Flux Academy

Views: 92,650

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: xHXqj006Q2k

Length: 9min 2sec (542 seconds)

Published: Wed Feb 01 2023