Office Hours: Mastering components

hey there everyone we're just gonna wait for a few minutes while people come on in but while we're waiting we're gonna introduce ourselves thanks for joining us on soom today for office hours we're talking about mastering components and who better than the master himself joey banks which is not-so-happy leighton yeah I've titled him that Joey Banks it's also his one-year anniversary at figma or his figma bursary so Joey to start this off can you tell us what you do and then tell us your favorite color ooh yes thanks man thanks for saying that yeah so I am a design advocate at Sigma I just like raji I'm definitely not as talented but I try to be before a fig that I was kind of still am I guess but I grew up as a product designer that's how I got my career started I used to work in health care and I was doing a lot of work around like physician and clinical dashboards for patients which I really loved and I got started with figma back in 2016 or so it turns out my my boss then actually knew her head of product from back in the day at Macromedia and we just got an intro and and honestly kind of kicked off the beta a long long time ago and really fell in love with it so like rod you said I've been at figma for a year now I think it's an amazing tool it's so fun to be able to bring into new people into new teams and to uh I don't know just get to connect with people like it's amazing that hanging out with you Raji and hanging out with everyone right now is like a part of the job so pretty happy my favorite color it I grew up with it being blue I just thought I don't know I love blue and actually as I as I mature and as I get older it's green it's like a dark forest green now oh well you're like full you're full coming into dad mode with that with that forest green are you gonna be getting like a Subaru as well like a four-string Subaru I'd just I feel like it happened as soon as got the New Balances the white New Balances and they have like the grass the new grass stains on them you know you joke but I my goal is to own a house in to mow a lawn on a Saturday it's it's honestly breathtaking and it's it's so much better than they all say it is I as a house owner that this is long it's amazing it's amazing they wait to wave to the neighbors yeah I'm excited for today too I'm especially excited because this is something I like I love building components I know that Joey really does too in fact Joey's got an account on the figma community where he actually uh is one of the top dogs because of all of his contributions design systems component libraries and things like that so I thought who better to talk about this then the component Joey title it himself he said he was the master so I actually only thing I have going for me right now uh overlord I think we're preferring a component we haven't run that by our VI team yet we have not yet we have not yet all right so as usual what we're gonna do with office hours is we're gonna jump in and just start showing you techniques for creating components reusable components different ways that we think about it tips and tricks that we have but we're gonna do our very best to keep an eye on the questions as you raise hands or put questions into the chat go ahead and do that it also remember that on that chat area where it says all panelists you can definitely chat to us but if you drop that down and go to all panelists and attendees you can actually talk to everyone so we can be a big happy design family if you'd like to do that all right Joey you think I should start or do you wanna start what are you feeling uh I'd be happy to kick it off just talking about components and maybe how to create them and their use and how to get started for those who might be really new to it and then yeah like Roger said where can I go from really basic to hopefully more complex and hopefully you'll walk away today with have a little bit fun with us your mind off things and hopefully learn a little bit about components I can definitely kick it off a little bit uh go for it Joey go ahead and hit that share alright sweet I'm gonna go ahead and continue and let's go ahead and spare yes all right all good ready oh it's beautiful yes it's cool all right great components uh so maybe maybe it might be interesting like in the chat like do you use components I'd be really curious to know like for people who are joining us today like maybe one through five like how maybe one is like really novice five like I'm a total expert I'm gonna help Roger and Joey if the stream stay I do you use components you have a team library you use them locally in a file just kind of curious we got some ones alright we've got a hard core component user suites Oscar said she's a five great cool so all right let's talk so the basics will actually demonstrate building a component later on the street [Laughter] right so components they are awesome because they allow you to create an element to really perfect that element and then just to do it once and you get to duplicate it everywhere and not only do you get to duplicate it everywhere and keep consistency and make your design process much more simpler and quicker but you also can share with your team like if you're working in a file and perhaps there's like a new icon lead Rio or something that you feel everyone else can use you can make it a component you can share it out really easily and I think they're just so fun because like you have let's say you have a hundred instances of something you update it once all of those hundred instances are also updated and I just think it's I think it's pretty I don't know I just nerd out about it a lot so I would love to show a little bit about like how to create a component we're gonna get into some naming conventions I saw I think Jordan you just posted that in there definitely get into that and I'll have some fun with Auto layout Roddy has a lot of tricks he knows way more than me it seems like about Auto layout so hopefully both of us can combine to show some stuff so first things first I just let's zoom in over here to kind of component basics so what we've got we have a kind of a structure button up here at the top we've got a couple down here that we're gonna work with but the first thing I want to show is to create a component let's let's actually get into that so all you have to do to create or to create a component is select all of the items that you want to be a part of that component and then all you have to do is right-click choose crate component or free keyboard shortcut folks out there option command K makes it really easy and I'll click create component and you now have a component that's ready to be used and you'll notice that over on the left hand side in the layers panel whenever you see a little four diamond icon that means that's the primary component that's the parent that's the like the original component you're starting with if i duplicate this component so let's say I hold the option key and drag this out here I now have what we call an instance in Sigma and all that means is if I create or if I make a change in the original primary component like let's say I changed this to be I don't know like a weird terrible green then that's going to be reflected in the instance so that's kind of how that relationship works we'll get into overrides in just a moment but you can do a lot of overrides on instances too so if you have like a basic component all of your designers can actually use that they can change the color they can change the text they can do all sorts of things the size position all that so I think my we try to make components as like structure structured but also as malleable just to make sure that they're really usable for the entire team and you don't have to break them so with that let me undo that change and what do you think would be good to walk through 1st RZ like I can I can walk through MIDI overrides and how that would work or we can walk through composing components of other components yeah what I love and I think I learned this from you I love just your approach to let's just create up some buttons and let's do like a primary button a secondary button maybe a disabled button and utilizing and showing how you can use a base structure to build those up all right sweet I love that so what I typically do and this can be different for everyone but what I like to do is if it's okay I'm actually just going to use this original structures button and for now I'm just gonna drag the original primary component up here at the top and what I like to do is I like to work with the structural thing that has everything inside that I might need so when we talk about a button we have a rectangle layer we have a text layer and we might have an icon right it's got everything in there that we could actually use for our kind of future button States if you will so what I like to do is I like to grab a structural component hold the option key or command D to duplicate now I've got a now I've got an instance of that original primary component and this is actually really cool so when you have an instance you can right click and you can actually make a new component of the instance and it's not going to change its looks I just start off but what you will notice is if you go to the layers panel over here we see that new component that's been created with an instance inside and what this allows you to do is I can actually now rename this so maybe I'll call this one button slash let's do primary and on this primary button let's say they're brand color is actually let's say our brand color is this for now I'm actually just going to use one of the styles that we created so let's say it's our primary blue over here so this is our like green now though Joey like I I'm just trying to try to I don't know company everyone here you know my personal preferences aside so now I've got a primary button and what's cool about this is I'm just gonna do it one more time so I'm gonna duplicate our original primary component up here going to do the same thing gonna right-click choose create component down here and again I'm gonna rename this to be button slash let's imagine that we're working on our secondary button and let's say that our secondary button we actually wanted to have a let's do like a white fill and for our text or actually just going to make that black or actually we could what might work better is doing our blue for that text there so just to separate these a little bit more into kind of cover again we have a structure button we have a primary button that was composed of that structure button we have a secondary button that again was composed with that structure button and now it's really cool is I can duplicate this I can make a copy so I have an instance the secondary button and if I want I can change the text like I could say hello and I could grab this button and then I everyone might know but just in case you can always instant swap these using the instant spot then you over here on the right hand side so what this allows did we do is like with that secondary button selected I could change this from primary or from secondary and bump it back to primary and you might notice if I do this a couple of times the override that we made so we changed that text is totally preserved so it allows you to kind of switch States and you can really easily like if you're working with an area and you have a secondary button you're like oh I actually need a primary button in this case use case or I've actually need a secondary button I don't have to duplicate my efforts I just did that once I using that naming convention I was able to swap it and it's all kind of preserved there so one thing I actually noticed is if I just make this short like I'll say hi I noticed that our text isn't aligned properly here so as we kind of move this button as we scale it it looks like our background isn't resizing and our text seen to the left into the top so I want to fix this and this is kind of where making that structure button really comes in handy or that structure top level element where everything is composed of from the reason is because I want to fix this but I don't have to fix it for all of my different instances below right that would be a lot of work so if I want because everything was composed of this mask or this original primary component up here all I have to do is select that background layer and now I can actually change the constraints just once so I'll shift-click to make it left and right and then shift-click to make it position top and bottom or constraint at the top and bottom and you can see that's reflected down here in the secondary because it was composed of that structure and for the text we're actually gonna do the same thing so I'll click on the text here it looks like it's position top and left or constraint at the top and left but for now I actually just want to Center it and I want to Center it here and now let's actually go ahead and select this and Center it to the middle and now I've got this totally fixed and again I could select this I could change this from secondary to a primary and I've got my kind of different states of buttons so there's all sorts of ways to do this again some folks like to like not use the structure element and just make those changes as you go I just like to try to be efficient where I can and if I can just make a change once it's gonna be reflected everywhere so even for instance if I select that rectangle layer here I go to our corner radius tool up here and maybe I'll change this from 80 to 100 well it's gonna be reflected everywhere because we're just doing it once and this is kind of that I know I'm going on a little bit long about this but this is just the thing that makes figma so special to me is the ability to compose components of other components and to make you faster and more productive in your work and it's just something that I really love if you can't sell rogered you use this method did use this method before kind of like coming to figma I had kind of dabbled with it but I think when I started the design system for dribble I I didn't know about that and I actually really didn't even know about nested components because that's essentially what you're doing and so later on as I progressed the design system it all used kind of structural based elements but I think our main button one just stayed just stayed the way that it was so yeah I figured it out yeah I feel like once you get it it's like oh how could I ever go back to like doing all of these like efforts every single time yeah so I was just catching up on chat a little bit and I want to go back and cover a couple of things just to I know it can be a little easy to kind of fly through this and I just want to make sure that a couple of the keyboard shortcuts that I was using everyone picked up on so there were two things that I did the first one is if I click into this layer here actually let's do the background layer when I click the background layer it was originally like this where it was positioned or constraints at the top into the left if I just click on either side I can't actually select both by doing that so what I can do is I can actually hold shift and then click on the other side and then click on the bottom and that's going to allow me to select all of those at once if I didn't want to hold shift or if I wanted to use the menu over here I could always select left and right and top and bottom from the menu but shift is just a quick little shortcut to allow you to do that the other thing and this is something that I think the only thing that I've ever taught Rajee at last era couple weeks ago was the ability to actually control right when you're working with really any element on the canvas so let's say I wanted to really quickly kind of drill in and I wanted to select the structure text layer all I have to do is control right-click and you can actually see really quickly all of the layers that are underneath your click and I can quickly just select structure and I've got it this is an example where just command click game would be really easy but if you have really really complex components like even if I go down here and I control right-click you can see I can see kind of a breakdown of everything that's going on and that's just one of those things I wanted to share I absolutely love that little tip which I learned like last week years ago like I just learned it from you I loved it I think it's especially helpful when that tree structure gets a little bit unruly on the left side of your layers it's really hard to kind of drill down and navigate through that and I like working visually my layers panel is a mess and I always kind of work right in that editor right in front of me so great good so the next thing that I want to get into and I find this to be so helpful whether it's a button or it's a container or it's like a really complex component and it is the idea of resetting an instance so you might know this I and you might not but there's a couple of things that I want to share so broadly speaking if I have an instance down here so just a show this is our primary button we've resized it we changed the text inside so we've kind of made some modifications if I ever want to get this back to the original or what's in that original primary component all I have to do is right-click on the entire instance and I can choose reset instance from the menu option here what this will do is it'll take me back to exactly what is matching in that original primary component the thing that most don't know or at least it took me a while to kind of get the hang of is let's say you just want to actually reset the text here like you what you're good with the size you want to keep the size but you just want to reset what that text was well you can actually select that text layer and again I can even control right-click I can choose our hello everyone text and I can actually right click on this and reset that instance to reset that back to what we had in the original primary component so this is something that I find to be useful because we're often making lots of changes to components but perhaps you want a reset maybe it's like a text field or an avatar or the actual kind of image or whatever it might be you can do all of those and always just get back without having to reset the entire thing likewise too if you want you can always select the component itself I could select n and I have this little reset menu over here which is going to allow me to basically select a layer and then reset any of the overrides that were applied so in this case if I just want to reset the name I can totally do that and that name is just referring to the layer list over here or if I want to reset the text I can also do that from that menu there so if you have a component you're making tons of overrides but you just want to reset maybe one thing about it you can always do that and it's something that I don't know speeds things up makes that makes it all a little bit less stressful and easy to manage we didn't have a question Marana asked making a change to a copy of an instance doesn't change the original instance is that right I think I missed how you actually override and just to add on to this I'd love for you to showcase pushing overrides to a master in case you actually really like a change that you may do you think it should be via the primary component yeah yeah so good question so let's actually start with a really simple example so let's say I had a I'll just call this like a circle component so I created a circle I did command option K just to really quickly make this a new primary component and maybe just illustrate this a little bit I'll want to know let's make this like orange E red so now what I can do is if i duplicate this just by option and dragging or I could click on this and they can do command D and I now have a copy let's say I selected that background or that layer there and I want to change the fill and let's say I change it to my favorite color something like I don't know it's kind of a weird green maybe something like that right and like you know what this color is perfect that's working for me I want to set that back to the original so what I can do is with this i can actually we can select this and there's an option in here so when you take it when you make a change to an instance you can apply those changes from the instance back to the original primary component as long as it's in the same file you could imagine like if you're pulling a component from a library you make a change we don't want to always give everyone on the team the ability to just push a change back to original component right especially when you're working with a really really big team but if you're working a file and you just have a lot of maybe local components or you're working with things just to make your kind of design process a little bit quicker you'll always have the option to push those overrides back to the master and when I click on this that'll send it back and now that's actually a part of our original primary component which is pretty cool so I use this a lot like if I'm working with small little components in the file and I'm just making changes and I just want to send it back it's a nice way to not have to copy that style paste it back in the original it's just pretty cool awesome cool yeah great question Miranda I think what do you think Joey about me tackling this field down here yeah let's do it Jonas sheir all right yeah I'll give it a share all right okay all right okay great button very beautiful awesome you one thing we're gonna go ahead and just write a field and then we'll talk a little bit about how maybe we would create that field with Auto layout all right so just kind of showing you some of the structure here what I have I've got a frame and that frame has some styles of one thing you may not know or may know is that you can actually style frames a lot like you can style a rectangle I can put a border radius on it I can put effects on it so just to kind of reduce clutter and using a lot of objects for this stuff I've got this frame with the background color I've got a shadow here and I've got like a border style this is actually linked to a color and I've also got some other icons and stuff here this here is a nested component that I actually just pulled from an icon library so I didn't have to recreate it and this is also a this is also another icon component but right now this is not a component at all and as you see it doesn't really respond or do anything like it should what I want to create here is the idea of a field with a pretended and a appended icon area you've probably seen fields like this that you can actually add icons to for now what I'm gonna do to simplify this exercises I'm just going to take this frame here I'm gonna go ahead and turn this into a component we can always add stuff in to our master component later I'm still trying to undo that word ask well alright looks like I had some rogue text here I'm gonna get that out so here we go we created a component let's see how it works right now it doesn't seem to work so great but that's because we haven't set our constraints of our children up in here so I'm gonna go ahead and put this text let's say maybe 16 off the off the X there that looks good I'm gonna Center it vertically this is great and let's see how that responds now alright this responds pretty well the next thing I'd like to do is add those icons in you're gonna see kind of a an issue with the way that I've set this thing up as soon as I add them so I'm gonna drag this icon in here and I'm gonna say oh and this is how I used to design components before Auto layout came out so same thing here I want this to be 16 I want it to be centered and maybe all but these two up against each other and use a nudge amount my nitro mount is set to eight great and often what I would do is I would actually use a manual width here and bring this over here and then I would do what Joey said set up my constraints - left and right and then I'll just have this text to be centered here the other thing I'd like to check on is the fact that this icon or the constraint set on this I'd like it to be set up to the left doesn't need to be left and right and I'd like to set it up to be centered so let's resize this thing and see how it responds not bad notice everything is centered as I move this frame all of the children within it are responding according they're constraints all right now let's add in this other icon over here and we're gonna take it 16 off the right side and center it we're also going to set its constraints to right and center for vertically let's see how this works here great as you can see as I resize this now that this icon stays attached to that right side so this is effectively the way that I used to design fields so if I go ahead and alt drag this to create an instance of that component a lot of times what I would end up having to do is I would be like ooh in this case I don't actually want I don't want to have this I don't want to have this icon so I would just delete it out now if you delete an object out of an instance it just turns it off it just turns off the display of it the problem here is that in this case I really want the text to move over because now it doesn't have an icon so what we need here is auto layout so auto layout takes a little bit of time to figure out and master but it's pretty easy to jump in let's just take this master component remember how Joey started with that master component and he started messing with the structure of it and then of course all the instance is updated so we're gonna do the same thing here we've got this instance kind of as a preview here and I'm gonna I'm gonna try to make some changes to this so I'm gonna go over here in the auto layout and simply click plus apparently if it was done a relatively good job at this we've got this here looks like the icons all stayed where they were let's go one thing that I noticed is that the spacing between these isn't enough I wanted that eight pixels between so I'm gonna select this again and see what that internal spacing is if you hover here you'll see a tooltip this is spacing between items I'm gonna set that to eight like I had before and then it went ahead and figured out what all about internal spacing was here this is what's really cool about Auto layout is that I can actually ramp this up and now it'll layout this thing I changed the height based off the padding this is a lot of the same way that setting up items in HTML and CSS work the cool thing about it is that now if I turn the icon on auto leah has this really interesting thing where when you actually turn the visibility off it just collapses and it takes away that real-estate so this is a lot more like what I wanted to achieve okay so that means in this case if I just have a search field I can delete this one here and it resizes the field and then I go ahead and put in search here and look I have a lovely lovely lovely little search field okay let's say I want to go ahead and add an icon on the right say I want like a search and go kind of a field let's go ahead and delete this one over here and let's come back in and we'll turn this one on now we've got this go icon here notice that as soon as this icon is deleted the height of this container actually changes so I'm gonna teach you a little something later on tell a dress that but one thing that you can do is if you know that the height of this icon is 24 you can manually come in and set the text to a height of 24 look I've gotta go to the master and then I can set this text over here to centered aligned in the middle so now when I delete the icon everything should stay that right height so we're doing all right there all right so this is a case and an example of that right prepended icon now let's just do another duplicate of this what happens if maybe you want to add a different icon here because this icon over here this arrow right is a nested component this is where we can actually swap out those components so going with Joey's first example what we could do is just once this item is selected we can come over here and drop it and we can go through this menu and say hey I want this icon now notice I'm using feather I guns and there's a lot of them and this list is unmanageable and really hard to parse uh you may you may run into a scenario like this we are so aware of this this is an issue but there is another way to work around this so what I can do is I can come in and select the one that I want to swap out I can go to assets and Joey I would love for you to share about slash naming and now you can actually use slash naming maybe in the future to help those instance menus be a little bit more tame but for now what we can do is we can actually go Ramba in our assets here we have these feather icons of course we could just come through here and visually look at those icons which is kind of nice maybe we want this arrow or maybe you want this who knows this anchor thing we could also search here so say I really did want an anchor for whatever reason I could go ahead and drag this in and then I holding Shift + command or shift control I can actually swap it out now I actually didn't have that thing selected so Oh Joey what did I do I lost contain option command I maybe I was not ah sorry about that I have to do a bit of a claw here I was holding the wrong buttons I need to be holding option in command as I drag over that item and you'll notice that it turns this nested component for the icon turns purple and of course if I let go it swaps that out I can still enter right over here if I want to make those colors a little different actually Roger something to point out there like you were doing it the if you just hold option it'll replace the entire parent component but if you hold option command it'll allow you to place something or any nested instance inside which is pretty cool so good good point so strictly holding option here I can only replace this item here which is handy but if I hold option in command then I can go in in any any of these nested components I can swap out yeah course a nested component great Joey I think that's good for me uh what would you like to tackle next all right I would love to get into you I'm a huge I don't want to say this out loud I'm a huge nerd for naming so I can get into organization of components and actually making components when you have like something like an icon set so maybe I can share a little bit of that I'll go for it alright sweets cool alright let's go ahead and share mmm there we go awesome alright so what I've got here just like Rogers you've seen an icon set I just dropped in a bunch of icons from the streamline icon set which is overhead streamlined icons comm just wanna plug them since I'm using them but what often happens when you're working in Sigma is let's say you're either coming from sketchy sure you have a bunch of drawn icons and you want to make them all icons to what I publish and share with your team right so what might happen is you might let me end Rupe this here just command shift g to ungroup what you might do is you might select all of these you're like alright I want to make all of these components so that everyone can use them I'm gonna right-click I'm gonna mute choose create component but actually what's happening here is you just have one big component which is not really the point right that doesn't get us very far so I'm gonna undo that and I want to show the ability to actually highlight all the components or all of the elements that you want to sorry not components but all of the elements that you want to make a component and there's actually a little disclosure menu up here at the top just next to the component icon when you click this you'll have the option to create a component which is what we just did made that big large component or you can actually create multiple components from everything that you have selected this is super cool if you have lots of images or lots of icons that are bringing in and now just by clicking that I have all of these icons over here that I can actually publish out as individual icons and often too when you're doing this you might have a bunch of images or like I said random sets of icons and the naming might not be perfect right so it looks like in this case it's actually not too bad but we have a lot of redundancy right like if if this were a file that were just full of icons we might not want to always see arrows - diagrams slash arrow slash what the icon is so I'm actually gonna rename these and one trick to this is with all of these selected you can always I just right-click and choose where yeah rename or command R this will bring up a dialog which actually allows you to batch rename and there's a couple of regex things that you can do in here as well but for example what I want to do is I want to rename all of these to be heir let's do I Khan / lets you icon / just to show you it might not make a lot of sense now but I'm gonna do icon / number down this will get me a preview I can stop descending that one or I can start the sequence from 1 and now on a rename we can see that all of these are actually renamed let's go ahead what did i do there suit icon / number down there we go we have a hundred and thirty icons for starting at one I think I had an extra and in there so that's pretty cool right and now you have all of these you can actually share out if you want like let's say I want to replace the word icon with something else well I can actually just match your search for that so let's say I want to replace the word icon with maybe streamlined well you know give you a quick preview of what you're actually renamed into it's just super cool so I can see it's going to be streamlined / 1:30 all the way down to oh one click rename and just like that it's done it's pretty cool this is so helpful when you're doing a lot of battery naming for example like one thing that I do a lot is I'll be making a component it'll be for light mode so it'll be like component slash light slash disclosure right and then I duplicate it and I want to make it dark mode variant what I do is I'll just make the dark mode I can vary variants and then they'll select all of them I'll rename and I'll find the word light and I'll swap it for the word dark and it's a really easy way just to kind of like get those out there and make that naming work for everyone so speaking of naming there's a couple of things that I want to call out here let's go ahead and I just create a new page for this it's okay we can call this let's call this let's just call it example for now so when I create a component let's actually go back to that necessary components page I'm just gonna grab this button for now let's go ahead and paste it in here I'm gonna break it gonna brief this as well just so we have something to work with so I'm gonna go ahead and I've got this button that's called button / primary I'm gonna go ahead right-click and choose create component just like we were doing before I can duplicate this I can right-click I can detach this I can double click I can now call this buttons secondary and then I'll make a new component out of it and what this is allowing me to do is I can grab a copy of it let's actually change the styling just so we can see what's uh what's going on here so we'll make that white we will make this blue and again what's going on here is because I'm naming this button / and button / our instance swapping menu is picking that up and that's going to give you the ability to swap really easily between actually it's a little confusing right now because I have a couple of different copies so I might do like button / white and then button / blue and you'll see right away this actually updates let's not do that this this actually updates and I can swap between white or blue and I'm getting all of these options because it's button / which is pretty cool so you can start to kind of dictate like how you want designers do you oughta find these components what they should be able to swap these components with and just make it a little bit easier for everyone you can also actually sort everything by frames too and what I mean by that is let's say that we have a frame I'm just going to draw a frame so I just click the frame tool I might make this a little bit darker so that we can all see it maybe use something like that I'm gonna rename this frame buttons and one shortcut here is because I have a frame called buttons I actually don't need to include the word button inside any of the components that are within that frame and so with both of these I could actually use that batch renaming that we just did so I could do command R and I want to get rid of the button / so I'm gonna search for / let's go ahead and rename just that we've got buttons we have a wait button and a blue button and what's cool about this is because this is because these are all central to this frame here I can do exactly what I was doing before of making a copy and then instance swapping between blue and instance swapping between white even though there's no / before it because they're all inside of that same frame and then just to show you how this populates as well when I go to the assets tab let's go we're an example from the page example now we're in example / buttons this is created based on that frame which is pretty cool so you can imagine you have a design system file and perhaps you have a page that's icons pages buttons or inside of buttons you have a page that's like product a buttons product B buttons with different frames for each like you can get really granular and a lot of folks when they're starting to use fit but they don't realize that and it just makes it a little bit easier to kind of organize your components from the start and allow one more example or one more way to kind of drill down into that naming convention which is super cool so yeah this is my favorite way to kind of organize components I also learned something really recently from another really talented designer Jules Forrest over at Credit Karma she she's amazing she I like as almost single well she's that hope but she's really like driven the initiative over there building credit chromis design system and yeah I just love any anything and I think she says and teaches all of us so one thing that she suggested is when you're actually instant swapping like let's say I make another component over here I'm gonna just duplicate this and I'm gonna make another component I'll rename this let's just call this outline and with this one I'm gonna add a stroke I want that stroke to be air color and bumped up one and let's go ahead and remove the fill so we've got kind of like a ghost or an outline button like this so what usually happens is you'll have a button here and let's imagine you have a ton of different examples you click the instance whopping menu because these are in alphabetical order it doesn't always make the most sense to see them in alphabetical order and we don't have that option available yet and figma but if you're creating components and you want users to be able to swap really easily and kind of predictably between different components like let's say after primary or after let's say after blue always comes white and then after white always comes out line well you can start to actually prescribe that a little bit just by clicking on the component and actually including a number before it so you could do like oh one blue and then for white we could do Oh - let's let's do Oh - white and then finally Oh a three - outline and I know this may seem simple with just putting a button in front of the component Oh check this out now I can actually click on our instance here and these are all in the exact order that we want and it's easy to read and you can really prescribe from the star how you want everyone to be able to kind of interpret these components and when you have dozens and dozens of different instances that you can swap to I found this to be really really helpful let's see I saw a question from Michaela how did you add the border style to those components is that different from a stroke good question let's see so what I did is just to show you I'll hold option drag this out just going to detach this for now so we have something to work with and that I can click this skip our background rectangle there all I did was I added a stroke here just by clicking the plus and then all of our color styles are going to be there for either our fills or our strokes so we can use those colors for each and there they're not kind of independent if you will so all I did there was I chose our primary color again I bump this up to two and now I've got a stroke there we've just kind of as a team as far as the product goes we've we've really determined that like when you're using those colors you often want to use them for both and having kind of duplicates for each might be a little bit much for most teams so that's kind of how it works in Sigma well I have questions for you um yeah one I would love for you to you've shown how to use a frame to help organize this naming convention and not create really long names can you also show how to use the page as well too to showcase another way of organizing or another layer or like a folder structure for those components as well as somebody's asked how can I change icons inside component instances so I think I just showcased that but if you'd like to show that go ahead yeah let's go back oh maybe I'll tackle that question first um so what we did there was we had this icon here let's go to where that's located I'll grab this cool so all I did are all Rajee did when we showed that was he selected this and he actually went to the assets panel I think and then he chose icons he went into streamline or actually this is why I said sorry but I'll go in just streamline and what you can do is if I want to swap this arrow out for another for another instance that's available I can simply just hold option and command I can grab an icon that we want like let's say we want to swap that arrow for actually this one instead well I can grab this and then holding an option in command I can drag this right inside and replace that icon in place I could also if I want I can select this and I can go to the menu over here and select between but as we were kind of talking about earlier for a lot of cases it's almost just easier to use that mass's panel that way you can visually see everything you can hold option and command and drag that right in now that I've got this I can of course change that color of that to be anything else and work with it pretty easily there also I yeah so I can show pages next just to start ages I think are really helpful in so many ways and there's there's no real limit so wait how many create or sorry how many pages you can create in figma and actually is something that's not super well known is let's say you have an app and you're working on a feature and you want to maybe I have different prototypes for different users to maybe study their interactions you can create different pages for those different users and share individual prototypes based on the page so you can have all of your designs in one file all of your variants in different pages and you can share individual prototypes which will guarantee that participant a doesn't see for these design and vice versa and it's just something that I think makes it really cool and it prevents so many extra files from actually having to be created so in terms of components you can use pages to also organize as well as frames what I did here is let's call this button so let's imagine we're working in the design system file here maybe it's our global design system file where we have things like our colors and our buttons and kind of core primary elements like that so I've got a page here called buttons I could just these easily create a page and maybe I call this which we call this Rajee I could call this like avatars or profile photos something like that and actually we can use a plug-in just to generate a couple of profiles here so command command II just to repeat that last action I think I have it installed I'm gonna right click and go to plugins and then go to content real which is a plug-in by Microsoft and what I can do now I haven't used it since the update let's I had to click continue so what I can do now is I can go to our avatars let's go ahead and apply these are oh I can actually that's cool I can select individual ones so let's do I think let's do that oh I have to sign them no I think right am i doing that correct oh yeah so I've used this plugin before yeah I know they just updated it so I might not I may have to sign in that's no problem let's go ahead and I think we had an avatar of a cure just going to copy oh cool we have a bunch so yeah copy go back to her profile photo gonna paste this in over here um it looks like there's a bunch of different fills associated with this image here so what I'm actually going to do is command option C to copy this style and then I'm gonna click on each one of these and command option V to paste the style and now I can actually select one of these I can just remove that top image go here remove those two go here remove those three I'll just do the same thing just to show one more months do one more there we go he looks kind of mean so now what we can do is if I want to create these as as different components all I have to do or select all of these go back to the menu at the top choose create multiple components I've got this I could batch rename I could say profile slash and then we could do number down perfect you've got profile 1:05 and now just to show you again like let's say I grab this and I go back to mastering components and I want to insert an asset let's collapse this you can actually see because we're using pages there's a new top-level page here that's called profile photos with our components inside based on how they're named so it's just when you use pages when you use frames it's just another level up which gives you that kind of additional way to organize everything I'm just pretty cool so in a small design system it might not be the most practical but when you're in a design system and you're in a file that has hundreds if not thousands found it's in total this is a really helpful way addition to just ensure that everyone is able to see and find components really easily actually there's one thing I did want to mention if it's okay Reggie then I'll turn it back to you for a little bit um it's our component descriptions so this might not be obvious but one thing you can actually do is we've got this blue button over here and there's actually a field on the right hand side called component description and what you can do over here is you can actually type in let's say this is our primary button in the designing system well I can type in primary button and what's cool about that is if I go to the assets tab I can search for blue which will populate that button or I could actually search for primary which will also populate that button because of that description so if you had keywords if you had like JIRA ticket numbers if you had any sort of tags that would help anyone to find components easier you can always put those in I personally just separate by comma it's it's a free text field so really anything goes there as far as how you want things to be created all of that's available there and now I can actually describe this so I get right in and I'm working with it and the last thing that I wanted to add just because we were talking about styles was our sorry descriptions is styles you can actually always right-click on a style choose to edit that style and you'll actually be able to add a style description too so I could say maybe this is our primary brand I could save that back out and now whenever I have a shape or an object and I go to actually select a color if I hover over it you'll see the style name as well as that style description just below and something that's kind of cool is maybe you put your color accessibility standards in there maybe describing if it's Double A or triple a compliant perhaps you show the hex color underneath just to make it a little bit easier all sorts of things just to help people kind of understand the design system and what they're looking at a little bit more awesome well I've got a couple of we are coming to about I would say we probably have about 15 to 20 minutes oh I have a couple of examples I think that I can just blaze through super fast just to kind of pack some knowledge in here and then and then we can switch back to some of these complex components and talk about that so I'll hop is good alright okay so we're gonna go like a speedrun on this offer for your great questions I always have to remember that like we we always have so many questions here and so we need to get to those as well alright so let's just talk about throwing together a few components and how I might think about that right now I'd like to talk about this avatar component right now it's actually not a component it's just a frame I'm not even sure if constraints are set up in any way but just to look at the structure of this it is an image that image has a ton of fills on it you could also just have separate layers and they could have names like you know Sandra or whatever and you could have different images there you can also just have one image and always replace the fills in the overrides as well I like setting them up like this because I like having a bunch of I don't know like fake data so that I can just showcase what Asprey might look like with a bunch of different images in it as well as like what if they don't have an avatar what if they don't have an image so I've actually done this if you turn off the image here you can actually see that I set up the initials RK it's a little text box I've actually taken this text box and I had stretched it out to the four corners as well as set align middle I'm also going to set up my constraints like Joey with my newfangled little key combo I'm holding shift and boom look at me alright so now this text should stay constrained in the four corners I could obviously just set it at Center as well but I like doing it this way so now let's go ahead and see that we have this image as well here so we can turn off or on an image if we need it you never know what you might have in these components maybe an advert or component isn't just strictly an avatar it's actually got like a status indicator on it maybe you've got some kind of a number over here who knows so you might actually pack those things in there and just turn this off this isn't the way I necessarily recommend doing it but it can work so let's go ahead and just turn that into a component right there right click in the button and now we have this avatar instance that we can take anywhere with us let's take a few of these and duplicate them out and I could turn on status number like this let's see how this thing responds we can see that we have some issues with this whole thing one is that the border-radius actually isn't responding once I get big enough with this avatar we kind of have an issue there and maybe I don't want this little circle to maybe I don't want it to be that that big so I can actually come into this master component here and if I'd like I can actually tell the status hey I'd like you to be on the right and bottom and as soon as I do that you can see that it didn't actually grow any more it didn't scale and maybe also I'd like to do the same thing with the number I'd like that to be on the right and the top let's preview what that may look like here okay status let's do the number there okay great that's working now we have one more problem which is this like what happens to this background and the reason for this is is that this background has been set to 24 pixel border radius a couple of ways that we could take care of this one is that we could just ramp that sucker way up and just put it at a really high number and then it should always work for most most examples and most sizes the other thing we could do is maybe drop a circle back under here and take that background fill off that main frame it doesn't matter looks like it's working pretty well right here so now we have an avatar component that we can swap out up let's say we wanted to have different versions let's treat this avatar like it's our base structure so let's go ahead and turn off so this is like avatar default I'm gonna go ahead and do this avatar default all right we're gonna just delete these really quick and what if we just wanted to have some handy little components laying around so that we can actually swap these out quickly so we don't have to always go in click in here and do this so maybe we've got one with its status and we have one a photo in there so we can actually take this just in Joey's technique we can do a wrapper for that or just turn it into a component boom and maybe we're gonna call this avatar who knows who knows like status or status or some famous image with status I don't know what we're developing a big design system here so anyway so we can now have these things so if we have an instance here we're working with this and you're like oh uh in this case we're logged in they've already uploaded their image we and maybe they're active and online you want to go ahead and swap that instance up you could just do this right on this menu Oh swap it out for the image with status boom it's still using that base avatar master as the underlying structure what if you wanted to have another one you wanted to override you could have a hold command or control click that actually brings me right down to the image here and then of course I could say this one yeah cool all right so there's a little bit about avatars and setting up an avatar component there I'm gonna go Julia you're the checkbox master so I'm gonna skip on by that and I'm just gonna talk really quickly about how to set up some like utility components let's just say that I want to create a card and I want to put this media component and right now it's not a component but this media into the card because maybe there's something more than just an image maybe for me and I did this at dribble a lot I've done this on my own personal designs a media component may have like things like this like this ability to darken an image you want to have an overlay maybe you wanna have some text over it or something like that so it's not simply an image so this is what we've created here is a frame with an image with these like darkened layers over it I'm gonna turn that into a media component and then I'm gonna go ahead and use that let's once again see how it responds all right it seems like it's working pretty well alright so now we're gonna have this card component that will have a nested media component in it so this is 320 let's just say we want this to be I'm gonna turn and lock on my constraints here 320 and I'm gonna just bump this off a few so maybe it's like that alright I'm just gonna put this into this frame and I am going to yeah I want it to be a little bigger alright alright and then I'm gonna do let's bring my text down here now let's just say this is gonna be a little bit of a rudimentary example but let's just say right this is glorious I love this component look at it I'm gonna go ahead and create it to be this primary component but let's say I want to go ahead and add some text to video oh yeah well this should have more text we've got a problem here what happens if I'd like to resize this and scale it oh we've got a problem here you may be bumping into this kind of stuff well not to worry here what we can do of course is set this constraints to the left and right and the top we can also set this to the top or something like that we could start to see how that might actually work but it still is a bit unpredictable this is where I would really advise using Auto layout with this whole thing so let's just take this card and let's just turn on auto layout as you can see actually like do a lot better job of aligning than I did oh is the best I know I love it when it's just like Auto layout roulette like okay so I'm gonna put my vertical padding here in case you didn't know that you can actually scrub these fields which is pretty fun so I'm gonna put that I'm gonna put my horizontal padding at 16 I'm gonna delete this instance for a second I'm gonna see if my spacing between items that should be 16 as well because I love those eights now let's see how this works let's create an instance of this and I'm just gonna copy paste this text oh not exactly how I had hoped what's wrong here let's see it looks like this text is set to like a fixed width right now one thing that we can do is that we can actually go and change this it's actually an automatic with we could set it to a fixed size or auto height which would actually work for us or we can also this is a fun little one that I love talking about we can stretch left and right and because it's a child of a vertically a vertical auto layout container here it enables this ability to automatically stretch things to the left and right so notice how this magically fixed our component and now it's all wonderful and if the container resizes awesome Joey what you got that was a really quick speed rush and those stuff also I just want to say we it's probably likely that we're moving a little bit faster and that's definitely why we record these I know there's a lot to keep up with but uh hopefully over time we we can slow down all up I just want to I want to share that it's being recorded in a lot of this yeah we're always happy to take questions as well I know just speaking from experience I know I fly through things I just wanted to say sorry in advance um this is awesome Roger thanks for for demoing that maybe I can share really quickly like the how I typically treat like check boxes and then we can get into perhaps like a little complex Auto layout and actually just before that I want it like I would just want to call out on the card that you made this is what's so cool about Auto layout like you're creating a complex component like this you're sharing it with your team and then if someone's using this and they don't want that image all they have to do is hide the image or if they don't want the text all they have to do is hide the text and it just makes for these really dynamic awesome components you can build that that can be really powerful from the start and I don't know I love that I think it's super cool for those who are creating components all right I can take back control and show a couple of things with check marks who would have thought you better do better job who better I chose this for you because you were made for this gosh that is embarrassing alright so I when I create check marks well just just a quick example so there's something that we do where let's say I've this little check icon and maybe for this one I'll bump it up here and I might create a component out of this just in case I ever let's say I ever change what that icon is I just wanted to be reflected in all of check marks that they make so I might title this like icon slash check mark I can now grab this I'll go I'll just copy it and then in my check box over here that I've named checkbox unchecked what I'll do is I'll delete that original check mark I'll paste in our new component and now we've got our check mark component inside of our check box it's a lot of checks with this all I'm gonna do is I'm going to create a component and just for now I'm actually going to delete this one I want to show how these two are kind of related so I've got this checkbox unchecked I'm going to hide the checkbox inside I'm now going to duplicate this just command D drag out our new copy over here going to right-click create a new component double click here change unchecked to checked and now inside of that gonna drill down a little bit and turn on that icon so now I've got these two components that are composed of each other or where one is composed of the original and I've got the icon inside and what's really cool about this of course is I can grab a copy of this I can instant swap over here between unchecked and checked really easily but let's say I ever change the style of this like let's say I actually don't want that inner shadow well I only have to remove it from the original there so I'll just hide it here and it's going to be reflected and hidden everywhere else let's say I want to change that border from a gray to a blue again just have to do that once it's kind of just about like I love trying to find ways of working efficiently with components and this is one of those ways compose from existing components where you can yeah so let's see I saw a quick question benefits of having the check icon in the original instead of simply only using it in the check component um I think I think really just that like just being able to compose a new component from the other one is all and being able to you know if I want to make a change over here it's always applicable everywhere else if I ever want to like modify that original checkbox or check mark again I can just do it in one spot in it's applicable everywhere like let's say I turn this on and they decide you know what for all check marks I actually just want to change that to blue I'm gonna hide that now so again I only did that once but all instances of our checkbox checked totally good and this might be a little bit overkill for this simple example but when you're thinking in terms of like larger and more complex components I think this really comes in handy especially things like wrote word you what Roger is just demoing where you have all of these things that are kind of built on top of each other it can come come in handy yes design token like for sure I think that's where we're all kind of getting and heading so alright check boxes hopefully that's helpful again this complex but I just I think it's fun to try to think of little shortcuts like that alright um I want to go over here and I thought it might be fun to show a quick little example of building building like a complex Auto layout example I'm a little nervous Rajai maybe you can if you can help me through this yeah I often get nervous when approaching these as well I just pretended I'll just pretend no one's on the stream yeah all right Greg great so what I've got here is I've got this auto layout container that is resizable and it looks like it's actually pretty good in this example our text is resizing and it looks like it's an entire auto layout container with a couple of auto layout instances inside so let's just let's just do that let's recreate this alright so what I want to do is I'm gonna grab a frame and it doesn't have to be exact but I'm gonna draw it roughly to match the original frame over here I'm gonna click or tap hi on my keyboard to grab the fill or the color picker tool select that black there we've got our frame just like that I'm gonna pull from this a little bit just copy and pasting some elements out so I want to grab this heading large over here and a copy it gonna go to our new frame I'm gonna paste it in okay doesn't have to be exact gonna rename our new frame we'll call this a L example alright so what I want to do now that I'm kind of working with this is I want to make this an actual auto layout container just like we were doing before so it's definitely not perfect right now but let's go ahead and add auto layout so a shortcut I'm not sure if you mention the strategy but you can always do shift a to apply auto layout so does the same effect as clicking the plus over here so I'll do shift day just like that we've got an auto layout container so not perfect yet let's bump this up to it smoothly 32 and then I'll click on this again it will change our top and bottom to 32 and then perhaps the space between items it looks like that might be like 16 or so looks a little big let's do 24 alright so we've got this and just to test it out what I typically like to do when I'm kind of creating new components or new UI is I like to just as I get started I like to create a new component from this and I like to drag out an instance and in the instance like to try to break the instance or try to like stretch it and change it and just see like how is this gonna work for a designer who's actually using this component right so I've got this and it's like this clearly isn't working as we expected right so what I can do is I can work back in that original example and I can see how any like any changes will be applied to any instances so let's click on that text here and the reason that this isn't stretching across is because at the top it's been selected to align to the center but we want to stretch it to the left and to the right so I'm actually just going to select this option and now it's cool is as I grabbed this as I shrink it that is working as we expected I can even go here I could copy this text I can paste as a bunch of times just to double-check that again this instance is working as expected and then if you remember before let's get it back to normal all I have to do is right-click reset the instance and we're good and that's pretty awesome alright so let's go ahead and work with this group down here for this one I'm actually just going to keep things simple and I want to just copy the the the different layers in here so we've got a couple of text layers and a resolve group just gonna copy that let's go in our auto layout example and I'm just gonna paste that in that clearly doesn't look right so we're gonna fix this so what we need here is we actually need another auto layout group inside of our original auto layout container so what I want to do is I want to stack all of these vertically or sorry horizontally so I'm going to actually just create a new auto layout group I could create a frame and then create a group or an auto layout group but I can actually just hit shift a at the moment and that'll automatically create an auto layout frame for us to work with so it's really cool about this now is these are stacked vertically but I actually want to change this they used to be horizontally let's go ahead and make it horizontal and just like that we're like at a pretty good spot if we even have a 16 gap between so what that means is as I click on these different items and hold option we can verify that between these items is 16 if I click on this outer frame we can see the top is also 16 because on the outermost frame again we've got that 16 we've got that 16 spacing that's been set and then again just to double-check like this is a kind of what I do it's like work and check and work and check let's go over here let's take our original let's stretch it a little bit and it actually looks like that's working pretty well except this group down here but I'll come back to that so let's go and I'm gonna keep going I just want to grab this group down here we can grab this let's go ahead and grab this video clip content I think for now I'm just gonna copy this and paste it in just it's a pretty simple one really really comparable to this that we just built so I'll click on our auto layout group paste this in just in case you weren't familiar with this let's say we wanted to put this actually ad below this header text here what you can actually do is with this selected you can actually use the arrows over here on the right hand side to move this either up or down the layer list so on my keyboard I could do the I could do the I option command hold option command and arrow key or if you want to use the UI you can always really easily just swap the position so we care to move that so let's maybe say in my example I want to put this text this play button actually above I think that makes a little bit more sense and then finally let's grab this text here so we've got our content text let's go back to our auto layout example let's paste this in again sixteen perfect I love when all of these things match up perfectly it's like the best and I think we're actually at a pretty good spot now like if I grab this and I stretch it or shrink it how's that how's that look Roger I could actually that's a good pace of signal times I think it's really good and actually this specific example was from a friend of mine that works for Pluralsight and he was trying to say like how can I create a component that I can just resize and scale for response and for mobile and so this was our attempt auto layout to isn't in that sort of current version is it isn't perfect but we can achieve a lot of these different things we're really looking forward to when the next version of that is coming out I did have one question and I think I saw it in the chat earlier yeah so do you know how to achieve an auto layout with a fixed icon on the Left never change size so think of it like this reacts basic concept with the play button fixed icon on the left but very the whole can invariably change um yeah is there a way oh I see you would approach that uh let's yes let's give that a try I can't guarantee you let's give it a try but you know put me on the spot no no I it's good this is how I keep my job all right so what I can do is let's click the frame tool and I'm just going to draw or make a new thing up here again let's grab our color picker tool grab our black there just for now I'm going to copy this text let's paste it in here I might let's go ahead and apply Auto layout so shift a again and it's a little tight so let's do 24 24 and let's keep this at 16 and I'm gonna create another component out of this and we'll just call this test run so now just to double check I've got let's make a copy of it let's please add some more text there just to see how it grows or shrinks so it looks like we're actually heading in the wrong direction here where we want to go left to right now top to bottom so I'm gonna select this instead of horizontal I want to change this to vertical which will give us this this exact kind of scenario that we're looking for and let's say that I want say that I want to grab maybe this frame icon or this play icon down here this play circle and I want to paste it in here so what we've got now if we've got these two things stacked and as I add text in here it's one copy this and paste this it's actually pushing that downward well let's say that I want this play icon to be maybe at the top left is that kind of what you're getting at Rajee yeah yeah it could be said or it could be top left but the basic idea that is text the the auto layout of course can move vertically but that effect that icon isn't changing size it's not expanding or warping yeah all right so what I would do there is this is an example of where I would create another auto layout container within an auto layout container and here's the reason if I select this play icon and I select this text here and I do shift a again we now have an auto layout container but we want to change this actually instead of vertical to be horizontal and it looks like now we've got these two stacked side by side which is great and we can actually copy and paste this text a couple but it looks like again our icons on the wrong side and it looks like it's stayin a center with the container not staying at the top so what I want to do is I actually want to grab this text here and I want to change the position of these so I'm gonna select that play circle and then using the keyboard shortcut again command option down arrow I'm gonna place it to the left and now I actually want to change it from the center to the top so I'm gonna pin this to the top so it's always aligned to the top no matter how the text change or how our number how much text is added or how the container is actually added so we'll align this to the top and I think let's go ahead and click this container let's go ahead and set this to grow I think we're kind of there right we've got this but I know that all right Raji I know this is where I run into that that issue right yeah yeah this is a difficult one let's do this actually just not do that let's go back here all right so I just want to we're almost there we've got this text here I could get rid of this it's gonna grow or shrink kind of as necessary let's go ahead and just reset the general instance so that we've got it and we can paste some text in here so what do we what are we missing now is it as I stretch the container yeah and it may not be um very possible or easily possible yeah but the idea being that we want to we want to fix with the icon that's always kind of hanging out there at the top and then we wanted that text too we want this thing to be able to auto layout vertically but we also want to be able to stretch that container horizontal yeah I think all right now I'm just gonna do this do this live let's see so what I might actually do there is I might create I'm just gonna give this a try I might create another frame place this container inside of that frame put Auto layout on that frame and then have the child element stretch left and right and now maybe as I sized this no I don't think I can do it that way yeah dang it I think I think that might be a current imitation in terms of like as far as you can get with the responsiveness alright let me yeah let's do a little tag-team tap on in I know I don't know how to do this but I have an idea alright so I'm gonna follow you and I'm gonna make an attempt using negative frame spacing if it doesn't work I'd still like to give an example of that but this felt like it might be right for that okay so let's just get the icon out of there for now our ASIS oh I'm in the instance look at me alright so we've got this and we've got an auto layout or this is set up vertically and okay that's great I don't think we need this frame for now I'm just gonna ungroup that frame I'm gonna go to this stretch idea here so once again we've got a vertical this component is vertical auto layout and then the child this text object is Roger could I have you share your screen just so you can see the controls I'm observing you but I just want to make sure that we can see cool oh oh yeah absolutely okay so let's just go back really quick to where we're at here pretty simple you've got this component took out the icon and what we've got now is a vertical auto layout on this component the child the only child here it's probably a spoiled child since it's the only child that was a joke this this text objects I have set it to stretch here so I think without the icon this works I think okay so I'm just gonna take this text put in a couple of lines great it grows that way now we have this resize ability here this resize horizontal becomes available when you have a vertical auto layout container great now I just need the icon on the left here so let's take this play circle and let's just drop it in unfortunately because it is a vertical auto layout container this icon stacks in vertically enter this is gonna be a really cool time to share about this negative frame thing so we're gonna have to do a little bit of hackery on this but let's just make this big enough so this icon is you know sizeable for the text all right so what I would do here since this is in a frame you can actually if I hold command or control while I changed the frame I can actually change the frame without moving the objects and it basically does not honor the constraints of the objects underneath so what I'm going to do now is I'm gonna go ahead and set this thing let's just set it to one for now it's not what I meant to do I'm just gonna move it down to one here so this is a way that you can actually have something occupy the real estate of an auto layout contained item but actually not occupy it actually displays but doesn't occupy any real estate all right so in this same way I could actually take this place circle and drag it over here so if I hold space while I drag or first start drag and then hold space it'll still stay in the frame so I could actually drag it all the way over here and this is exactly what I mean by like a negative frame spacing because it's actually positioned negatively within the frame the frames occupied up here but actually the item is way over here and if I turn on clip unfortunately you would never see it so make sure if you're ever doing anything like this you unclip this and then of course this isn't that lovely and beautiful but we can actually put some more spacing in here to create room for that if we'd like and go at it from that from that approach now I don't think that this is a perfect solution I've used this quite a few times this technique this negative frame thing when I'm trying to work on like complex things that I want in an auto layout but I think at least it's a tool in your belt until Auto layout 3 comes out for you to be able to do something like this if I don't all the way back to the dialog example here that we never got to create I've rein in issues like that like what if I wanted to have the X button I did have a design for a long time that I was working on that had a close button it was kind of offset here and auto layout wasn't allowing me to do that I'd hit align right and I think we could be a quick example here if I turn on auto layout let's go vertical on this all right what do we got in here trying to figure out what's actually in here let's bring this in to it notice we've got this issue now if I said oh wait I just want to align this to the right see what we got here what have you said here okay we've got vertical and we should have oh it used a ton of padding i was wondering what's going on it's like there's so much padding there it automatically sense that i had a ton of padding in that so let's say this is our dialog box here and I wanted this X on the upper right area but say I wanted more padding here according to my auto layout container one of 32 pixels this would be another good example of how you could locate this up further but still keep it in Auto layout so once again I can hit command shift G uh sorry communally what am i doing I do not know what I'm doing I think I've lost my mind Joe what's up oh my goodness okay I just needed to hit command shift F to frame this I need that frame - I feel like my brain is definitely taking a dive okay right you're doing great man so I can go ahead and put this in the upper corner and of course this is actually the frame for it then I can hold command while I resize this to basically make it dig up nothing so you could actually still turn this thing off and on I'm gonna drag this into the right location that I'd like to um this way we could still have quite a lot of padding but we can have this in the upper right corner you can also reduce spacing to zero here there are reasons that you can use this technique I think that's it for me sharing I think we're kind of running to time Joe do you think we have time for any more questions or any more questions at all I got a couple minutes if you're on if you ever want to like reach us like we're on Twitter happy to answer or like dive in any examples you have as much as we can it's definitely fun to like share all of this with everyone absolutely thanks for all your questions too if you've got any questions let us know we can try to answer here as really we are hearing I do see a lot too I don't know if you notice this Joey a lot of people talking about independent margins and padding's as well and we're listening we're here near the figma team absolutely is aware that that's a limitation and we need to we need to get better about that one so we're gonna go ahead and just take these examples they may be a little bit messy but we're gonna publish them right to the community that way you can come in here there's some other great examples that we never got through just some really interesting layout layout things layout ideas here I also have a really fun one here where the complex but me where you can actually it's it's really wild but you can basically use boolean groups and set concerns on them that's cool this is very hard to pull off but you can actually use auto layout spacing to pull off progress bars like this especially even in their instances which isn't very easy to do in figma so we'll publish this for you all get in there dig around have fun and please talk to us on Twitter or email and whatever you'd like to Joey will you drop your Twitter account here oh sure um what is my career Joey anything's that was awesome thanks everyone for hanging out there's fun too just yeah just jam with everyone in ROG I think sir thanks for putting this all together dude thanks so much appreciate it appreciate you all we will be doing another stream won't you be doing two more streams next week so I just hit up figma com such events to to register for those thanks so much awesome thank you all soon alright see you later

Channel: Figma

Views: 89,694

Keywords: figma, components, design systems, editor, design, symbols, instance, ui, ux, ui design, ux design, product design, vector

Id: fNQRXierLhQ

Length: 82min 6sec (4926 seconds)

Published: Wed Jun 24 2020