My Figma to Framer Process

Key Takeaways

what's good I'm Matt jumper and I've built a ton of websites in framer including some pretty large siiz ones and I'm going to share with you what my process looks like going from figma to framer I'm going to break down each of these items but high level there are three things that I do when I get started the first is establish a layout system the second is create Styles and third is start building and in that third one by the way start building section I'm going to get into the figu framer plugin um my thoughts on it and why I don't always use it so let's get started and dive into the first one establishing a layout system okay so I have my figma file here and this is actually for a site called bark which I've built for the frame a master class with fleux Academy which I just finished recording so keep an eye out for that this first section here is about establishing a layout system which is going to create consistency in your layouts which is the key to creating cohesive and just like polished websites because things are consistent so when you're building it out um if you've buil out all these Pages um I've kind of assumed that you would have uh had consistency in mind and have established already maybe what some outside padding is what the Gap is between sections stuff like that um if you haven't I would suggest doing that um but even if you have um what I've gone and and done is actually created a spacing document here and this is just me simply writing out here are the margins for desktop tablet and mobile so I'm actually considering the different responsive breakpoints here's the max width of the content here's the vertical padding and again broken down by desktop tablet and phone and the vertical padding being the spacing um above and below each section um as well as gaps so like the spacing between content right so we have extra small that's 16 up to Small 24 medium 48 large extra large um and this Gap can get um bigger and bigger and I just have these um numbers to choose from so I'm not just randomly choosing oh I'm going to do 100 or I'm going to do um 12 I have these numbers to choose from so that's going to create consistency and you can bring this into frameware if you want to but if you have your figma file there's not really any need to import it into frameware unless you're working with um a team or the if you're delivering a project to a client maybe the client would like to see that if they're making updates themselves depending on what that looks like um that's totally up to you and what that relationship is um so once you have all of this stuff documented for like the spacing you also want to consider other stuff like um a corner radius right because this is also another M that keeps them consistent and you can have multiple you can have four pixels the extra small then you get up to 8 pixels and then 16 but on your site you're never going to see anything outside of these numbers this just helps you again remain consistent and doing this upfront is a lot easier than trying to retrofit things at the end um so I just recommend documenting in the beginning and a great way to make sure that you are remaining consistent and actually kind of abiding by these numbers is to use guides so in figma we have these you can turn them on by contrl G and this is just a quick way to make sure that you know your outside outside padding is consistent and you're following it um the spacing just a quick gut check to be like okay the the Gap here is actually following the um the gaps that we have in the columns but so we have different values here so you don't need to uh abide by the guides 100% it's just a guide right um so you could break this it's not a big deal it's just a tool to help you see if you're um breaking anywhere that you shouldn't be so we can do this in framer um by opening the desktop here and we can add guides by going to the framer logo and going file sorry view show guides same thing Control G and you can just set this up in the same way so you can do a 12 column layout and I always um do the alignment to stretch that way the width of the columns is always um going to change based off your screen size U but it's the Gap and the margin that is going to be consistent so the Gap is the space between the columns so we can make that 24 and the margin would be um we documented which was 64 I believe yep and then um after this the next thing you want to do is you can set up your actual break points so we have our desktop at 1200 um I usually just follow the same uh the default framer breakpoints so I can just hit breakpoint and open up tablet that's at um 810 and phone at 390 um you don't have to do this you could set up your own um but it's good to do this up front so then you can um as you make new pages you're inheriting that same breakpoint and not having to again retrofit all the stuff after you'll notice that the guides here um are getting really skinny on the phone um that's because we didn't change it per breakpoint so just like I said with the um margins we have 64 desktop so tablet we can change it now to 32 so we you can click on the guides here and the margin would be 32 and even the the count here we could drop this down to say six and then for the phone we said it was a 24 outside margin and we can drop this down to six or even three columns and the Gap we can leave at 24 that's fine um but now this is just a quick way for us to just make sure all the content is at least um sitting where it needs to be all right number two is create Styles so creating color text and Link Styles up front will make it easier to stay organized and also help speed up the build process a lot the first thing we can look at is color so I have in figma documented all of the color styles that I'm using and set up these Styles in figma as well um I can kind of walk you through um the first step which is like figuring out a naming convention and like a grouping convention so I have um kind of two approaches here one is for white and black um I've just grouped these and these are basically by percentage because I have white um at 100% 48 24 and 12 and black at 140 and 8 the reason why I'm using percentages here is because the background colors in this project sometimes change and instead of having different like 100 different Shades of Gray that are like to each of these colors like green purple pink orange um we can just use white and black at different opacities that way it takes in the color from behind it so because of the opacities I just like to name it at the um the number of the opacity with the percentage beside it um CU I can visually just understand what that is going to look like with the other colors so we have like charcoal blue beige green purple pink orange all of these are following a bit of a different uh naming convention and this is following the Tailwind CSS colors um the idea there is basically just that the um number here on a scale from 100 to 900 is just a scale of how light or dark the color is so again just seeing that number seeing green 500 I can get an idea of how dark that is um and also it's the equivalent to purple 500 pink 500 orange 500 Etc um this just an easy way to um understand what the color is going to look like without actually visually seeing it so you can take these colors here um and if you haven't set this up in figma that's totally fine um just take all the colors that you have in your file and you can just go into framer and go to assets go to Styles and hit plus and we can do a color style and you know you can name it if this is uh Pink 500 give it that name copy the um hex code here whoops into the hex code um and then you can also at this point if you have dark and light mode you can put it here um and change that hex code based off dark and light mode you can hit create and you just do this for every color that you have that way when you are using any color it's all going to be consistent and this is all out of the way the next thing would be creating textiles so this is a lot here I know um I've gotone out of my way to actually do this in figma just to say um stay super organized and make it easier for when I'm importing into framer I wouldn't expect uh many people to actually go through all this trouble um but a similar thing you could just do it where you're just extracting all the textiles or the text elements from figma and every time you see a new one you just make an um a style in framer so I'll walk you through just how I have this set up in this document um I just have it broken down by name the font size the um font weight the line height the letter spacing and the font and then also broken down by H1 H2 H3 and P so in framer you would just do the same thing and do a new style and a Tex stle and let's say it's the H1 um I can click on this and we can set this up so set it to 120 um Regular 100% line um so here the size here is 120 100% And the letter was minus 4 which is already set up here um and then why I like to do the colors first is because you can actually set default colors for the text Styles so now I can set this to say pink 500 um and then we can you know adjust whatever other properties we need to and at this point too it's also good to um establish if you are going to use responsive type and actually have this um text St reduce or increase in font size as you get to the different break points you can do this where now um the type on the uh the type is large and we can set the minwidth and this is basically just tying itself to the break points that we set up we can change it now so 120 it automatically jumped down to 96 and 77 so we can change this value to you know 32 um whatever you want so it's good to do this up front and then you can always make adjustments on the Fly um but the more document the better and the font I actually have a custom font for this site so it's good to get that out of the way up front as well we can upload the font here under custom and select it and we just have to do this once now when we make new text Styles um we have this option to choose from the last thing is link Styles as well so if you have um text links anywhere you want to create this new style and again after you've set your colors up you can do you know say it's pink 500 and you can basically just set the text decoration the transition um change the hover State whatever you want to do um just another thing to get out of the way up front all right and lastly time to start building so figma a framer the plug-in um this is a kind of topic and question that we get a lot you know is it worth it um should I use it what do you know the experts use um what what should I look out for in my opinion um it's really only worth it if you are setting up your fig files using Auto layout and like structuring them in the same way way that you plan on building them in framer but even then sometimes some elements don't actually import perfectly and don't carry those properties let me show you um this card in figma this is actually built the exact same way that I would build it in framer so I have a card here which is I mean I'll call it a stack for framer sake um and the width is set to fill and the height is set to fixed f400 there's an icon in here and this is a frame with a background applied to it a corner radius and then an icon inside which is a vector icon and then underneath this we have text which is in its own stack and this text is set to fill and the text inside is also set to fill and the height set to hug which is fit in framer so this ideally would carry over and like carry all those properties with it so let's see what happens um I can open up the figma to htl framer plugin and you'll see it says copy five layers paste in framer so we can do this um let's go to the desktop frame here and I'm going to make this a layout just so we can see the responsiveness of it um and I'm going to hit paste so command B and right away um a couple things stand out to me one is the card itself actually worked it's set to fill and the height is set to 400 that that's fine but this text here was supposed to fill the card as well um I'm clicking on it and the width is set to 2 fixed which in figma is 230 but it's set to fill but it's just that's like the the size I landed at so unfortunately I have to take these two text layers and set them to fill and everything else I think looks okay I mean text here is 100% relative um which I'll probably end up switching to fill in this scenario it's the same thing but in another scenarios it might not be um and then the icon actually got imported as one graphic um so it's like the circle and the icon are one I can double click this and it's now like a a framer graphic and I can keep clicking into it and I can get it but this isn't really what I wanted um because I was using uh an icon Library I'm probably just going to um rebuild this inside a framer so I'll probably delete this icon here and use this stuff um with this text I would then have to apply a style to it even if a style was applied in INF figma those don't carry over um so i' have to apply the style and then you'll see like this font here is missing um so I'd have to apply that style as well and same thing with the color um the style the color will come um kind of packed with it but if that color was unique then we'd have to set that again um so you can see it's not perfect but it's like it works um the other thing to consider small kind of nuance thing is like if I change this headline um I call it new headline the text uh the layer name here didn't change it's still the old understand your dog because the the name actually gets imported as the the text um it doesn't just come as like the default uh text layer so if I delete it and for text that doesn't change I have to delete it once and then delete it again and now it's Dynamic so if I call this new copy it actually updates here that's a super small thing not a big deal um but for somebody that likes their layers clean and named properly um that could be a bit confusing if you're like have a bunch of layers and then you see text here and you're like oh that's not the copy I'm trying to get to but it is it's just named wrong um CU it you're not manually naming it right so it's like very deceiving so that's my two cents on the figed frameware plugin and I can just delete this get a blank slate again um once I start building I might use the figment frame plugin probably not um but I would just start from the top bottom and go Section by section um but the thing is I'm not going to like try to perfect each section as I do it um as a designer I often want to go wide and not like super deep because um there's a lot of like details and nuances and like subtle things like animations and like there little consistencies that you want to clean up at the end um so it's easier to kind of leave those things till the last like either like in the beginning or at the end and then like do a final sweep because you're going to do a sweep anyways to like go through all the elements um so I like not to get CAU up in the details while I'm building the site like from top to bottom and then go back at the end and like fine-tune it um that's just my personal approach there's no right or wrong way to do it I'm just sharing my process um and the other thing to consider when building out um your site something to help with consistency as well as speed is creating reusable components anytime you make something that is or can be reused so you know a button um even something as simp simple as like a divider like a dividing line I'll make that a component that way if I decide hey dividing lines um should be two pixels and black at 8% and then I'm like you know what it's going to be one pixel at 6% that I can just change that globally and not have to go back and tediously update all those dividers all right so that's my figma to frameware process and I hope you found this insightful and can leverage some of this um into your own process if you want to see some more framer content drop a comment below and let me know what and of course keep an eye out for that flux frame or Master Class drop soon