Build it in Figma: Create a Design System — Components continued

uh and today we're gonna do one of my favorite things is we're gonna continue to build components i i love components i don't know why to be honest i just love them uh anyway let's jump on in so i'm gonna fast forward you uh for those of you that are here for your first time uh the way that i'm kind of doing this is all a like a food network show we work a little bit uh on some of the base ideas and base thinking uh for let me make sure i'm sharing my screen i am not sure that i'm doing that but i'm making sure i am now uh i hope you all can see that so we're gonna jump on in uh like i was saying uh this is a little bit like a food network show we uh we we work on some of the base elements and explain i'll explain as i'm doing things what i'm designing and what i'm designing on the screen why i'm doing it of course you can jump in with q a uh but then when we come back to this file a week later uh glory there there's all sorts of new things that have happened on the screen and that's because i took some of those uh ways of thinking and and demonstrations that we did on the stream in the last one and then i just sort of work through all the boring details so you don't have to be bored by me just sitting here cranking out to some electronica and making text field components so let's just go through quick overview uh here we are uh here's what we've built uh in three streams so we've built a bunch of typography using the golden ratio that's kind of how our type is scaled we've given that type scale names and we've also created a bit of a guide for this this will be good documentation for developers and designers alike we also worked on a color system and different variations of those colors and shades of those colors uh so we have like a primary brand color secondary brand color and then a bunch of really fun uh colors that go along with it i like them they're nice uh then uh moving just to give you a little idea of what's over here uh this is just a bunch of assistive components these aren't components that we're going to be publishing out to our team library these aren't for our designers to use these aren't for developers to use these are just to help with the uh the design kit here so you can see here that i uh name them with an underscore that means they'll be ignored when i go to go to publish them meaning i'll drop this down here this menu and hit publish styles and components uh it will actually ignore these uh the ones with the underscores in front of them those are not uh considered components they're just local components so that's that's something really handy and good to know all right and then moving on into what we did last time uh one thing that i learned a lot through this and i have learned prior is the fact that like figma has these cool technologies uh one of which that i really love is constraints meaning i can pin uh something so for instance with this toggle if i'd like to resize this toggle here and uh resize it like this that's not great right i really want it to resize the whole thing but i want this to be constrained to the right width over here so figma has this cool thing called constraints so i'm going to go ahead and undo and if i click into this toggle knob notice my constraint is set to scale so i can actually say i actually want it to always be on the left and uh maybe on the top and bottom or maybe on the top here so left and top and that way when i actually resize the parent container the constraints of the child will take over and it won't scale with that container uh so i love that so figma has these core technologies one of which is constraints and the other one is auto layout auto layout uh just a quick demonstration for those that don't know means that i can put in my text here so say i'm going to say i'm going to create a button and then i want to hey hey i want to put a little background color uh i want to put a background color behind that button i can take these two together and i can either press this auto layout plus button or hit shift a and it will create a auto layout frame around that and now the contents shrink and grow and i absolutely love this i fell in love with this it means it empowers designers to do so many different things uh without having to relocate everything around them uh remember the days that you would have like an icon next to this and every time you would resize the button well then you'd have to move the icon over we don't have to do that anymore all that to say those technologies are really great but it's like seasoning you need to know when to apply them i don't i don't recommend auto layouting the world it's it can create a more complex component and so uh therefore harder for designers to work with and i think the one thing that i want to say about creating these things uh creating these components is that we're really building design systems not to flex how awesome we are at utilizing figma technologies but we're really building design systems to be used by designers so these things should be understandable uh much in the same way when i was a front-end developer code should be understandable it should be readable sure i could write this crazy bit of code on one single line that you can't even read that's powerful and i can flex my skills but that doesn't mean that it's the right method uh oftentimes the best method is to create things in simplicity create them to be as minimal as they can be uh and to be simple enough so the designers can understand how to use them especially new designers when they're onboarding to the system you don't want these things to be cryptic or hard to understand so with that in mind i want to just give you an idea of what i ended up doing with this text field uh the text field is not auto layout and the reason for that is because i wanted this to be resizable uh for various width uh widths i wanted to be used on a mobile device i want it to be used on a um i wanted to be used on desktop desktops desktop devices i want it to be used on grids so i want to be able to put this uh this field on a grid here and i want to be able to stretch it right to that grid and maybe put two right next to each other and i don't want to have to be battling auto layout for that i also want to be able to easily resize vertically i don't want to have to like do some interesting tricks where i have to like start typing into that and see where it grows i just want it to size to what i want it to size to so i chose to not create my text fields in any way uh utilizing auto layout and then i just had a few structures that i put within them so i've got this one structure here it's just like hey what if there's a left icon on my text and then there's a right icon and within these you'll see that it's got a left icon or a right icon i did not name this one correctly so i should just name this one icon notice that i've set up the constraints to be right in top and in that way if i come into this text field content area i can actually just choose related components here and i can choose i want the one with right icon and it should just work meaning if i resize all my constraints are just working that was really important to me to keep it simple like that so i took this approach may not be the best one but i'm gonna stick with it for now we have regular text we have a right icon only and this one is just text only for my structures uh now that's how text fields work and you can see that i've given examples of each one of these here's a text field active here's a valid here's a here's an errored field these are all the ones we talked about that you all helped me with so thank you and then we've got this disabled one as well and i decided a disabled field would actually have a little disabled icon to kind of give an affordance for why it's all faded out uh the next thing i did is i worked on buttons and the buttons here uh it's pretty simple but i've got a couple of different ideas around buttons buttons i wanted to be auto layout because i wanted most of my buttons on desktop they are going to be auto layout with the exception of maybe on mobile i'll go full full width buttons so what i did with my button and we'll analyze the anatomy of this a little bit is i created it to be a vertical auto layout button here with some spacing and padding of course and we'll just look at this instance here and i'll just get a little closer here for you and we created what's called a button content and that's what this is here this is this component here so we've got an instance of that content and within that content i've got a right icon and i've got a left icon you can see as i turn those on the button comes alive with all these little little icon fields uh but i'm gonna go ahead and turn both of those off undo what i did so this is my button and i like this button because uh i made it it's like my son i'm very very affectionate towards this button but also i love the fact that i can stretch it uh and if i ever wanted to reset it back to an auto layout type of thing so notice if i do this you might get into a scenario like this where you're like wait this button's not working i want it to be auto layout that's only because as soon as i started stretching it this way it changed mode so let me back up real quick here in this mode it works just fine the auto layout works but once i start to change the width of this vertical auto layout you'll notice that it'll go from auto width here to a fixed width and that's all that happened so i put my text in here and i simply want this to go back to an auto layout button just remember this little tip i just need to go here to this auto width and i'm good all right so we're going to get into i wanted to give you a quick lay of the land about the things that i created uh they're cool i made some icons it was fun and i'll check the q a really quick and then i'm going to jump right into making dialog boxes and fun things like that so let me see if i can bring up the q a uh yeah see i've got uh something from laura here azra i am struggling a little bit with bringing up my q a and i would love to bring up that panel so if you could help me out with that yeah i'm not sure why i can't bring it up maybe because of my other zoom lows oh good um laura missed how you switch between the icon to the right and the icon to the left so if you could do that again no problem and laura right after the stream as with every one of these building figma streams i'm going to publish this right to the community and then you can dissect this file as well but um what we're going to do here is i created three different components uh and this is just for the content part of the text field and so in order to switch left and right if i come in here here's the text field main component but here you can see that it's an instance of text only and text only is right here this is text only you can see the label here if i bring it outside the frame text field text only so all i have to do is come into this instance of the content uh that means that the container for the text field will be the same and then i'll just drop down what i want oh i actually want a right icon done and it brings in this instance here that's called instant swapping all right and i see that we have some more q a um a panel too go for it you did okay well joel wants to know can you demo how you might be able to use auto layout in a text field with an underline or a tab with an underline so that the underline would automatic size oh yeah that's pretty uh that should be pretty easy i'd be happy to demonstrate that uh okay so there's the cheat here which is like here is my text field and say i wanted it to have an underline this is the uh quick and dirty cheat uh let me go to my uh text properties here oh let's see let me break it away from here i can just go here i'm actually gonna break it away from the body style and of course i could then just go in here and underline it and ha ha look at me that's not exactly what you wanted at all but it was fun uh all right so the other way that we can do this is let's say this is our auto layout we'll just do it like we would normally do that auto layout button thing that we were doing i'm going to take these two objects uh select them together hit shift a that should create an auto layout frame let's say it's a gray tab that's fine uh another way that we can kind of fake this moving uh this moving uh or widening uh underline is that we could try this effect uh just put a drop shadow on it and then take it away from blur and then crank up that all the way on the opacity oh i did not take away my blur like that uh and something like this would work right because that would just uh grow with size now here's another method for you that may work for you as well let's take off that drop shadow and let's go ahead and just put a line here now this doesn't work right because this is horizontal auto layout let me change that to a vertical auto layout and let me change the area direction of the underline i'll put it on the bottom now there's a lot of interesting ways you can do this one is you can just set this line to stretch so anything in this container now will stretch with that and then of course you can say on this frame i can remove the space in between and that'll bring my underline up closer to the text now if i want that underline to be on the very bottom of this no problem i can do that too what i'll do is just completely strip away all of the padding whatsoever on that and i'll take this text and i'm going to hit shift a again to create auto layout within only this text here and that automatically will put on some padding and spacing here and now you can see here that it works so a couple of different a couple of different examples and another quick going over of constraints let me give you a real symbol simple demo on this i'm just going to draw a frame and i think the key thing to know here is that constraints work within frames uh within a group there are no constraints or notions of constraints groups just honor the size of the things within them that was a key learning for me when i first figured out uh when i figured out figma but let's just say i have these two objects here and i then uh hit command g that's going to group now if i move notice the size of this is is 110 by 98 but if i scale this down and move this up notice the size of that group has changed that's because groups are not a fixed size they just honor the size they're like a logical container for the things within them but they'll always change to the size of the items within them now enter frames frames are what you need for constraints so say on this frame here i wanted to be able to add maybe some text and i want the text to be here on the left my left text and i'm just going to put it here and i'm going to say the constraints are left in top so by default what happens is nothing will happen because it'll stay on the left and top side but if i move this down notice it's still staying on the left and top if i move the top side it'll still stay anchored to this left and top now if i simply just change these say i i say i want this to have centered vertically that's my constraint now as i move this that text will stay centered vertically i can also take this text over here and set this to a right a right align and say i wanted it to be on the bottom i would have to say bottom here now notice that this will stay centered this text over here i write text will now stay on the right and bottom and the left will be centered and then of course what if you have a circle in the center and what if we say we want it to always be centered now as we size this frame no matter how we size it that circle will stay centered and then let's check the last one out which is scale which means this object or any other objects will actually scale in comparison to their parent container so notice that that circle is getting smaller and smaller and it's skewing but you'll notice also that that text is not it's just staying anchored uh to the right bottom and to the left center so there's lots of different ways that we can use constraints uh super powerful once you get a hang of it hope that helped and yes uh just saying to danielle recursive auto layout yes um recursive auto layout is definitely a thing okay so let's talk about um let's talk about some things that we can make uh the first thing i want to make is just like a little alert box i want to start creating some uh more complex components and so what that means is like these are kind of very much building block components like a text field or uh i don't know a button uh maybe it's a little image maybe it's an avatar but what i want to do is start getting into like how do we make all of these things work together so we're going to do a couple of examples today we're going to do a card component and uh if you've ever seen a card component you've seen them uh on the web you've seen them probably on dribble.com you've seen them probably on behance maybe you've seen them in uh instagram but it's this general idea and i'm gonna save this little tooltip here for later for a little fun trick okay so say we're going to say these components are 320 wide and this is going to be a card component generally the makeup of a card component is that you have some kind of media here then you're going to have some kind of text here maybe it's like a title to something that's going on think about like a recipe card or something like that um my card we'll just put here card title and then you're also going to have some text down here and this is going to be more of like a description text so this will be card description this will be like multi-line text so we want to be able to create this and i'm just going to resize it there and then typically the other thing that we might have in a card component would be like a button like some kind of action so to be like save my recipe or whatever who knows what it would be save like uh whatever so i'm just going to right now just take an instance of this main component and i'm just going to copy it and i'm just going to put it here uh and we'll just say this is like our cta maybe there's also like a cancel button as well so we'll use a secondary button over here for the cancel so this might be over here like this like a cancel now notice those buttons were made with auto layout this is exactly why we did this the way that we did is so that they would size appropriately okay now in order to make this component we're going to do a few things to it one this is going to be what i want to call a media component and a media component is basically like a little viewport for an image so we want to have an image that we can have in here and we want to be able to uh maybe there's uh some text on top of that image who knows there's all sorts of ways that images are used on the web uh there could be uh used in a video overlay and a video behind it and then you've got a little bit of a darkening component now this isn't gonna be super pretty but we'll go ahead and see what we can make see if it can be pretty so what i like to do is called a little challenge called will it auto layout so i'm just going to take everything that we see here in this frame and i'm just going to add auto layout to it and just cross my fingers and i hope something happens good well we we certainly have something happened uh let's go ahead and adjust our padding to 16 on the inside i like that and then we're gonna honor uh our our border radius for our buttons are eight and so what we want to do is make this a little bit larger on this card component so maybe like a 12 or 16 so that they actually it looks like it's scaling down the borders within uh sub objects uh respectively now this isn't too bad we did pretty good great job everyone you did great uh let's let's mess around with this a little bit what happens when we oh wow this is horrible okay let's fix this so the first thing i notice is that this description needs to be wider this is a beautiful feature of figma is that if you take this vertical auto layout container if i select this child object notice this other uh this other property stretch left and right and that's exactly what i want i want to stretch to the full bounds and then this card title i want that to stretch as well and then i'm going just uh bring in this just a bit uh we can stretch this but we'll create a media component for it but we'll stretch it right that stretches too what i notice now is that we have some internal padding that is that is not great so i'm going to go ahead and add in some space in between these things so maybe it's eight and i'm holding shift and up or down because that uses my big nudge amount you'll find that big niger mount right here under preferences nudge amount i was doing some icon design the other day so i'm still stuck at 0.5 we're not going to use that anymore i'll do one in 8. and the last thing i see is that these buttons are not behaving in the way that i want them to now there's two ways to approach this one let's go ahead and try the simple way i'm just going to put an auto layout container around these two and i'm going to say see is it around the two buttons indeed it is and i'm going to put horizontal let's change it to vertical and then to horizontal okay now this is one way that we could do it we just put a horizontal auto layout unfortunately if we move this this way we'll see that the buttons don't do much uh that's because it automatically sends space in between is six is 165. let's try a 16 pixel gutter between the two now this isn't bad uh depending on your design system we may not we tongue tied here we may want to align this right and that could totally work so in fact i think we might stick with this but in the case of maybe we wanted the buttons on far ends of the screen to keep the cancel away from that in that case it really depends on the buttons that we're trying to design in this case imagine this was used for a delete operation or a modal dialog that said like you know delete my files forever or please don't delete them we wouldn't want those buttons to be closed in this case this is for a media card component it's going to be a feed of information i'm not so worried about like these two being that close to each other okay so we've got these two buttons let's apply our style to this so this stays in sync with our system i'm going to use my shared style here and i'm just going to use my body font for this or my small we'll feel it out here and then the card title i'm going to use my uh my either bold or my h3 this is feeling a bit large so i'm going to probably just use my bold or we could have made an h4 style as well and that would have worked this seems like it's working out pretty good now let's test this out so far everything's working really really well yeah i'm really liking this okay so now let's go ahead and add a little style to this and then we're going to create a component out of this and then we're going to make a media component for this thing as well so i'm going to move this out here this will be our image media component we'll convert this into a component here by clicking the component create component button here and i'm going to call this a media let's just call it a card component there we go and we'll go ahead and make this into be a component as well and we're going to call this media component now i'm going to need a cool image to make i feel like i can outsource this to you can i get a cool image to throw in here to make a really rad media component and i'll try to see if i can address any oh yeah eric i hope i've addressed your question uh possible to hide the video on the top right so you can see the panel a bit better i think i moved that i hope that's the case if i did okay and we've got another question here from lon says his question is at the top they have a fairly large design system it seems like your training suggests putting the whole design system library into multiple frames on one page oh okay so lon this is how we're this is what i suggested uh in the beginning of the stream when you're first building your design system i absolutely suggest working all within one file uh because there's so many things that are moving uh so many moving uh bits and pieces and parts of this thing like what if i change this media component but i want to see the way that it reflects in this card and is that right like say i added a border radius here and maybe it was really large okay and i add it into my card component i'm going to use my arrow keys to bring that into the top stack of auto layout but i wanted to see that but if i was developing the media component in another file and then this card component i would have to push my updates and then review my updates for us right now we are using one file but we're using that only because we're in the beginning stages of building our design system as soon as we get to the end what we'll do is split things out into logical pages frames and components and then we will publish that and that will be in a completely different file so organization later on is a whole other topic but yeah i don't suggest uh having everything on one page or everything on uh one frame or anything like that maybe when you're just building okay thank you so much uh to julia who uh has created a nice little uh nice little image for us now all i have to do in figma is when i copied on my clipboard i copied this cool kitty image i'm just going to throw it into this media component now because i copy pasted this main component into this card what you'll notice is that i have an instance here it's going to inherit all the stuff in this media component so we're going to see like side by side what's happening to this so the first thing we're going to do is create a a rounded radius on this now i'm going to take this rectangle this is going to be my base i'm going to keep this down here i'm going to put a rounded order radius of 8 here and then i'm going to add a couple of constraints to this i'm going to say should it scale so if it scales this is the way it'll work and i kind of like the way that works i can also have i can set it pin it to the pin it to the uh the left and right and top and bottom and that would also work for me as well so i'm going to do that and i'm going to just name my layers here i'm going to name that to image the next thing i'm going to do is i'm going to actually create a image overlay so this is going to be like a tint this way if the images are too light and we're going to put some text on them i want to be able to have a little bit of a tint to those images so we're going to do just your standard we're not going to get too wild and crazy on this stream i'm just going to do something like this a gradient and i'm going to flip that gradient around and then i'm just going to fade it way out so that we have a little bit of a gradient on the bottom here i can even pull this down just a bit and just see how that's going to look on top of the image now you might be noticing that this gradient is doesn't have a rounded radius but yet this one does one way that we can handle that take care of that is that we can actually just come to the image and take off the border radius on that and we can actually apply if we hit clip content here you'll notice that the border radius was already eight so if i hit clip content boom i'm in i'm off to the races and i now have a rounded border radius uh media component i'm also going to have a tint here and then put if i could type tint that would be wonderful and there might be some more things within this the reason that i'm suggesting creating a media component for this is because i've done this quite a few times and later on i have a million different cards with just an image element in them i'm like oh we need to change the border radius of that well how do you change it on a thousand different images enter the media component at least you can crop this way we can add a little bit of a tint on top of something maybe there's an inner border for instance let me see if i can find a white image um and this might really illustrate the point uh and a lot of images that we know of uh are white they have a white edge to them so i'm just gonna take this one here from dribble and i'm gonna add this image in here sorry about your kitty i'm gonna go ahead and add this okay so you can see here now if we turned off the tint this white image bleeds into the background of this element now that might be fine in this case but it might not be fine in all cases so there's a lot of different approaches so when you think about uh like apple music their approach would be to put a small faint little like border so the way that you might do that there is to add a stroke on it and add it to the inside and then set it to like .5 pixels and then really fade that thing out really fade it out just so that it's just enough to where you can make out the edges but it doesn't really taint the image too much now in this case with the stroke what we'll need to do is actually add the border radius back on because it's cropping out our corners so this would be more of like an ios style or like a apple music style technique uh but this works for us we'll go ahead and go here i'll turn on the tint too why not um the tint we'll use later and we'll go ahead and drop that down to ten percent there so here's our card component uh the great thing is now we've actually uh made everything stretch except for our brand new media component so i'm gonna have that stretch too so let's see how that works out is it working how we want it to looks like it's not and this is why i say build everything in this file and not out in separate files that you have to publish that way we can actually like start to diagnose what happened with this thing well what's going on with this image it's left and right and top and bottom that seems to be working fine aha we didn't set our tint to constrain itself to the left and right and top and bottom of our container as soon as i and i love this moment when i'm making components maybe this is the reason i like it uh as soon as i come in here and i set this you'll see over here that the tint isn't applying across the whole image and the second i set it left and right boom it's fixed ah glorious okay so now we've created a card component component i love this this is great let's just change our text fields to the right fills we've already set these up in our shared styles so here's our title this is our body we've already got that here this is set to text body and then of course here is going to be our headings great card component is done now let's start working on our next component let me see if i can answer any questions we've got quite a few and then we'll get to a dialog box component and then we'll also get to this really cool tooltip component i'm going to show you some cool ideas around that uh pouya asks is there any kind of test that we could do to components like software engineering any kind of stress tests integration tests fuzzy tests uh i don't currently know so first of all figma has this amazing ability for internally you can create your own plugins in fact it's super duper easy i can literally go to my plugins here and hit plus and they give me a sample component so you can actually start to see the api to be able to like stress test you could build your own stress tests now for all of you that don't have a programmer handy or you're not the programmer uh there are some um i believe there's a plug-in called content reel so i'm just going to uh i'm going up i'm going to type this in it's called content real it's a really cool plugin that allows you to be able to take in a ton of different types of content uh text dynamic you can fill out your own text so you can get larger bodies of text or text that are really short and you can actually say apply it to all these components or apply it to all these fields and in this way you can basically take a ton of instances and then stress test them at a different image what happens when you make it wider there's a lot of different ways to do it and a lot of different plugins so i would say maybe through puya through your plugins that might be your best bet okay anonymous asks uh and then i'll get back to i'll get back to uh to this uh building but anonymous asks one thing i've really struggled with is making sure the developers and designers who use my system are using constraint consistent margins between components so for something like a vertical form consisting of many differently sized components is a good method to enforcing distances so uh anonymous i i can think of quite a few different ways to do this one is let's just say in this one and i'm kind of feeling this way myself uh let's say in this one that we're feeling like this content is a little cramped like i don't mind uh the padding around here but the content itself i don't even mind that the buttons down here it's just this content i want a little bit more breathing room i could create an auto layout frame around this and then add uh like a vertical padding in here like say maybe i wanted it more like that so so now there's an eight pixel padding between this and this but in this there's more padding so one thing that you can do in figma is that your developer could come in here and hold alt and notice when i hold alt or option you can actually see the spacing between objects so when i hold that card title and then i bring my cursor up here to the image i can see that that's 16 pixels away and so that's one way that i could say to communicate to my developer hey this is how we can do this now here's another method for you that might work for you as well and i really think you're it's a conversation you want to have with your developers just to see how you can get on the same page another way that we can do this and i think i began some of this work here yeah is this idea of space or components so let's say you set up a little system of like these are your spacer components here uh you have like an eight by eight and you have a 16 by 16 okay i'm just going to copy these i'm going to bring these on up to the card another way instead of using auto layout where you actually have to manually type in these values would be to just like destroy those values altogether and then i take the spacer component and i can come in here and i can actually put it in between here uh and then say uh i want that larger spacing above this i can now take this here and put that larger spacer and then that larger spacer at the bottom now these i colored just for the system but if i just turn off their fills here actually they're not going to be there i need to fill them i need to change them in the master component we won't go down there i'll just turn off their fills for now so this is a way that you could describe your system which honestly is kind of like the way they might pull it off in uh html or in ios so in this way they could actually see oh okay this has a space for a one and of course you look at spacer one and you know oh it's eight by eight but in the main component i could actually put in a description here and it might say maybe like a variable name for programming so it could be like spacer um padding small so that way whenever they see this component they can actually instantly infer that oh yeah i get this this is that this is that small spacer and notice here even in the instance it tells me padding small so that could be an immediate cue oh i know the distance here it's padding small i'll go ahead and apply that in code all right well let's move on and uh let's i think the tooltip example i think will be the best uh just because it's so different uh the the dialogue component one will be mostly the same as what we've just worked on and i want to show you all something new and fresh and hot and then leave some uh leave some room for uh q a so let's work on a tooltip component okay so this is the trick uh and i'm gonna show you the trick later it's really really cool uh but let's say our tool tips we know we want to be about 48 pixels tall about the size of a button uh because they're actually a ui on a light background most likely i want them to stand out and i want them to be pretty pretty uh pretty dark so i'm going to go with this dark color here i'm going to go ahead and whip up a tooltip component so the first thing i want to show you how to do is i love making these ios style little rounded beaks uh i don't know if you call them a beak where you're from but i call them a beak they poke out they're kind of cool here's a really cool way to do it i remember trying to make these things in photoshop illustrator and i was trying i was like pulling out my hair which is why i don't have any hair left uh but anyway if i come here and i just draw a line like this i draw my little triangle the cool thing is i can actually double back and then connect this one to here so i'm just going to close the path now that doesn't look like much but if i select these three points here when i'm editing a vector notice as i enter if i enter different amounts for this border radius and i can even change independently there notice what i've done like i've made that beak in like next to no time if i hold shift x or hit shift x i can swap the fill in the stroke and i'm off i'm done i've made my beak i'm so excited about it i can even create a little helper component out of this and i'm going to call this a beak and i'm just going to bring this down here now here's how we're going to set this up let's just set up the base tool tip without the beak so we don't get confused and get ourselves lost so i'm going to put my tool tip text here and we're going to do this the same way as we would do auto layout i'm going to change my text color to my light ui color here and then i'm going to do the trick that we've done a few times before i'm going to hit auto layout i can hit shift a or i can just hit plus and when i adjust a few of these things here i don't want this much uh padding so maybe i want uh maybe like 32 if you have a little breathing room on the sides and then yeah maybe maybe 12 maybe what do i want maybe 14 yeah okay this is good enough and i'm just going to create this into be a component right here and i'm going to call this tooltip great now we just need to get that beak in there maybe put a little bit of shadows on it we got ourselves a tool tip pretty rad okay so let's add a shadow let's just see what that might look like and add a shadow here now if this shadow becomes a pretty consistent shadow all ui elements are at the same um let's say all small ui elements that pop up in front of you uh have a certain amount of shadow i would highly suggest uh creating those as an effect style so if all of a sudden you say no i want the depth of my ui to be much like i want these things to pop out at the screen uh cool then you would go back in there and change that so for now what we're gonna do is we're just gonna feel this one out maybe a little bit more blur you know just getting getting our ui artistry on awesome awesome hey heck maybe i want another drop shadow because i'm kind of thinking i want like a gradation so i want like a maybe a two pixel just kind of like a subtle sort of like a little darker right there yeah i feel like i'm a good designer already it's amazing okay so say this is like our um our ui alert whatever our dialogue shadow um we can give it a name here we can say um alert shadow now you can see how i've done this after i publish the file you'll be able to see what we've done before too on this uh inset text area notice that the uh the little inset wells for these toggles and these check boxes really follow a consistent pattern and so what i've done is i've done that here i've created something called a field inset and then if i ever wanted to change these notice uh this is the power of styles i can come in here and change this and say oh that's got to be a lot darker and notice that it darkens across all of these values it's because it's bound and it's a shared style with those things okay we're nearly there and on to q a for you all i can do some demonstrations now we want this beak to be able to like be under here so let's just give it a try now i'm going to just drag that in there oh no what happened i'm going to change it oh it's auto layout okay let's uh let's let's set this to vertical auto layout this is how we might step through this process i can even center that beak cool wait we already talked about this with the tab and the underline from our our brilliant questioner so what i'm going to do because i want my tool tip to hang off of this thing and i want a tool tip to be able to grow vertically and horizontally here's how i'm going to work this i'm going to take these styles for the tool tip and i'm going to i'm going to command or control option c now that's the same thing as going here copy properties and i'm going to add it to this just this text copy paste paste properties oh my bad let's put an auto layout we're doing that recursive auto layout thing again i'm adding it to that now what i'm going to do is get rid of all the stylization on this tooltip i'm going to have it styled on that on that uh this sub object here this frame now i'm going to remove my padding again just like that example that i showed earlier but you'll notice all of a sudden i remove all the padding and this all kind of lines up for me now i can use selection uh selection colors here it notices within this object there's all these colors now this light is the text this fff is the beak so all i have to do is just change that to that and it syncs up there rad we're doing great oh i want to take this now did we create a yep that was an alert shadow i want to get rid of that i'm going to put that on the parent object so the beak gets the shadow because i want that beak to have a shadow too you know dang it so let's just say it's already on there now the beak has a shadow great you may notice that the shadow gets a little bit clipped at the edges so make sure clip content is turned off now we have a tool tip that works wonderfully now the holy grail of tool tips and i love i love uh i love showing this trick now what if i took this beak and i wanted to create this to be an extensive component i'm just going to rotate this because not all tool tips are top aligned right this is the bottom beak so i can put here bottom beak i can put here top beak and due to the wonders of auto layout i can actually take this top beak and turn it off and notice it just automatically resizes so at any given time i can actually say i want this tooltip component over here with all my new tooltip text in here i can actually say i want it to be on the top and i can just change up my tooltip component like that now holy grail how do we do this i want to be able to now put a beak on the left and on the right too what happens if i want to be able to align this thing way over well i can just do that i can align it that way i can align it that way oh that's glorious now i just want to see if i can empower this component to actually work on the left and right sides given the time that we have left i am going to save that to put into the file for you to dig in to later i'm going to take at the end of the stream i'm going to put in the trick for the left and right beaks and then i'm going to publish that and you can see it on the community i'm going to go ahead and take a little bit of a break for some questions i want to make sure that i can uh help you out you know with things that you're working on okay so gustavo asks how do you know when to put a bg as a fill on the component itself versus drawing a bg shape within the component uh gustavo i don't have a my answer is it depends i always find that i want to put it on the component to keep it simple uh and what he's talking about is maybe i could just put a background on this like an image if this was my media object boom i would say uh it's hard to know it's really hard to know whether or not i should put it here uh i don't have a great answer i don't have a great answer but oftentimes if you have to stack effects and layers and things upon that you might just have an image background there so i'm not quite sure if i can answer that that great all right so fernando asks can i add auto layout to a button and change the width on another instance yeah fernando in this file uh when i share it you can see that how i pulled that off here here's a button it's got auto layout the secret here is that i have an auto layout horizontal child and then on the actual button it's vertically horizon or vertically auto layout so what i can do here is actually put in my text but i can actually and strangely enough this should work too right i can actually oh i did not actually make that work okay well either way the example works to where i can still change the width as well on this and then on this instance i can say nope i don't want to so we can do that uh answer is nested auto layout uh i'm going to go with some towards the end there uh oyasanya said hi can you show me example how to create swap instances yeah and so building a design system it's so important that you educate your designers and you know how to swap instances of things so for instance let's say i have this button here i'm going to bring this over here it's a button for my design system and then i've got this other tertiary button style now let's say i'm working on this and i'm saying uh okay um submit it's like a submit action for my form and at some point i realized oh the submit action isn't really a primary cta i really want like a a less emphasized version i can actually go here and on this instance menu i can actually go change that here to tertiary and it'll actually swap it out here uh the key thing to note is that and you'll see this in the file too as i publish it the button naming uh this is how you can take advantage of that menu notice that i've named them button tertiary button secondary and i've also named them incorrectly that's okay but notice with the slash naming button tertiary button secondary that slash naming that groups them all into the same logical grouping and that means that when i do that swap so if i'm doing that swap here i can actually just change it to these i'm not inundated by this massive menu of all these things it has related components and it shows up in that related components area uh jean-michel says to the squares that you're using for padding not hinder the handoff up personally i would think that they would i know that some developers use spacer components uh that was just a specific answer to a question uh from somebody on the stream and i felt like i wanted to give a few different tools uh one day in the in the hopefully not so distant future what would really not hinder development handoff is that these uh values here let's say it's a padding for a dialogue or a card i want to be able to bind that to a variable so i want to say that this 16 pixels is actually bound to like a token or a variable or it's synced up with my development uh like our css so we don't have a great answer for that right now but there are some ways that you can work with it in your current design system yeah alexandra i totally agree like i'm i'm i'm hoping oh yeah sonia i'm i'm trying here i have a weird name too so i'm trying to keep that keep trying to try to say your name as best as i can um okay fernando asks can i change images from instance components yes you can uh that's the answer so let's say we take this card component right here and i now have an instance of it we can see it over here in the uh in the menu right there and let me get another image and i'm just gonna copy it and slam it out here okay so we've got this lovely image here and let's say i want to put this image into this instance one thing i can do is just click right here copy out the fill which is kind of a cool little way to get to it and i can actually come here this is an instance override and i'm going to paste it in and it pastes right in and then of course when i stretch it should still try to fit within that as well so there's the long and short of it uh the other way that you could do is just simply copy the image and then command click on this object and paste in that should work or the other way that you should be able to bring images into instances like this is that there's actually a file place image command so say i've got a couple of different components here i'm going to go into here i'm going to go file place image and let's say i have two images i'll take this and this i can actually take these and place both images in my components in that way too so hope that helps all right i think i have time for one more and then that's going to be it for our stream we've got about an hour so let's see if i can anonymous ask could i have added the stroke to the media component instead of the image to inherit the border radius absolutely we also have a spread shadow support now so i could have used maybe something like that as well so yeah a couple of different options around that but very smart of you uh maybe you should stream too uh let's see here drew has one last one we asking in case it got lost can you talk about nesting states inside of components do you recommend creating a component for each state uh once again the answer will always be it depends i do i do recommend nesting um potentially nesting states within components and that's exactly what i've done here so if we notice that i created uh this text field content and i've got three different states of it i've got a text i've got a right aligned icon and a left icon and essentially what i did here is change that state so within the default it's text only but in the valid valid i always want to have a check mark in so i went ahead and took that and changed that to the instance of right icon instead of text only so uh absolutely you can do that and i recommend doing it to your heart's content i think it just really depends on the situation so anyway um i think that's all i've got for now uh i really appreciate y'all jumping in i'm gonna do exactly what i said i'm gonna make this tooltip component super beefy and give it all the arrows everywhere uh up up arrows down arrows left arrows right arrows i'm going to give you all the arrows and then i'm going to go ahead and publish this i'm going to give you a link right now uh that link is going to be figma.com uh raji that's going to be my community handle and if you'll go there you'll see it in about 20 minutes you'll see this file pop up i'll have a brand new version of it up for you and then of course all of our future live streams are at figma.com events go ahead and register for some more of them come on and be with me if you've got any suggestions or ideas or any feedback for me i would love it it's rking figma.com thank you so much for coming learning with me building with me uh i can't wait to show you more thanks everyone y'all are great

Channel: Figma

Views: 103,868

Keywords: design system, design systems, figma, components, symbols, constraints, product design, web design, design, product:figma_design, audience:designer, language:english, format:standard, produced_by:design_advocate, theme:design_systems, event:none, series:build_it_in_figma, type:outcome_tutorial, level:intermediate, primary_feature:components, secondary_feature:

Id: XCsVDvvlz4E

Length: 54min 38sec (3278 seconds)

Published: Tue Aug 18 2020