Build it in Figma: Create a Design System — Foundations

so we're talking about design systems uh we're going to oops here we go so in this series it's going to be about five series long i believe it's gonna be five uh we're gonna build a design system and the reason i have an asterisk here is that design systems aren't just a ui kit and what we're going to see here is we're going to see some some color schemes and we're going to see some typography scales and we're going to see all kinds of components being built as we go along but it's not going to be a full design system a design system has to have end-to-end communication between your developers and actually here's some voices to consider that you might collaborate with your brand team developers contractors your entire team that's going to be your copywriting team and all this and so a design system encompasses all of these it encompasses all of the rules that are established in all the communication methods that are established between you and your developers you and your copywriters and whatever processes you might use so once again design systems are not ui kits so what we're going to be building here is going to be something like a design system but it's not going to be all the way there another thing that we're going to do differently in this stream is that we're not i'm not going to bore you with the mundane details uh let's say we create a component and then we're going to create another component like as designers a lot of our like our our day is going to be kind of methodical but also a little bit tedious and boring it's going to be creating a component and then creating another component that's a lot like that and then creating another component that's a lot like that and that can be really tedious and i don't want to waste all your time the other thing is we're doing this over the series a series of five series and it's gonna be sorry a series of five streams and it's gonna be about five hours like who the heck can create a design system in five hours so we're gonna try to do a little bit of magic behind the scenes and i'm gonna show some of the base level thinking and some of like how we create the architecture for a component or how we create our typography scale and then i'm going to swoop in imagine your cooking show where you sh you shove a dish into the oven and somehow like magic it's all of a sudden baked and cooked you didn't have to wait for that hour and hopefully what i'm going to be able to do here for you today and here for you over the next series of weeks is make it so that you don't have to wait that hour or those hours and then at the end of this the other really cool thing about this is at the end of each yeah i'm going to pre-cook the turkey at the end of each of these streams we're going to do this thing on figma community so first thing i want to do is just show you figma community and i'm going to go ahead and type in figma.com uh raji i am not the whole community i am just one member okay so this is going to be the link where i'm going to publish and you can see i've published some things here so i'm going to just put this in here if you all want to follow if you're not in the community you can always just come here and visit this and check up and see right now our community is still in beta so what i'm going to do is i'm going to then publish at the end of each one of these streams and i don't care what happens i don't care how far we get in this i'm just going to publish what we've got and we can see where we've come and then as i add more in behind the scenes baking my turkey i'm going to publish into this and we're just going to keep publishing to this same file over and over and over and at the end of this what we're hopefully going to have is like this fully baked design system around our color schemes and this and that but it's going to be a file that you now know because you've watched the streams but also you now know how to use and you can download it you can do you're familiar with the techniques you can use it for your own self it's all free stuff you can keep it so hopefully cross your fingers that we actually make something good at the end of this no promises i'm not an expert in every area there's a lot of areas that we're going to be touching and i'm going to go ahead and jump in so i can give examples of those areas but there's going to be a lot of areas like typography and typographical rhythm and spacers and spacer components and the right font sizes to choose for mobile and margins and this and that there's so many different things to do i'm going to give you just a perspective but there are so many perspectives and the web is constantly changing and constantly evolving people are coming up with new cool rules that's the great thing about this industry that i love is that it's constantly evolving so not everything i say is going to be gospel although if you do think it's gospel yeah i'm not going to blame you uh but you're definitely very wrong for believing that all right so anyways just so you know all future live streams are gonna be at figma.com events uh we're gonna post this live stream if you don't miss it all we're gonna post it on over there in a few days also if you have any feedback for me any questions about the stream there's my email please hit me up we'd love to help and just want to say i'm so happy to see so many of you from all over the place that's so so incredibly rad alright right so this is not we're not starting with a completed one this isn't the baked turkey i just threw down a couple of examples of typography scale a lot of this stuff was new to me some of this stuff still is new to me there's so many things out there to be considered so i'm just going to actually start a new page here and i'm going to call it style guide one thing to know too this is going to be an evolving living document all design systems should be these are not static this is not a print style guide this is a digital style guide and so this should absolutely be constantly changing you should be constantly talking to developers and this and that and different collaborators on your team so the first thing i think we're going to attack here is we are going to try to tackle a typographic scale we're going to start with type this is kind of like our base way of communicating uh and so we're gonna talk about that first let me bring up my browser here because i do have quite a few different uh different assets to bring you through all right so let's first talk about typescale i'm not going to go into this like a lecture but i just kind of want to get a basic idea so that we're all on the same page here so here's a typescale it's basically a series of font sizes and those font sizes are communicating font sizes as well as lots of other things there's gonna be line heights uh all kinds of things uh typography choices these things are basically when they're placed next to each other notice this bigger one and a smaller one if you place them next to each other one will be more obvious than another right that's like the reason that we have headers and body type and this and that now a type scale is basically the rhythm of how all of these typefaces work together so how are these typefaces going to be in relation to each other and there's a lot of different ways that you might approach that so one easy way and i think when i first started uh when i first started designing we'll just take this out here so we're not distracted by that let's just place this in here let's go with a classic like 16 yeah and we'll just get rid of all this i'm gonna get rid of my letter spacing and just make it expand okay so here we go this is just our our typical body text so what i want to do here if i want to create a header i can put a header like this and maybe i'm going to want to make that a little bit bigger right shouldn't just be the same size so maybe i'm gonna like double that sure let's see how that looks let's move that up there that's not bad maybe i'm gonna go ahead and change this to like a medium weight font okay this is looking pretty good so already we've got this relationship between these two typefaces right we've got not two typefaces but two font size choices and uh all of our our font weights and all that uh but the question really becomes like how do we how do we when i first started doing my design systems like when i did one at dribble and prior uh i don't know i didn't know how to do it like do i just keep doubling maybe that's the way to do it and maybe i just okay that's the biggest one that's like a title this is like a header level one that's like a body font okay now do i take this body font here and then just take it since i'm doubling everything maybe i just divide this by two uh but that's an eight point font so that's really really tiny and for almost all interfaces that's actually way too small all right so the question then becomes like how do we create a type scale like how do we what's the right rhythm and go figure there are a lot of smart humans out there that have figured out lots of different ways of thinking about this so we're not going to spend too long on this once again this isn't a lecture but let's just take a little trip through uh some links that i found so here's a material design type system here and it lets you know that sort of that rhythm and that relationship between the typography choices here headline one headline two headline three okay these are the sizes that you're going to have all right what the heck is a golden ratio oh it's this thing that we see in nature and it's actually a mathematical quantity and it describes like a lot of things in nature it's like this very pleasing thing and you may have heard about this a lot but like maybe we use the golden ratio to tell us uh how they're related to each other uh we have a lot of history let me see if i can find this one which is pretty good this one's really good i'm gonna go ahead and drop this into the chat um somebody said that my uh my keyboard my camera thumbnail is over that so let me see if i can get these things in position maybe on the bottom for y'all there you go all right so this is a good link to look at this kind of explains the typographic scale and kind of the history of it and this one book the elements of typographic style that sort of explains and it's a little bit of the bible for how like type should work in relationship to each other and it tells a lot of history of like how we kind of adapted that from books to a digital medium and how he chose those font sizes and there's lots of good uh good reading on this and a lot of the uh the relationship that they talk about is based off of like music tones and using musical ratios so you can see here that there's different applications like what if we did it with this tritonic scale or a tetratonic scale or a pentatonic scale all things i know nothing about but i did kind of latch onto this idea of the golden diatonic scale which is uh the golden ratio using that magic natural number so we're going to just take a stab at that once again there's lots of scholarship out there on lots of different methods for doing this but we're going to do a little bit simpler of a design system so we're not going to need a ton of different numbers but we're going to go ahead and do this here this golden diadonic scale thing i'll apply that in figma tons of articles out there i'm just going to drop these here for y'all just to be able to uh just to be able to read through this material it's really enlightening to me but it talks about how we use these type scales and then it talks about how like developers might use those things and how we multiply these numbers and create these harmonizing sort of uh scales so you can actually see in web design now my background is a web designer so i know a lot about this stuff this is kind of how i started not in design so i know absolutely oh i'm actually just talking to all panelists and attendees i feel so so bad i'm so sorry about that everyone i did not even honor my own advice oh i feel i feel bad i feel real bad all right i'm just gonna drop this material design one as well these were really good links for me to get through i really think it's worth putting the time in to go through these i feel like everything kind of starts with type and then moves out from there uh and it's not just drawing boxes and all that there's a lot of uh good reason behind all of these things all right so we're going to stop there we're going to go ahead and just start working on this type scale so let's jump on in all right so i'm going to go ahead for ease just work with the typeface of work songs uh and we're going to use that for all of our typography now there's some scholarship out there around like maybe when you're using body copy use serif serif's a little easier to read that's great remember this is an evolving system we can come back to it but i'm going to jump right in on this so right here i actually copied the number for the golden ratio and there it is i know it's beautiful look at it uh we'll go ahead and shorten it to like 1.62 uh and we'll just round that off now once again uh we're going to start with a base of and i'm just going to delete all these items we're going to start with a base here of 16 pixel font a lot of people say to start at 18 but 16 is kind of like that base font where they think it's like readable for most people you don't want to go a lot smaller than this otherwise it's going to become illegible for people so this will be our body size so if we want to we can go ahead and create this into be a style we can edit it later if we'd like but right now i'm just going to uh not create a style yet and start creating my type scale now there's tools that can automate this and do this but i'm just going to explain the basis of this all right i'm going to duplicate this and what i'm going to do is i'm just going to use this magic number here that we see in nature and everywhere and hopefully since we are based in nature we'll also be like hey this pleases me and so what i'm going to do is just multiply this number here by that number that 1.62 now i'm going to always start with uh 16 again and i'm going to multiply it twice again so i'm going to go times 1.62 times 1.62 boom that's going to create my next let level up in the scale now we haven't checked out font weight or anything like that that's okay and uh lastly i'm going to start again with this base one this is actually how the basis of front end development works when you're trying to scale up and down fonts you'll use that base unit where they call it a root em or a rem and then you'll multiply it by a scale factor to get your header level one header level level two titles and all that all right so i'm gonna go times 1.62 i hope we can build a lot here but wow there's a lot of material to cover i actually have to do it three times all right now this is a big one this will be probably our title now since i love and everybody knows this about me that i love working in eights so uh that would be something like this 8 16 32 64. a lot of times in digital in digital design even though these numbers are like 68.02 they do a lot of rounding on these things uh that way that way uh you're not rendering at half pixels or getting anything blurry it's also kind of a weird number to work with um with these really really like partial uh what they call them as uh decimal numbers or floats floating point numbers so i'm going to just try to adhere to this system as closely as i can and maybe with some in-between values that are all based in like twos so we're gonna say like multiples of two or four so maybe we maybe we'll allow things like 8 12 16 24 and and so on like 48 stuff like that uh i don't know if we'll go as high as 128 that's a really massive wonk and font but font size but hey all right so this one i might just actually uh make it go to 64. now you don't have to adjust these like with retina displays things are a lot better than they used to be but i'm going to see what i can do to get close to this maybe this is a 40 that's going to be a multiple of 8 and then this one's going to be probably that 24. kind of get closer to this we did see a little alluding to that on one of those uh images on those websites where they showed the red letters uh i think it's over here somewhere we'll show it later all right and then this one's 24 and then this one's going to be 16. and then we need if we have a body font we're going to probably want something a little smaller uh so remember once we get below 16 we get below that 16 number it's going to be a little bit more illegible but what do we have closest to that well let's see if this magic number yields us anything uh we can divide it by 1.62 if we'd like and whoo oh boy we're sitting at we're sitting that rounded like a 10 so i think we're gonna have to like manually adjust the system just a bit because that's just so so tiny so maybe our small body font will be this now i'm just gonna have my this is my little scratch board over here i'm just going to type in some things that i know i need now one thing to keep in mind with the design system is that you don't have to create and i and i talked with my fellow designer advocate buddy tom lowry he's awesome we talked about this in length and what we don't want to do here is we don't want to create we're not creating a ui kit we are quite literally creating a design system for an app that we're going to concept so what we want to do is just create what we need and since it's a living breathing document we're going to slowly add on as we need like facebook didn't create what it is now they created something way different day one and they've slowly evolved and iterated it this is digital product design it's a little bit different all right so uh right now i know we're going to need like a title like this is maybe going to be for a big big title for a page that could also be known as a header level one you may have seen that in html uh and then we're gonna need different headers we'll do an h2 in h3 when i first started web design it was like h3h4h5 at six i'm not gonna do all that we don't need to do all that that is a lot uh what we can also create is we're gonna need a body like a body copy that's gonna be a bit different i'm gonna hold on i have a small pet hair on my mouse that is not enabling me to do anything please pray to the pet hair gods all right all right so now uh i'm gonna just crank this thing down a little bit just because it's a note thing all right this is good what else are we gonna need in here feel free to chat what else are we gonna need in uh the chat for our body for like typography systems uh we've created a little type scale here i'm happy with that uh i think we're gonna need a small we're gonna need something like a small copy remember those things that are like maybe under a field and it says like that's instructional you know you need to do this uh or you put in the wrong password or something we'll need a small copy for that we're probably gonna need a button text like what does button text look like maybe like a pre-title that's going to be like a little bit of text above the title maybe indicating a section or something like that uh now what else do we need we're going to probably need a subtitle right like these three are titles so these are all a form of a title titles for different sections you've seen this in like dropbox paper think about that as a good example dropbox paper has these different uh headers that you can choose but they don't have a ton of them they just have a few we're probably gonna need to know what like what a uh a strong text might looks like look like or like bold uh and is there a difference between that and emphasized text and emphasized we know to be right now as as like an italic text uh what does that look like it doesn't always have to be italic it could have like a little squiggle under it or something all right so now we've got titles we're definitely going to need like a subtitle right like what if you've got a blog post or an article it's got a big title it's got kind of like a subtitle which is probably big a subtitle might even be known as maybe we can double up as like a big copy all right i'm going to pause for a second just in case there's any questions i haven't really looked at the q a but i want to make sure i answer those and then move on hi raji um the latest question is from tj and said is it best practice to create a system that works for both native and web or should they be separate a lot of these styles look like they could be shared uh the one that's such a hard question to answer because uh the web is like ever evolving and shaping in the second that you like draw a line in the sand and say oh yeah you should create separate systems uh because they're for separate devices uh then somebody comes up with this amazing blog post about how how and why you should be able to do both and here's how you do it personally i like to try to see if i can use the same system for them a lot of times you can have notes or developer notes on like what translates to what so in this case if we're actually expressing a header level one as a 64 there may not 64 uh point size there may not be like that may just be enormous for native so what we might want to do for that is do something a little bit different and create like a translation guide like hey anytime you're going to be working with titles here we'll create a mobile style guide for that and we'll probably try to address that as we move on to create like a mobile variant of these things and create that relationship cool um we have a few questions about shortcuts um is there a shortcut to double or half font sizes not that i know of not that i know of which is why i'm clumsily over in here uh just just like hacking in this field the shortcut i know is like just the division like using math in the field so that'd be like divided by two boom there's half the other thing is you can use nudge values in here so i know that my nudge value is set at eight so if i hold shift i can actually just do units like increments of eight so i can just go down but not that i know of no shortcut for that um somebody wants to know or dennis wants to know what are you pressing to duplicate your text boxes ooh yeah of course i'll do that and i'll show you a trick all right so let's say we've got this we want to duplicate it i can either hold option and drag and drag it down to here now the cool thing about that is figma remembers that it's right here and if i now hit command d to duplicate it duplicates like that all the way down and it just maintains that distance that offset uh the other thing you can just do is simply hit command d but notice you don't know where it went well it's right on top of it so i typically start with alt dragging and then i'll just awesome one more question in that line and then we'll um move on uh brad's curious how are you showing pressed keys on the screencast oh brad yeah this is cool little app uh it's right here it is i think it's called keystroke pro uh by martin lexau very very worth it uh also let me see if i can actually grab a link to it no links here uh just look for it keystroke pro worth worth paying the developer for a cool little app it also honors light and dark mode um raji i will continue um looking for questions so you can keep going all right so remember it's a living breathing system so we're gonna blaze through this really fast and i'm just gonna start creating some styles out of these and move on to our next uh our next example so uh we want to make sure we have this covered so this one here i'm going to create a style out of this one now i want this to be probably bold for my headers a lot of this you're just going to be judging by your eye and just whether you like it or not another thing is if it's bigger you might be able to get away with like scrunching in those letters a little bit uh affecting the kerning a little bit negatively here because uh you don't well there's a reason for it but i won't go into it fully in those articles there's reasonings for why you can actually do this whereas when it gets smaller you're actually better the spaces between are so microscopic that you might need to space out things when they get smaller and you might be able to space inward pull those letters tighter when you're actually on a larger uh bit of type here so all right what do we got we just want to make sure we make everything we have here i think this is going to be good for a start uh let's just make sure we have them covered one we've got this h1 this is going to be our h2 boom i'm going to make that bold as well and i'm going to do the same thing i'm going to do negative 1. now it might not maintain the right relationship doing negative one pixel because that's a fixed value so you might be able to do something like this negative point three percent or negative three percent you can put in a percent value and see how that uh how that works for you maybe it's two percent a couple of those articles also talk about what's a decent amount that you can negatively current typefaces so i'm gonna go this negative two amount i kinda like this negative two percent i think it works all right and this is probably going to be our header level three great now remember that this might also be good for big copy and this is gonna be subtitle so i'm actually gonna do two versions of this one one here i'm gonna set it to bold set it to our negative two and that's going to be our h3 but this one's going to be our subtitle or big copy which we're going to probably have to affect the line height on and then moving down we need a strong one now this is our 16 this is our base of our system where everything sort of is related to this one base so this will be our body copy and then this here will be our uh maybe our strong so we can just bold it if we're cool with our bold being that cool but bold doesn't have to mean bold it could mean bold is maybe semi-bold so we'll just go bold for ease uh we'll skip emphasize for now uh and we have the body copy already covered we have the small here now what does a button look like we're going to stick i think i have an idea around this so i think we'll do the pre-title really quick so we're going to grab this 16 and we're going to try something we're going to do our divide by 1.62 great now i'm gonna use this uh text uppercase the cool thing about this is that it doesn't just only make it uppercase in the moment it actually when you type into it a lowercase letter it just basically means always uppercase which is exactly how i want i don't care what people put into this i want it to be uppercase now on this one we're going to go ahead and space it out a bit we're getting really small here and at really small values like this we're going to have to do something to make it more legible we're gonna have to uh make it probably semi-bold or bold and then we're gonna have to space it out track it out a little bit so that we can get here let's do two percent here yeah it's not bad track it out a little bit so that space between the letters they don't kind of glob together so now we've got all of these things this is going to be our pre-title and i might actually make the button text the same as that it might be a little too small now let's go ahead and start converting these in to figma styles so that's pretty easy here what we're going to do is go to this little style widget thing here and we're just going to hit plus and what are we going to name this we're going to name this title or h1 the beauty of this if we want to is we can actually just put title we can put h1 here we can also put each one in the notes we can do all kinds of things there but if we see here we've got descriptions we can put header level one this is going to be something as we move through the stream and as we move through the series this is going to be something we're going to lean back on a lot using this description area to communicate to our developers the very things that they need to know about this all right so we're going to move through this pretty quick as well so we're just going to create the style boom i'm going to put uh h2 i think we'll just keep this maybe capitalized right there i'm just going to move this here boom h3 i do want to move along to get through as much as i can with you all right now i didn't remember what this one was which i'm a bad boy for that but i believe this is going to be our subtitle and then this is our base this is our body we're going to have to come back and edit this i know it but for now we can put in body woo hoo what happened what did i do body i don't know what happened okay this is going to be our bold text bold or strong all right now this is going to be our small this is our small copy small this keeps happening to me and i'm not quite sure what i'm doing let's make sure we've got it here maybe i hit something weird create style all right now this is going to be our pre-title now what we're doing here if you're not familiar with this what we're doing here is we're creating styles these are called shared styles uh and this way this is sort of the basis of how figma communicates like things that are linked so if i ever wanted to take this and turn this whole thing in to like body copy i could just put in body copy here and then if i ever change that this is the beauty of how these things work if i was like you know what we got word in that we're going to need to go 18 it's too illegible boom 18 it actually reflects and updates across your entire design system this can be many many many documents so this is beautiful this keeps us all in sync all right so what do we do here we did a pre-title all right on this one we're gonna go ahead and take a stab at it now we haven't created the buttons yet but we're just gonna go ahead and create essentially a placeholder for this ah i know what happened i did that search is new over here search is new and i'm not used to it but it is very cool all right so we're going to call this the biting text great so we're all good here uh we're not going to care right now about whether or not our type scale is all set in black and the reason is is right now these are linked these styles are linked just in to all of these type qualities but it's not linked to the color the colors can be a different system and we're going to go ahead and jump into that next okay so we've done a good job now i'm going to start organizing this uh you know think turkey in the oven i'm going to start organizing this in my spare time i'm going to start doing something like this with it and i'm going to be basically designing a style guide like this i'm going to create some notes and things around this so that it's very easy just creating those styles is not enough remember a design system is not a ui kit so i'm going to do things like this create examples of how you might use that and this is going to be for a button here's when to use this here's when not to use this so we're going to create that level of communication so that more people know about how to do this you can see here's how material did it there's a lot of different ways to do this all right so jumping back into this we've essentially done the first portion of our our uh segment here which is just getting that type scale down one thing i want to call attention to because i don't think we'll revisit typography for a while is body copy so let's just get a bunch of text in here and i will just take some uh paragraph text and you'll see why really quickly why i need to give this example well this is very long all right i should have actually made it shorter before i did this now the problem with this right here is the line height this is not all the lines are so scrunched together that it's hard to track and it's hard to to it's hard to figure out what line is what it's easy to get lost and so those articles that i shared with you they're going to talk about something called line height and line height is uh is different sort of what what we would want for a header is very different than what we would want for body copy as this body copy gets longer and longer we need to make this line height a bit higher and those articles talk a lot about a range from about 1.2 to 1.45 now this is kind of based on preference it's also based off the typeface that you choose so the way that we're going to take care of that is we're going to come back into this style and we're going to change notice this thing here that you can't really see anything we're going to change this we can use a percentage which is awesome because if this changes then this changes with it now you might also see that there's some people just like hardcode those things in so we've got 20 here a pixel 20 would be like you know oh 16 divided by 20 oh sorry other way around 20 divided by 16. that's gonna be a 1.25 line height now i don't like working in these actual pixels i want to work in a percentage based so i want to set that at maybe like what the article said like maybe 140 line height and you can even see here in this example that this really breathes a lot better it's easier to read so body copy is really important to make sure that you style it correctly uh that way your developers are implementing this thing all scrunched together so let's just make sure that we save that and i'm sure we did there it is 140 we're working with a linked style here so we're done we're all done with that we're going to scoot past this and we're going to move on to colors now colors are going to be something it's a really big topic as well the setup for this is that you might need to talk to your not might need will need to talk to your brand team you're going to need to talk to your brand designer maybe you branded it yourself you're going to want to create those color schemes so i never created one i don't know uh what will this thing even be i have no clue so i went ahead and just threw some thoughts here and we're going to bring it over into this file here and i'm actually just going to create another frame around this so we kind of save this and it looks cooler we're going to just call this type scale this is all going to change iterate grow be so much better once i make it so much better and as we progress through the screen so i love these vibrant awesome colors oh i actually had another one in here and i think it didn't paste in the frame uh and i would love for you all to give me some feedback on this i kind of wanted to create this bouncy fun vibrant uh lots of different colors like a purple a blue some of these colors are kind of screaming at me but i liked the spirit of this for brand colors now if we had a logo created for us we would probably be able to jump into that but we don't right now we're just doing this without a logo so we'll just have to do our best all right so i know that we have some questions so what i'm going to do is fast track this really quickly into a few apps that can help you with this stuff uh and then i'll do the rest off stream and show you what i came up with and then show you a couple of methods for creating little components for creating color swatches like this so first of all let's just say we commit to this here this is like our color scheme uh maybe we'll bring in a few of these other interesting colors uh here uh if you're ever working let's say we have a brand color and it's just this one pink let's say we start with that and that's kind of like our identifying color we have a lot of really cool plugins i'm gonna go ahead and share a few in the chat with you one i have here is called color palettes you might want to check that out uh let's see if we can bring that up if that's the right one for us right now yeah so this is one that you can look at just a bunch of different color palettes and just insert them right in maybe you're just trying to figure out maybe you are the brand designer you're trying to figure out what are cool palettes that you can work with so go ahead and look at these color palettes here i see somebody that mentioned ally plugin for color contrast absolutely we'll talk color contrast later especially when we're talking about um once we're taking these colors and then trying to lay type on top of them and how readable are they or not i've got a bunch for you like three different ones stark's a good one ally is good contrast is very good too contrast works with images uh yeah great great shares y'all y'all are doing great really pat yourself on the back so this is a really cool bug in color palettes that you can use this is a kind of simplistic approach hey maybe you're just looking and exploring as a side project or something like that or you're just starting up your new app and you kind of want to look at what you have here's one thing that you could do another thing that you can do say this is your brand color is that let me see what other ones i have here i believe it's color designer this one's really cool so this can give you different tints and shades of your main brand color so say we're making a button we know this is our brand pink but we have to put text on top of that we're really struggling with getting good accessibility we can also maybe find different tints and shades of that here we can just develop out a bunch of different uh tints and shades of that color you can also find like color harmonies so maybe there's like another different color we could use here now a lot of times your brand or illustration team is going to give you these things but i just thought these would be really interesting to share uh i especially like this blue here so i'm going to keep that so i don't know i think they just make me copy it that's fine i'll copy it great i'm gonna go ahead and paste that in here all right moving on let's just talk about beginning to start up a system like this uh the first thing that i always do is create these little swatch components so i'm going to build one right here so say i want to have some text here for my named colors i want to let people know that this is my brand color my brand pink or something so uh let's just say like it's primary color um and maybe we've got a name and we've got a roll for it so we can go ahead and just create two bits of text here and maybe this will be like flamingo all right and this is our primary color we could even use now now that we have our type system we could even start using those things so we can go here oh let's just use our small text here and here let's use our let's use our bold text here great this looks good i'm into that all right and let's just put our little color swatch there let's make it a little bigger maybe it's like a 64 by 64. it's a little square maybe we round those corners off a little bit who knows so i'm going to take these two things i'm going to use shift a to auto lay out them i'm going to take those two child elements and left align them and then i'm going to take this here and i'm going to select that and then hit shift a again to auto lay layout these things so now i've got this little frame if i start typing in it and i have a second line it'll just kind of adjust for me which is cool uh we can see the spacing in between maybe we want to do that we're just creating we're creating utilities for our design system this isn't going to be published to all your designers this is here just to help but i always love creating a little helper components along the way so we're just going to create this into be a component boom uh what is this going to be this is going to be my color swatch and i'm going to put a underscore in front of that color swatch underscore will hide it from being published when we publish this thing because this is like an internal tool i'm just going to use it internally so i might even put that over here this will be like in my design system components i'll hook it over here for now uh let's see up there's the master all right and this is the instance of that component now i can start duplicating these things and i can just sample another color oh oh that was my other brand color so this is gonna be like my secondary color and this is gonna be who knows iris of the fields i have no idea what i'm saying but it sounds great all right now the next one oh we're going to maybe use these colors i'll refine these later but uh let's just do we want this kind of cool this is going to be a peach tone and this is going to be like an accent color but we can actually put in our roles here so we can now use these components if we ever need to fix them or change them or make them bigger we can do things here now the last thing i really want to say with regards to color schemes is that definitely start off as small and minimal as you can the other thing that i want to say is get your base colors down create all the tones and shades that you need but what i like to do is i feel like so many designers just start off and they're like okay well my background's gonna be black and then my uh that'll be my dark mode background and then my light mode is gonna be white well let's just let's do an example here let's say i want to put a drop shadow on like maybe it's a dialogue or something like that and i'm putting that on top and i've got this cool drop shadow but guess what yes white does shine against this it does show here but the shadow doesn't affect the black because you've used the furthest ends of the um the furthest ends of the the spectrum here you can't get darker than black so what i always like to do is when i do my darks so let's just say we're going to do our darkest color so this is going to be our dark and we can even put in rolls for this stuff here so this is going to be our like our dark mode uh dark elements or backgrounds um but we can also in here we can put that once we create these things into being styles we can actually put in the notes how to use it so let's just go ahead and say this is our accent color once again we will grow this up a little bit over the next week so that these things have a little bit more documentation we'll revisit it but here if we just click on style now we're creating a color style let's create a color style and i want to create um we'll put peach tone now at some point do we want to give these rolls these aren't just fancy named things these these connect to something right like this isn't just peach tone this isn't just flamingo this is our primary color for our brand this is our call to action color and we need to make sure that we document that but since we're just starting we're just going to start with simple just to get these things saved we can always come back and edit them later and this is going to be our iris i don't even know if this is the color of an iris i was home schooled and my mom did like flowers so i do think that that is correct all right so one quick tip on this before we move on to the next thing and get to answers uh or get to yeah answering your questions one thing is that i just want to share this tip so let's say you want a dark and you know you want to start off with like near black one thing that you can do is you can actually create a secondary fill here uh let's just change it to a solid or actually linear would be really interesting because we can actually uh let's just say we want to have our brand color kind of mixed into the dark we want everything to feel a little bit like it feels like it's family with the brand color so i'm going to put a pink here and i'm also going to put the pink here and then i'm just going to slide that opacity slider there now watch this i'm going to i'm not even going to do it that way i'm going to draw just a box here now what i can do is if i hold i hit i and i hold instead of just clicking you may have just clicked when you eyedropper if i hold this thing you can now see that i can get like i can get things that feel almost like black almost like black but with a little bit just a little bit of that pink in there and it's not fully fully dark it's not fully black maybe the blue works better maybe i want to use that color so let me try this again all right once again i gotta slide that back because i sampled that color let's try that blue one i'm gonna hold eye and i'm gonna like slide up and down ooh kind of a lush deep deep indigo cool uh i'm gonna do that for now for now it's always changing so i'm gonna sample this color i'm gonna put in indigo oh what did we do we had two on top of each other i'm gonna put in indigo dark all right cool and we can do the same of course with our light color schemes i think this is far enough that we're going to go with colors but we're going to organize this more we're going to go further but remember always we can go ahead and create this into a style whoops i keep hitting the wrong button we're going to put our indigo here and we're going to demonstrate further as we start developing this design system we're going to demonstrate further of how we can start using things like slash naming in here so we might be able to be like ui elements or more like brand or illustrative elements and do a slash here trust me it's going to be cool when you get done with it so here's a little base color scheme for us right now that we've created all right i think i have time for some questions i do want to talk really quickly about uh just a base responsive grid that we can use uh and then the the concept of a spacer element and then i think we'll be done for the uh then we'll be done for today but ozra do we have any questions i'd love to get to those first yeah we do um let's go through and see um raji if you don't mind um sharing the color plugins with everybody again that would be really helpful absolutely and um anton had a question is it possible to import adobe color swatch libraries hey buddy how you doing um i have not i've not done that i'm not sure the format there might be a plug-in out there but i would love to uh maybe talk to me offline and we can try to figure something out because uh yeah you might have a lot of swatches in there and want to bring those in so and i don't want you to just have to sample sample sample i feel like that's a pain in the ass um along on the library route um how do you connect external libraries with design systems to a separated figma file oh that's a great question and we're definitely gonna get to it later in the stream but right now this is in drafts so the quick answer for you is this is in drafts and once i move it into a team project so i need to be on pro to be on a team project or it has to be a very small team i think our free plan allows two people um but i need to be able to be on pro or an org plan and now i have team libraries available for all my team and once i do that i can go to this little menu right here under my title and publish styles and components and in this way this will now publish it out to my entire team or org so that they can actually see those things and use those things and the way then if i were in another file so say i'm in a new draft file that i would want to use those sorts of things i would go into assets click the little team library icon and now i can bring in whatever it is that i want to bring in and i would see that here i would see oh here's my blah blah blah blah you know flamingo indigo library i want that and so you could separate them out too if you just want to have a whole colors in one file and a bunch of components in another or you could just have all of your design system in one library and then just push that out or maybe you like bisect that into mobile design library web design library and then and then like global colors you know color schemes so we can get to it later in the stream that's going to be kind of our last step where we're just like push go uh yeah i hope that answers for now um rosa had a question what's your opinion about using a method to define the type scale um so things like text small text um medium text large and etc what's your thought on the pros and cons of doing that type of naming convention yeah so i that's how i started um my design system that i built for dribble uh over a year ago and the first thing and i think it's the most important thing is be in communication with your developers bring your developers into the conversation at the beginning figma files aren't just google not all of them but figma files aren't just created uh just to sit there right they're meant to be used and read and consumed and they're a form of communication so uh first thing is bringing your developers uh and i did this and here's what i learned uh the whole medium small this and that like design systems are meant to grow and evolve and so what happens when you start getting in between values you're like oh i need something that's just a bit bigger so then it's like text small smallest text small two text smaller those kinds of naming conventions get a little bit harder to to sort of insert values into so you might work with a system that's like um let's say we're talking about colors like purple uh light 10 purple light 20 like associating a number value with that and the the higher the number goes the lighter it gets and that way you can insert values into but i'm all a fan of you and your design team figuring out what's the best naming convention a lot of times they've thought through this way ahead of you because they're implementing it into code and they kind of know about how these things work so definitely talk with your design your development team and then uh and come up with a naming convention together i think it's also still important that no matter what you need to come up with a naming convention that your designers understand so that when they're looking through these lists here they're going to be able to say oh i know what a subtitle is but if you just name it uh title medium like there needs to be like a bit of a semantic approach to this no matter what where you know and this is why i was saying it wasn't a really good idea just to call this flamingo because if you're designer you're a designer just supposed to memorize like oh flamingo means flamingo means uh primary you need to somehow associate that so you might have to put that in the name of this watch flamingo and then do something like flamingo primary or primary cta something like that thanks for the question rosa i think we have time for one or two more questions and then roger you can answer the rest of them on twitter um when do you decide when to top a line versus center line in typography is that a preference or do you have a rule of thumb it really really depends um sorry to give you depends answers uh i think that if you're talking about if you're talking about like just base typography and you're talking about laying out a blog article or something like that i think i'm always doing probably like a bottom a line um but if we're talking about something with constraints in a component figma has really changed the game and the way that we really think about typography in relation to like remember typography is coming from like age-old practices on print right and they're trying to align things to baselines so that they all line up whereas like now we're putting things into components in input boxes and we want to say like well i want it center aligned because i wanted to sit in the middle of a text box and so just the way that i think about stuff like that really changes depending on the application and the use cool thanks raji and um as always font sizes keep coming up what's your take on using odd numbers and font sizes um my take is that because i come from a development past and i know that these things need to be developed um in a way that uh typically they're they're using mathematics to describe these things and they're always dividing things by two what i like to do is always work with that sort of base of like two four six eight like uh just we're not sorry 2 4 8 16 that's sort of a system because i feel like then when you divide it by two there's no half pixels and coming from the old web and where half pixels really used to matter uh now they matter only a little bit i just like to keep everything even like having a developer work with like margins that are like 12.80 pixels or something like that is tough and it's not very clean so i try to keep it as clean as possible cool i think that's the time we have for questions today but um i'm sure you can answer that to them on twitter yep and i'm going to drop one link real quick it's something that i didn't get to in the stream but this is just a responsive layout grid and this is what we're going to be using for our design system so if you all want to look at that it's just a material design resource that way you can look at uh you can see how we think about grids now grids used to be fixed in the future and now we're thinking about grids more as like a flexible thing because our viewports are not the same there's a million different devices out there and we have to find some way to figure out how to do this so we're using a flexible grid on this system thanks everyone for coming so thanks raji all right and as usual i'm going to go ahead and post this i i don't care how ugly it is what we've created i'm just gonna post it it's a work in progress so i'm gonna post it to that figma.com raji thanks so much

Channel: Figma

Views: 843,959

Keywords: illustration, design systems, figma, figma plugin, design, UI, UX, UI Design, UX Design, UI/UX, Product design, Digital design, Graphic design, Figma plugin, Build it in Figma, brand design, color theory, color styles, text styles, team library, 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:advanced, primary_feature:components, secondary_feature:

Id: EK-pHkc5EL4

Length: 55min 27sec (3327 seconds)

Published: Fri Jul 24 2020