How to : Convert Figma Designs Into Framer Websites

hey guys my name is subramanjan Bhaskar and today in this video I'm going to be showing you how to convert your figma designs into framer in just a few steps so I've got this empty frame right here inside in framer and I've got this little design for figma that I'm gonna convert to framer designs as you can see each and every element is independent and it's not enclosed in any groups or any frames so we're gonna convert this entire design into a framework website that you can see live so the idea behind converting figma designs into framer is that we are going to reduce the number of layers inside our fig mock panel as you can see I've got number of layers each of them is independent to one another so what we are going to do is group them together by using figma's Auto layout so I'm gonna select two layers right here as you can see and I'm gonna press shift a to convert this into an auto layout as you can see I have converted both the independent layers into a single layer by using figma's Auto layout so that's what I'm gonna do for all the layers inside our figma panel as you can see I've converted all these three layers into a single layer now I'm gonna select this image right here and then I'm going to group it together with the first frame right here using figma's Auto layout like this now I have the option to group all the upcoming layers into the single frame again and again so that I am left with a single frame at the end but I don't like to do that it is better that you group different sections of your design in a different frame so I'm gonna select these two text layers right here press shift a on your keyboard to add Auto layout and then I'm going to add the two layers above the frame that we have just created inside the frame so that we can have a single Auto layout for all these three elements right here so select all these three layers press shift a on your keyboard and there you go you have an auto layout again so by now we have two Auto layouts completed one is the hero section and one is the heading section in the middle of our design now what we are going to do is create auto layouts for these cards right here one way is to group them all together and add an auto layout but I don't like to do that the best way to do these conversions is to start from the least post number of layers so I'm gonna select these two layers with the image and the title and then I'm gonna add individual Auto layouts to each of the frame right here so as you can see I've got these four Auto Nails right now and now you can also group them together again and press Shifty on your keyboard to create a single Auto layout but no I'm going to group only two of these together right here just so that we can have more Liberty while editing these frames inside framer right here so right now we have reduced the number of layers inside our figma panel by converting them to Auto layout as you can see I'm left with four Auto load frames right here and we are going to convert these frames into a fig MAF design and to do that we are going to need a figma plugin so head over to figma community go to the search option and type figma to framer and that should leave you to the plugin section right here and then you need to install the first option which is figma to HTML with framer you can install this plugin by clicking on the try it out button now go back to your design file and what you have to do is select any auto layout frame right click go to plugins and then select figma to HTML with framer once you do that your design is ready to be pasted within a frame or canvas so go back to framer head over to a design file make sure that the dimensions of both your figma and framework frame are identical so as you can see I've got this 1440 pixels right here in figma so I'm gonna do that to the framer frame as well right here I'm also going to change the background color to Black right here just to match the design in figma that I've created let's increase the height of the frame and then what you have to do is press command V on the keyboard to paste the design that we had just copied using the figma to frame our plugin as you can see I've got this whole layout and structure as we had in the figma file so you can move these around and you can reposition it as you want I'm gonna place them right here that's good and now in a very similar manner I'm gonna copy all these sections again with using the frigma to framework plugin and I'm gonna paste them inside framer like this now you can see that I've got the final figment Design Within my framer canvas right here you can edit these individual elements right here as you do in figma so that's not an issue you don't have to go back and forth within your figma and framer designs once you paste these designs right here once you do that let's go click on the publish button and let's see the site live and there it is we have our design live and published onto the internet within just a few seconds don't worry if your fonts are different than the ones usually used in your figma designs you can simply install them onto framer and then you can publish the website again and then you have all these fonts inside your live website so that was it for this video guys I hope you liked it please like comment and share it with your friends have fun bye

Channel: Shubhransh Bhaskar

Views: 17,758

Keywords: how to convert figma design into framer, convert figma website design into framer website, publish figma design into a website framer, figma to framer tutorial, figma to framer plugin tutorial, how to convert figma design to framer, publish figma design website using framer, live published figma design, how to make website from figma design, easily convert figma into framer, figma to framer website, website design into framer website, ui ux figma to framer

Id: 82ROwArivTs

Length: 5min 19sec (319 seconds)

Published: Mon Sep 04 2023