Mastering Framer Components | Variants & Variables

framer is an amazing tool to build and launch websites and one of the things that makes it so amazing in my opinion is that it gives you the ability to create components and components can be highly effective and pretty simple to use but there's a lot of advanced features inside a framer components that you probably don't know about and so in today's video I'm going to show you all the basics and advanced topics of components some tips and tricks that I use to maintain and manage my components and by the end of this video you'll be a framer component master all right let's start this off by building the most complex the most interesting the most amazing component you've ever heard of the good old button component I know that was a little misleading but it's probably the best place to start we have a button that we are designing here it's not a component yet it has some text inside it has an icon on the left hand side we've styled it a little bit by selecting our stack that we've placed it in this stack is running from left to right you can see that happening there and we can also see that uh if we go over to our control panel and you can see that the direction of our stack is there we could change it the other way around top to bottom left to right whatever it is but I like creating buttons out of stacks because that would allow us to extend the button as the size of the button or the text and elements inside expand so goes the button and you can see that means that our width is set to Auto it's going to fit that's exactly what we want now from here this is where we start a little bit of that component workflow if you can already think ahead and know that your component might have lots of extra elements or components inside of it then you're going to want to try to put all of that into your original component in our case we have a button and we have an icon on the left- hand side but maybe I want another icon maybe later on I can see myself having a button with just the text label maybe the text and icon left text icon right maybe just a single icon so all of these things are kind of variations or variants that are in my mind I'm going to throw it all in and the kitchen sink right now before I go ahead and create my component once I have it I've named that stack I've named it button and I can actually hit command K to bring up my Runner inside of framer and I can start typing the word create and you're going to get a bunch of options here in our case we want to hit create component and there is that great hotkey right there we could use instead once we do that it brings up our little naming dialogue we want to name that button and we're going to hit that and it's going to bring us directly to the component editing environment this is our Master component you can see up here we were working on the homepage and now our little breadcrumb tells us we're specifically working on the button component everything we do here is going to be reflected on any instance of that component in the rest of our site so if I go back to my site and you can see now this is an instance of that component and I can have multiple of them I can head up to my assets panel and grab a button out from there if I want so now I have multiple instances but if I doubleclick on that button and we want to change this from Blue to maybe a purple color we could do that here it's going to change on every instance and that's really the main draw or feature to components is having some sort of Master element that way we can edit it one time and it reflects on all of our pages of our website in every area that that thing is used that is how simple it is to make a component now let's talk about some further or more advanced topics like States and variants all right we're back inside of our component editor and we have our primary component built you can see it says primary on it and that is very important to remember we've also renamed this component just to be our default button and it is kind of a squared kind of flat looking button well what if we want maybe a pill form or a rounded version of this button do I have to go through that whole process and create an entire other component just to have a rounded button no absolutely not we can come into our component we've created instead of creating a separate component we create a variant of this component when I select my primary component you can see I have an option to create a variant here and a state like a hover or press State let's do our variant first we just click on that it's basically going to duplicate it over and why don't we name this one for instance pill and let's just do one more and you can see that now we have a third one here and we'll call this one uh rounded okay and why don't we come in and just make a couple stylistic changes like for instance we'll grab our pill button and we will just grab down here we'll hit our radius and why don't we just go uh 360 that's going to give us a pill version and why don't we just do something like all the way down radius we'll do something like 16 that'll make a slightly rounded button maybe something a little less like eight great now we have these three very ations of the same component when we come out to our project I can actually now grab this top button and scroll down on the right hand side and we actually now have this component interface that we've created we've started to build a little bit of a control panel we can add lots of options inside of it and that option that we have right now is to change the variant from default to maybe pill and on this one we could change it to rounded now we have one component with multiple different variations we don't have to have a rounded button pill button it's all happening on that one component through the magic of variant but right now if we go ahead and prototype our our website that we're building we get no interactivity so we might want to actually start jumping in to the idea of adding states to our button so I'm going to jump back into my component editor and each one of these variants now has the option or the opportunity to create a hover or oppressed State just a different state of the same variant so I'm going to click on it I'm going to say hover and I'm going to take that uh hover that I have there I'm just going to change the color to Black and why don't we do that really quickly for the rest of these as well I'm going to make hover there I'm going to grab both of these and we'll turn them to Black at the same time but you'll notice when I click on a variant I actually get a little line that's running in between that variant and its different state it's hover State and that's because framer has done the hard work of immediately prototyping or creating cting an interaction between those two states and so this is just a pre-baked way of creating a different hover state for you and you can see that style has been built in with the transition right here click on it and we actually can edit and change the transition so if we want to be a little quicker a little snappier we can move from an ease to a spring we can change the timing the stiffness the dampening all this stuff or we could just make it in this case instant now remember every change that we make to the primary will be changed across all the different variations as well so if we move this to a spring you'll notice that I have that same spring animation happening on all of them but if for some reason I want my pill to be a little bit different I can click on it and change that to an instant and that is going to be a one-off change from that Master primary component to one of its different instances so we can come back now and actually click on our project command P to preview you can see we get an instant transition for our pill but the rest of these will have a nice little animation or transition time transition that's happening there and with that we have introduced the idea of variance and States now we're going to take it a step further by adding different variables onto those specific elements inside of our component now we have this one component with multiple different variants and if I click on one of these instances I can swap in between those but this is still pretty limiting I want to be able to change the label dictate whether or not it has an icon on the left or the right or not at all whether or not it has a label at all maybe even change some of the colors of the text or of the background of the button and I want to do all of that without having to create different components or different variants so instead of doing all of that why don't we double click and go back into our component editor and why do we now introduce some variables to go onto that primary variant or component and we can turn these and kind of tune this control panel to our liking and so what we're going to do the first thing is I really want to be able to update the text so I'm going to actually grab the text label that's there I'm going to come over to the right hand side and you'll see that some of my options in text have uh a little plus next to it and that plus represents the ability to actually create a variable so I'm going to click variable and I'm going to say hey I want to create a variable here I want to create a plain text variable and it's going to bring up all the variables will go inside of our button let's call call this one label and by default it will say label and we don't want it to be a text area we just want it to be a single line that's great and now when we come here and actually click on our instance of our component you can see we have the opportunity to start changing things so we could have this one say buy now and we can have this one say add to cart and we can have this one down below just say the good old generic button but we could probably spell the word button right and now we have a little bit of on the-fly control which is important when you're designing websites because I don't want to have to create a component they add the card button and another component for the the buy now button I just want to be able to update these things individually well why don't we do that with a bunch of the other properties that are on our primary component here for instance why don't we change the background color or be able to change the background color right now it's set to purple and I love that I think that's great but why don't we come in here and actually see that all of these have the plus symbol on it so now we can come in and say fill create a color variable and we're just going to call this shorthand BG color and it's set to purple that's great why don't we do the same thing with the text here um I'm going to come in here and say create variable and this is going to be TX color or probably txt color something like that and now we're going to do something even a little bit more interesting why don't we just do we even want this label to be on our button at all well we have have this visibility option here in framer so why don't it's currently visible why don't we hit create a variable and this is going to be a toggle you can see the different iconography that's being used here this one's we're going to be able to toggle it on and off we're going to say is it visible um and we'll put actually why don't we put label like that and it's going to be set to yes and why don't we do the same thing for our icons for instance our icon on the left that could definitely use a little bit of visibility so let's go create a variable we're going to say uh icon left with a question mark and why don't we set that to no you'll see how it kind of disappears we'll do the same thing here we'll go to visibility create one and in this case we'll say icon right with a question mark let's set it to no as well by default and again because we were doing that on our primary when we go back we now have those options in the bottom right hand corner for all of the different variants so this is cool now we can grab our button and we can say hey we want that to be the pill style and now we can change the color a little bit and maybe we can even change our text color to be dark inside and why don't we turn on the icon left here in this instance and that will allow us to either turn that one on turn that one off maybe we like the white text so it matches a little bit more for this one we don't want the label at all but we just want a single icon and this one down here is the label only and just like that we've added a bunch of property controls via our variables directly on the components and it's still just one button component which is great now that we've created one component that has lots of complexity lots of options why don't we actually talk about nesting that component and then we'll build out a couple of fun interactions so I'm going to jump into my project I'm just going to drag in a button and I'm going to duplicate it so we have two instances of that button and I'm going to come down to my control panel and I'm probably going to make this one a little bit more on the blue side with a left icon and push this one over here to the right and this one will have a right icon that's fine and why don't we change the label here for this one to say by now or actually why don't we do something like favorite like that that's not how we spell the word favorite and then this one should say something like add to Art something like that okay great we got two buttons I'm going to grab both of them I'm just going to add them to a stack so they're just constantly spaced and maybe this is a a pattern I'm going to use a lot throughout my application or throughout my website um I think I probably want to turn that into a component so now we're taking something that we have here like we're calling this a button row and it has two components inside let's turn that into a new component using our hotkey Command and I'm just going to create that button row and there it is our button row it has been created and it is always made up of our previous components so from here I can actually still double click and look at our red Crumbs from home to button row button row into the button and now we can actually make some changes here so for instance if I don't like the font that we're using here maybe I want to use something else like felipa uh I can go back to my button row and you can see that it's changed it inside of the nested component it's also changed it inside of my actual website and if I bring just regular instances of that button it's going to be changed there as well and that's how we can actually take our components Nest them one layer deeper and really now if I change one thing at the base level that's the button it's going to change anything and everything that button is associated with from here on out we're going to take everything we've learned so far and extend it with a little bit of custom interaction between variants by building out a custom accordion actually have this design that I've been working on for an accordion panel here you can see I have the open state that means everything in the kitchen sink is inside of it that I want to be inside of it right now so why don't we just actually grab this and bring this onto our canvas and why don't I actually uh I'm going to remove this button row we don't need it but it might be nice later on to have a button down here and let's just change the label to say something like C more fa Q's like that and you could imagine an interface where we are lining these things up in the center Let's Line this one up in the center and we have a series of FAQs all stacking up on top of each other we also have like a closed version well we're going to have to build that out why don't we build it right here with this so I'm just going to rename this stack that I have to be FAQ and I'm going to turn it into a component using the hotkey so create that new component I'm directly into the component editor space and what I want to do is I want to create a variant of this so immediately over here I'll create that variant and uh why don't we just move directly into our primary and I'm selecting that here I'm just going to rename that to be something like open and the other one I want to be closed just like that okay great so now I have the open version it's exactly what we want it to do uh why don't we move into the closed version and we will actually just take the opacity of this down and then we will set visibility to no which will actually kind of Tuck everything up I why I just come over here really quickly and just rotate this thing back to 0 degre or actually maybe something what was it at was an X like that something like that back to a plus so we get kind of that little interaction and um so great we have visibility set here and it's actually kind of important to note that we we'll change the opacity and the visibility of our text because we should get a little bit of an auto expanding interaction again this thing is set to a stack so it's going to expand to fill the space or actually excuse me hug the contents and that's exactly what what we want now what we want to do is we actually want to grab this entire variant that we have here and you can see we get that little interaction lighting bolt there so we want to grab that and just drag it over to our closed view and say on tap we don't want any sort of delay and again if we wanted to we could open up the interaction we could change things around add a delay we could also come down here and change the spring or the easing and the timing we'll leave it just to as the default for now so why don't we close this up and we'll do the same thing on click of the entire row will just head back on tap just like that and you can actually preview this command P preview it right here inside the component editor and just like that you can see everything is working really really good so why don't we actually go back to home because now we have a component here and uh we can set this to the closed State like this and then we could actually kind of like line these up a little bit why don't we put them in a stack so we'll stack them up they have a little bit of Gap in between maybe eight pix and why don't we just keep adding some more of these and make sure that our stack is actually set to fit the content boom it's going to fit all of them inside of there and when we have one of them that's open to close it'll push everything down why don't we command P really quickly we should be able to close that open that up just like so it works pretty good it spaces things out the only thing that we have to do here is probably come in and add some overrides for our question and our answer so why don't we grab our cont content here and just add a variable we'll call this one question we want to be able to add something inside of there so we'll just say uh for our label add a question here perfect no placeholder text area no we don't want that let's come in here and do one more and this will be content in this case we'll call this our answer and then we'll put place your answer here and we could make this a text area so it's a little bit bigger we could just keep it as is let's do text area that that way this is what our users will see when they're updating the website so that's great um answer just like that fantastic we should be able to go back now and you see each of these are blank and they are ready for us to actually input our question and our answer and just like that we've built out an actual accordion menu that expands opens and closes through a custom interaction linking between those two variants and it's not just hover States you can build you can actually prototype and interact between the variants which gives you a lot of things you can possibly do using framer well there you have it some basic and Advanced Techniques of components as well as some process and workflow tips hope you enjoyed the video if you did make sure leave a thumbs up subscribe to the channel I do lots of videos about design as well as framer development so come on back and make sure you ring the bell so you know when more content comes out if you have any questions leave those down in the comments and check the description for a bunch of helpful links to working with framer and I hope to see you in the next video

Channel: Jesse Showalter

Views: 3,079

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, figma, webflow, notion, freelance design, framer motion, framer vs webflow, framer cms, framer website design, framer motion tutorial, framer animation, framer components, framer component library, framer component tutorial, framer component breakpoints, framer component hover, framer component variants

Id: Sfy5wG5ZB3A

Length: 19min 31sec (1171 seconds)

Published: Thu May 23 2024