Converting Figma Design to Framer Template (Part 1)

hey guys so in this video I'm actually going to start working on the template that I talked about at the start of this playlist and this is a design that one of my designer has done and in this video I'm going to go ahead and at least convert the first page and the challenges Associated going from figma to framer so my own develop my own designer can probably understand it and you guys can also understand it as well one thing that I just noticed got messed up is these circles I'm just going to go ahead and like group them and I'm gonna position them in a way where they are overlapping with the content that I want them to be overlapping with and I'm gonna say circles and I'm gonna yeah that's I think fine here I think need something like that needs to happen as well so I'm just gonna actually go to the container and paste the circles because that's where I want the circles to be and I'm just going to go ahead and delete the older circles so there you go okay I think that's done and now what we need to do is we need to go ahead and convert this design into framer so the first thing that you need to go is you need to go into framer you need to create a file now this is almost an empty file and I think I have some assets designed here so I'm just going to go ahead and actually I'm just going to close this file I'm going to create a new file so you guys don't have to have a look at that and we do things from scratch so I'm going to say this is going to be our cost template new and the first thing that you need to be sure of is the size of the artboard needs to be similar just so you can play around with things so this is 1440 so I'm just going to go ahead and actually make this 1440 as well so I don't mess something up and I'm gonna then go ahead to my plugins and I'm going to run the figma to HTML with framework plugin once I do that I think that's the only thing that I need to do here to actually convert that so it's taking some time to obviously copy the layers let's wait a bit and there you go and we're gonna go to our layers panel here and we're gonna paste it that's it as simple as that but this is just the start of the party I mean we have a lot of things that probably got messed up which is something that I'm going to be talking about so the first thing is we're just going to go ahead to here we're going to convert this desktop layout into a stack as well and we're going to make this fit content so we can see everything now as you can see this got messed up so before I even get started with all of the issues let's go through the issues one by one so you have now understood how to just go ahead and copy a design from figma to framer using the plugin itself there are a bunch of limitations now however because in my opinion framer is absolutely limited a lot of people talking about how webflow is like again the past framers like insane and all of that stuff I mean to me I feel like a lot of people who are talking about that don't really know what they're talking about because webflow is super Advanced you can do a lot of fancy things with webflow you can do the same things probably with uh framer as well but it actually requires a lot of in-depth knowledge about coding and react and all of that stuff which may seem counterintuitive you're going to be like hey webflow is requires a lot of like for us to know in terms of coding knowledge and all of that stuff but unfortunately if you want to achieve Advanced functionality then I feel like webflow offers a lot of flexibility there which which is something that framer does not so the first limitation framer does not copy your Styles automatically so and I'm not doing this as a comparison with webflow so don't come to me and talk about like some of the limitations with webflow or something just talking about framer so I basically went ahead and copied this design from figma to frame and now imagine if I had 50 pages I have a lot of styles created in my own design as you can see there are a bunch of variables created I would now have to manually go ahead and create them to assets and to Styles myself I could have just exported this page as well and in to like let's say color palettes and then like use the IE dropper key to do that as well but even then it's a lot of manual work but creating the Styles isn't the only manual work the manual work the most important manual work is imagine if you had 20 pages are you now go ahead and are you now going to go ahead and Link all of those Styles manually that you've already done in figma I mean pick up the slack framer like are you guys like kidding me so far behind in my opinion okay the other issue is you have a light and a dark mode but you don't have any way natively in the application itself you can probably do it with code or something along those lines but I'm not going to do that I'm not not going to talk about complex things this is just a video talking about how to convert a simple design into framers framers a framer template so this light and dark mode toggle that my designer added is not going to work because there's no event natively exposed that's going to allow me to change the light and dark mode if you want to change the like light and dark mode you have to go to your system settings and then you need to update it which is insane in my opinion I mean the other thing is drop Shadows don't work all that nice sometimes when you're using them in groups and all of that stuff so obviously I need to fix that here so the first thing that I'm going to do is I'm just going to go to my I have like some iPhones here I'm just going to go ahead and like remove this Shadow I'm gonna go and run the plugin again and once I've run the plugin I'm just going to paste to this particular thing here so here you go we have the mobile I'm going to delete this I'm going to copy this I'm gonna make that absolute and move that somewhere here and probably somewhere here and maybe just a bit down okay and I think this needs to be a bit far from the edges as well so obviously I can do that by just changing the left padding so I'm going to change that to maybe I think 80 should be sufficient yeah I think that's fine okay now that we're done with that let's talk about any of the other challenges so the first challenge obviously is we need to go to a tiring process of converting the Styles into converting our figma Styles into variables here which pretty which sucks pretty much it sucks a lot so let's go ahead and do that so we have a background which basically has a color like this so we're going to name this a background and we're going to say this is going to be this color the this one is just the dark mode is going to be something like this create another color style this is going to be our section BG section BG and this one is Hash FFF create and the dark mode here was something like this okay actually what we can do is we can just create the light mode first for everything sorry not the code style the color Style then we have a border let's go ahead and give this a border and give this this color then create another color style here white and then black okay so the white is quite simply hash FFF and then we have a black color black and the black is something like this sorry it's not this it's like 1B 1b1b okay so that's done let's go to our primary color the primary should be simple as well create the color style and we're going to say this is going to be our primary 100 this is going to be this create then we have another color style that's going to be primary 20 that's going to be 20 basically that's it and we can just duplicate this and we can say this is going to be just 10 off that and rename this to 10 percent okay so we're done with that now as you can see anytime you basically change the light color the dark color automatically gets updated if you haven't set it manually so now we're gonna go to the we're gonna just convert everything to dark mode and we're gonna go to our colors here so I think that's fine that's fine so here that's good this is going to be hash CCC this one is going to be one three one three let's just go ahead actually why is this this is Hash CCC and this one should be DD or something I don't know okay so that's done let's go to this one this one needs to be one three one three one three okay this one needs to be FFF okay hashtag FFF okay I think that's done those are pretty much all of the colors that we basically have now what other thing do we need to do to make sure everything's working fine well the first thing that we need to do obviously is the fact that we don't want to go ahead and actually actually let me just go to the circles and make them centered so we have all of this circle centered this is also not centered this is also not centered and I think okay so now I think it should be centered this one should just be overlapping this line this thing should be overlapping this line and it's fine if it gets a bit deviation from the figma file like I mean we are going to be presenting this file to people so it doesn't really matter if we are cautious about everything really specifically and this one this is already centered okay and maybe I think this Frame which is let's say I don't know graph or something along those lines and I'm also going to lock it like if there are things that I don't really need that much I don't need to mess around with some of the Inner Elements there I can just lock it like for example when I'm dragging things like the circles are being dragged I don't want to mess with the circles right now so I'm going to lock them and now we're gonna go to and since I've actually locked everything I actually wanted to move this thing so I'm gonna basically collapse everything on the sidebar and we have the container we have the hero section we have the graph lock10 I don't want the graph in itself as a complete whole lockdown I'm just going to lock all of the content that's inside of it so I'm gonna press space while dragging so it doesn't get messed up so maybe I want it actually I think wherever it was it's fine okay so now that we're done with that we need to reduce the work that we have to do to convert this whole design into a land into a template and figma in framework and we need to do that uh because obviously framework sucks right now in in a certain sense it does not have really crucial features that you need similar to The Styling so we're going to start converting things into components now obviously components are hugely Limited in framework as well so as you can see I'm not I really like framer my own course website is done on framework but framer has a lot of limitations I mean really basic stupid limitations in my opinion which are really would sometimes piss me off so the first limitation is actually I don't even need this home because everyone knows that if you click on the logo at the top you you can directly go to home so that's something from my designer as well but I'm just going to keep that because I want to go ahead and actually look at or use this style now one huge limitation that framer has is it has something called like I'm just gonna let's say I'm gonna link this to home so it has something called links and I can link this particular thing to home and I can say that this is gonna use a a link style which is going to be something like this a link style basically has three states like the default State the hover State and the current state the current state defines whether something whether this particular page is actually active so if this page is going to be active this particular link is going to be red so if we go to our Pages again we're going to go to the pages here and I'm going to press command P to preview it now as you can see this is red because it recognizes that this home is active which is good this is good functionality but it's useless when we talk about other types of links so let's go to our header again now if I wanted to make this a link I'm going to make this a link I'm gonna say this is going to be linked to the home now as you can see I don't see the Styles I don't freaking see the style so I cannot change uh dynamically whether something is going to take a particular style like for example the current style uh when it's going to be let's say on the page itself so I could not do that with let's say frames or like Stacks or something along those lines which which is again a huge limitation so what am I going to do I'm gonna go the long way around and I'm gonna go convert this into a component and we can change that later if we decide this is a lot of work so I'm going to convert this into a lab link this is going to be the active State and then we're going to create another variant this is going to be the default state in the default State we obviously don't want this to be bold so we're gonna go ahead and we're gonna say this is going to be medium this text is also going to be 0.5 in opacity so we're going to say 0.5 the color here is going to be black something like this and the background for this whole thing definitely needs doesn't need to be there so it's going to be something like this so I'm just going to copy this now and I'm going to paste it so I'm gonna go this is this is on let's say navigation or links container something for my designer who's probably going to check this video out as well is to make sure that you're actually naming things properly so I'm just gonna go to my uh header and I'm gonna go to this container itself and I'm going to say command K and I'm going to say nav link now as you can see I can insert links directly like that there's already a link inserted so I can say this is okay home this is the active State then we have another one which is going to be the default Actually I don't even need home so I can just get rid of the home now so I have about contact pricing blog and then yeah I think that's it about home pricing about contact pricing blog delete everything so this is going to be about contact this one is going to be pricing and this one is going to be blog and if I want to make something active I can just go ahead and make it active from here now another huge limitation of obviously framer your most favorite tool is now if I wanted to make this about active how do I go ahead and do that I cannot let's say in like figma double click it and basically convert it into active that's not something that I can do what I can do however is I can create and expose a variable property I can say I'm going to create a variable and I'm going to say this is going to be about and the default state is going to be the default state right so I can do that and I can create other values as well so now if I go here to the header itself I can I can define whether this about is going to be active or not and I can control it from here but imagine I would have to do that for all of the links that are in the header and I mean I feel like that's a lot of work I shouldn't have to duplicate this functionality but since framer is really limited right now I have to to a certain extent so I'm going to do the same thing unfortunately unfortunately for the contact as well so I'm gonna say I want to set another like now if someone else knows a better way to do this definitely let me know so this is going to be contact this one can be pricing this one can be blog okay so now that we're done with that thankfully we can just go ahead and and this should also be pretty much theme compatible as well so as you can see those links are theme compatible but this isn't obviously so we need to convert that into theme compatible so we are going to go ahead and we're going to convert that into a background actually not background we're going to convert that into white and then we're going to convert this text that we have here into black so that's working fine this text however I cannot see it like did I not convert each particular this particular text into actually should it it shouldn't be white it should be black sorry so now it's fixed and now if I convert this light and dark this is working perfectly fine I can also go ahead and I can create a button component as well let me just go ahead and do that because we may use that later on as well and in the button component the only thing that I'll just do for now is and we can change that later is just change that primary or link that background color to primary now my own designer since he thought that framer was really awesome we went ahead and actually added a light and dark mode toggle but unfortunately figma does not offer you to natively or like just in the settings on the right or something on those lines offer you to toggle night and light and dark mode if you want to toggle light and dark mode you would obviously if you're actually just viewing this page you would have to change your system settings in order to do that which is a sad thing honestly it's it's very sad I can actually think about like baking that particular functionality and maybe somehow using code overrides and maybe that's something we can do at the end we can think about it but I don't want to waste my time actually doing that right now so I'm not going to do that okay so that's going to be part one of this video in the next video we're just going to go ahead and actually create our typography Styles we're going to link the whole page as well using obviously the variables that we've created we're going to see if anything else got messed up and and then after that video in the next video after that we're probably going to go ahead and add the animations so definitely stay tuned for this whole series you're going to encounter a bunch of challenges this is not I'm not going to actually bake or cherry pick anything for you I'm just going to tell you all of the challenges that you usually face when you're converting things like these and the different limitations of framer and how you need to actually work around them so that's pretty much it definitely let me know if you found this video helpful and I'll see you in the next one take care bye

Channel: AM Design

Views: 9,290

Keywords: design to code, figma animations, figma to app, figma to code, figma to framer, figma to framer plugin, figma to html, figma to html css, figma to web, figma to webflow, figma to website, figma tutorial, figma update, framer animations, framer sites, framer tutorial, framer website, portfolio tutorial, portfolio website, quick portfolio website, quickest way to build a website, ui design, ui design tutorial, ux design portfolio, website design no code

Id: EuWs4D6m154

Length: 17min 5sec (1025 seconds)

Published: Mon Aug 07 2023