Layout & Design

Intro to Components in Framer (Fundamentals Lesson 21)

Joseph

16:57

68K views

Mar 6, 2025

About this lesson

Components are the building blocks of scalable and efficient design in Framer.

Whether we’re creating buttons, nav bars, cards, or footers, components allow us to design once and reuse elements across our projects.

Using components, we can speed up our workflow, maintain perfect consistency, and make global changes to elements across our entire project, or multiple projects, in just a few clicks.

In this lesson, we’ll explore how to create, customize, and manage components in Framer. And how to make components super flexible with variants and variables.

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=0s Intro

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=6s Why components are essential in Framer

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=39s Creating your first component

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=73s Inserting components from the assets panel

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=119s Using quick actions to insert or replace components

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=173s Detaching and replacing component instances

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=213s Editing components and creating states and variants

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=288s Adding an inverted variant

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=352s Using component variants in the design

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=391s Making text editable with variables

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=473s Editing variables from component instances

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=516s Nesting components within other components

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=556s Creating a pricing card component

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=658s Making pricing card variants editable

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=752s Adding variables for bullet points and visibility

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=836s Replacing cards with component instances

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=868s Managing components in the assets panel

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=925s Sharing components across projects

https://www.youtube.com/watch?v=7LdaBIcgqzw&t=985s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00components are the building blocks of 0:02scalable and efficient designs in framer 0:05whether we're creating buttons nav bars 0:08cards or Footers components allow us to 0:10design once and reuse elements across 0:13our projects using components we can 0:15speed up our workflow maintain perfect 0:18consistency and make Global changes to 0:20elements across our entire project or 0:22multiple projects in just a few clicks 0:25in this lesson we'll explore how to 0:27create customize and manage components 0:30in framer and how to make components 0:32super flexible with variants and 0:35variables let's jump 0:39in before we create our first component 0:42let's look at what we're working with to 0:44figure out what makes sense to turn into 0:46a component in the first place in my 0:48example project here you can see I have 0:50a few of these nearly identical buttons 0:54so this is definitely an element that 0:56should probably be a component Now to 0:58turn one of these into component and it 1:00really doesn't matter which one since 1:02they're all virtually identical we just 1:03want to select the element we just have 1:05to have a single element selected on the 1:07canvas and we can either rightclick and 1:10choose create component or use the 1:12keyboard shortcut which on a Mac is 1:14option command K and on a PC would be 1:18Control Alt K when we click on that we 1:20get to give our component a name and it 1:22automatically takes on the name of the 1:24layer from the layer list so in this 1:25case this layer is called buttons SL 1:28primary CTA and just like like our color 1:30styles and our text Styles buttons slash 1:33is going to create a folder called 1:34buttons and it's going to create within 1:36that primary CTA so I'm going to run 1:39with this and I'm going to click create 1:42we're automatically brought into this 1:44dedicated canvas view for our new 1:45component but before we dig into this 1:48let's go back to our homepage and talk 1:50about inserting instances of a component 1:52where they belong now you'll notice this 1:55element here since it's the element that 1:57I created the component from 1:59automatically gets turned into an 2:00instance of this component which I could 2:03copy and paste elsewhere like over here 2:05where these buttons are that I want to 2:07replace with this component or I can 2:08head to the assets panel and on the 2:11assets panel you'll find all of the 2:13components within your project so here I 2:14have that buttons folder because the way 2:16I named this and I have primary CTA and 2:19I can just click and drag this directly 2:21onto the canvas and then I can delete 2:24this button so that I just have the 2:26component there replacing it now the 2:29size of this button does get inherited 2:31from the component itself but I can 2:33change that so I'm going to change the 2:34width here from fit content to fill and 2:38there we go another way to insert a 2:40component that will save us a step is if 2:42I press command K to bring up my quick 2:44actions menu or control K on a PC I can 2:47type the name of this button so CTA and 2:51here it is in my quick actions menu now 2:54when I hit return to select it I have a 2:56few options I can insert this button I 2:58can edit this button or I can replace 3:01what I have selected on the canvas with 3:03this button so by choosing that in one 3:05step I've replaced that button that was 3:07not a component with my component and 3:10you'll notice instead of inheriting the 3:12size from the component it inherited the 3:14size from the layer that I replaced so I 3:16really just saved myself a few steps if 3:18you decide you don't want something to 3:20be a component anymore you can always 3:21rightclick it and choose detach instance 3:25and you can also replace this component 3:27with another component or replace all 3:29instances of this component with another 3:31component which can be a huge timesaver 3:33we can also jump in and edit a component 3:35directly from any instance of it by 3:38either double clicking or selecting and 3:41pressing return on the keyboard and 3:43you'll also find an edit component 3:44button on the properties panel now we're 3:47back in that dedicated canvas View for 3:49the component where we can make edits 3:51and create additional variants any 3:53changes we make here within this view 3:55will affect every instance of this 3:57component and while we don't necessarily 3:59need to make any changes to this default 4:01state of this button we might as well go 4:03ahead and create some states and 4:05variants that make this component more 4:07flexible you'll notice that built into 4:09the canvas itself we have the option to 4:11create a hover or press state for this 4:13button and we also have the option of 4:15creating a whole different variant of 4:17this button and variants are super 4:19powerful because you can start linking 4:21them together and you can create very 4:23Dynamic interactions within a component 4:26we're going to save that for another 4:27course but for now I'm going to create a 4:29hover state for this and when you create 4:32a hover State this way it's 4:33automatically going to set up the 4:34interaction that switches variants when 4:37the cursor hovers over it so that part's 4:39already done for us but for my hover 4:41variant here I'm just going to give it a 4:43different fill color and I'm just going 4:45to swap it with this content 50 so that 4:48button will get a little lighter on 4:50Hover the next thing I want to do while 4:52we're here we are going to need an 4:55inverted version of this button we had a 4:57black card in the middle that's going to 4:58need a white version of this button so 5:00to do that I'm going to click here to 5:02add a variant and for this variant I'm 5:05going to change the fill color to my 5:08content inverted and I'm going to select 5:10that text layer and I'm going to change 5:12the text color to content 100 5:15effectively reversing the foreground and 5:17background of this button it'll also be 5:19helpful later if I name these variants 5:21correctly so I'm just going to press 5:22command R which would be controlr on a 5:25PC and I'm going to name this 5:27inverted and then my primary variant I 5:30could leave it alone or I could change 5:32the name to default and for good measure 5:35let's also add a hover state for our 5:37inverted version of this button and for 5:40this I'm just going to be lazy and do 5:42the same thing I'm going to change it 5:44from white to that middle gray and I'm 5:46going to change the text from black to 5:49content inverted which is white and 5:52there we have that so now I can go back 5:53to the homepage I can find this version 5:56of the button which before would have 5:58been a problem to replace with our 5:59component because it would be black on 6:01black but I'm going to do just that I'm 6:02going to do my little trick where I hit 6:04command k i do a search for our CTA 6:07button here I select it and I choose 6:10replace and of course because the 6:12default variant is black now we've got 6:14black on black but because I have a 6:15second variant that I've created for 6:17myself I can come over here to the 6:18properties panel and switch the variant 6:20from default to inverted and boom there 6:23we go now we've got another little 6:26problem starting to emerge where every 6:28instance of this button matching 6:29perfectly isn't necessarily a good thing 6:32those buttons that we replaced in these 6:34cards had different text content before 6:37but you'll notice if I try to change the 6:39text content here this entire component 6:41instance is like one object so I can't 6:44click my way in there if I double click 6:45we go into edit mode for that component 6:47and if I make a change here it's going 6:50to affect every instance of this button 6:52so this is where variables come in if I 6:55want to make the text content of this 6:57button editable at the component in 6:59instance level I can select this text 7:01layer I can head down to Content and 7:04you'll notice a lot of the properties on 7:05the properties panel have this little 7:06plus sign next to them and that is a 7:08mechanism to create a variable from this 7:11property so from the content property 7:13I'm going to click I'm going to choose 7:14create variable it's going to be plain 7:17text and when I do so the variables 7:19model appears and it gives me a chance 7:21to give this variable a name it's a good 7:23idea to name your variables because it 7:25will be confusing later when you go to 7:27edit them you may not know what they 7:29mean but in this case title does make 7:32sense we could also name it button text 7:35something like that and the text that 7:37was written there before is going to 7:38become the default text but this is now 7:41going to be editable because it's now a 7:43variable so let's look at how this 7:45actually shows up one we see purple over 7:49here on the properties panel showing 7:50that this property is now driven by a 7:53variable so if we want to edit what we 7:55see here within the component we're 7:57going to do so from our variables model 7:59which we can get to from the toolbar at 8:01the top of the screen but the more 8:03important thing is we can go back to 8:05these instances and get for free doesn't 8:09really apply to these two because these 8:11two are paid so if I select either one 8:14of these two instances now on the 8:16properties panel we have a new property 8:18for that variable that we just created 8:20and there's the name of it I named it 8:21button text and here is the value get 8:23for free is there by default but I can 8:25change this to sign up now and I could 8:29do the same 8:29for this other one here sign up now 8:32there we go that's more like it and we 8:34can do that for all kinds of properties 8:35we can make the color editable we can 8:37make the corner radius editable we could 8:39even make the padding editable whatever 8:41we got to do to make this component as 8:43flexible as it needs to be you can also 8:46Nest components within one another 8:48either by inserting a component as a 8:50child of an existing component or what 8:52I'm about to do here which is create a 8:54component from this card that already 8:56has a button component inside of it in 8:59fact all of these cards could really be 9:01one component this inverted one could be 9:03an inverted variant just like we did 9:05with our button so to turn all these 9:07into the same component I'm going to 9:09start with the biggest one because it's 9:10easier to hide extra bullet points than 9:13it is to add them in and I'm going to 9:15turn this into a component so I'll 9:17rightclick I'll choose create component 9:20and pricing card that's a fine name I'm 9:22going to click create now one thing's 9:24for sure I'm going to need an inverted 9:26variant of this so I'm immediately going 9:28to create a new variant I'm going to 9:30make sure I select the parent frame 9:32where that white fill is applied I'm 9:34going to change that to my content 100 9:37and then I've got a few layers here that 9:39are black now that need to be inverted 9:42as well so here I'm just going to 9:44override the color of this style turn 9:47that into content inverted I've got a 9:49bunch of text layers in here I'm going 9:51to drag to select but I want to select 9:54only the child layers here so I'm going 9:55to hold the option or ALT key and that's 9:58only going to select what fits entirely 10:01within my bounding box that I'm dragging 10:03so that allows me to just kind of lasso 10:06those child layers and then with those 10:08selected I'm going to edit the text 10:11color here and then I'm going to do the 10:13same for the icons that sort of 10:15disappeared here I'm going to hold the 10:16alter option key and it's only going to 10:19select them when they fit completely 10:21within my bounding box see I don't grab 10:23those text layers on accident because 10:25they don't fit completely until I get 10:27all the way out here with my bounding 10:28box so so it allows me to be a bit 10:31surgical with my selection and with 10:33these selected I'm going to switch these 10:35to content inverted as well and last but 10:39not least our button just like we did on 10:41the main design canvas I can just switch 10:44that from the default variant to the 10:46inverted variant and boom now I've got 10:48two variants of my card and I'll do the 10:51same thing here where I rename this one 10:53inverted and I'm going to come over here 10:56and rename this one default perfect but 10:59in this case there are quite a few 11:01layers that are going to have to change 11:04or be changeable at the instance level 11:06we've got the name the price the button 11:09text and all of the bullet points down 11:11here all the features to make these 11:13editable at the instance level we just 11:15do the same thing that we did for the 11:17button so with this text layer selected 11:19I'm going to come down here and I'm 11:20going to create a variable for the 11:22content of this text box I'll choose 11:25plain text and I'm going to name it plan 11:28name because that's what this text box 11:30represents the name of a plan that you 11:32can choose from and I'm going to do the 11:34same thing for the price with the price 11:35selected I'm going to come down here 11:38content create variable plain text and 11:41this one is going to be called price 11:42which is already there so that's great 11:44I'm going to click away and next we've 11:47got this button here and the button 11:49already has that variable set up within 11:51it that allows me to override the text 11:53but that variable currently is only 11:55accessible when I select an instance of 11:58that button so if I'm selecting an 12:00instance of the entire card I don't get 12:03access to that variable but what I can 12:05do is bubble it up one level by adding a 12:07variable within the card so we've got a 12:10variable talking to another variable we 12:12can do that and that's an important 12:14thing when we're nesting one component 12:16within another and button text is a 12:18perfect name now there are a couple of 12:20things that I want to do here I want to 12:23allow the text to be changeable for each 12:25and every one of these bullet points so 12:27that the features can differ from plan 12:29to plan so I would do the same thing 12:31there as we've been doing and I'm not 12:33going to make you watch me do that over 12:34and over again but I'd want the content 12:37to have its own variable for bullet 12:39point one bullet point two bullet point 12:413 bullet point 4 Etc and I also want to 12:45be able to turn off probably feature 12:48five and feature six because our middle 12:52card only had five features and our 12:54first card only had four features so we 12:57can add a variable for the visibility of 12:59feature five and feature six so with 13:01feature five selected I'm going to come 13:03down here and for visibility I'm going 13:05to add a variable create it and I'm 13:09going to be a bit more explicit with the 13:10name here not just visible but visible 13:13feature 5 so that way later I'll know 13:16which one I'm toggling the visibility of 13:18and then feature six I'm going to do the 13:20same thing I'm going to create a 13:22variable for the visibility and visible 13:25feature 13:27six cool so now when I go back I have a 13:30couple of options I could either replace 13:33these two cards with this component that 13:35I just created like I did with the 13:36buttons or I can delete the cards and 13:39then I can duplicate this component a 13:41couple of times select the middle one 13:44and switch out the variant to inverted 13:47there we go and then for this one I can 13:49also say feature six visibility no and 13:53for this first one I could say feature 13:55five and six visibility no so I get 13:58access to the layer visibility I get 14:00access to the properties within the 14:02component from the outside of the 14:05component because I've turned them into 14:06variables just like we did with that 14:08button and then of course I have the 14:10text variables that I added like this 14:12plan here which will say free and the 14:15price we can say $0 a month and then the 14:17rest the features and all that good 14:19stuff I didn't add those variables I 14:21don't want you to have to sit here and 14:22watch me do that but you can add those 14:23variables for any and every text layer 14:26that you might need to change at the 14:27instance level 14:29when it's time to manage our components 14:31we can head back to the assets panel and 14:34here we get a little plus icon where we 14:35can actually create a new component 14:38without even having anything selected we 14:39can create an empty component and start 14:41to build within that or once we have a 14:44bunch of components created we can start 14:46to organize them in new folders and we 14:48can also sort alphabetically when we 14:50have more and more components built up 14:52here as far as managing components 14:55themselves we've got a little overflow 14:57menu here and we can click to insert a 14:59component just one more way to insert a 15:01component we can also edit from here or 15:03you can just click the name of the 15:04component to edit it you can find 15:06instances of this component much the 15:08same way we found layers that were using 15:11Tex Styles and color styles in a 15:12previous lesson and we can also rename 15:15duplicate and delete the next few things 15:18on this menu are all about sharing 15:20components with other projects either in 15:23your own workspace or virtually anywhere 15:25else to make a component accessible 15:28across all of your projects you can come 15:30down here to library and you can add 15:33this component to your workspace library 15:35and that will allow you to go into any 15:37other project in your workspace hit the 15:39shortcut command forward slash or 15:41control forward slash on a PC and search 15:43for any component you've added to your 15:45workspace library and those instances 15:48will remain linked to the project where 15:50you created the component you can unlink 15:53them or you can detach them completely 15:55but if they remain linked and you make 15:57any changes to the main component it 15:59will allow you to pull that update into 16:02any instance in any other document in 16:04your entire workspace and copy URL 16:07allows you to copy a link to a component 16:09and paste it into another project or 16:12even share it with someone else to use 16:14in their projects in fact the framer 16:17Community is full of talented designers 16:19and developers sharing components 16:20they've made that you can drop into your 16:23own sites with just a couple of clicks 16:25and there you have it now you know what 16:27components are all about about how to 16:30create and insert them how to edit them 16:32and create variants how to create 16:34variables to make component instances 16:36much more flexible and how to manage and 16:39share components with other projects and 16:41even other people that's it for this one 16:44I'll see you in the next one

TeachesComponents Component Variants

Also coversColor Styles Custom Cursors Frames Hover & Press Keyboard Shortcuts Links Plans & Pricing SEO Audit Sizing Spacing Text Styles Variables

Watch on YouTube ↗

‹ Framer Update: CMS Starter Plugin

Localization Update: Collection Groups ›