Understanding Atomic Design Methodology

You shouldn't go try to learn design systems unless you are tight on this atomic design strategy. And the reason why is you should be designing like this whether you're designing in a design system or not. But even beyond that, if you're working inside of a design system, you need to understand why you're building things the way you are. What we're going to do today is we're going to talk about atomic design methodology and why this is such an important process builder for you as a designer. And it's going to level up your skills. and get you ready to be able to be a design systems designer. So without further ado, let's talk about it. So basically, Atomic Design was written by this guy, Brad Frost. And Brad Frost is kind of like the foundational person who was doing design systems back in the day. But him and Dan Mall teamed up, and they kind of built out a bunch of design systems for large companies. And we're kind of the people who coined the term design systems and started it all for us. But... Brad Frost is the guy who kind of wrote it out and gave like that, you know, kind of the ethos of how we design as designers and how we should go about product design as far as iterating and making it where we're building inside of cohesive teams. So, you know, he kind of goes in here and I'll share this chapters with you on the links. But basically, yeah, we're kind of talking about, you know, he kind of goes a little chew with it where. We're going into, you know, obviously, you know, we could break this all down into a periodic table of elements. He's taking it as far as he wants it to go. But for me, this is the graphic that's most important. We are, at the end of the day, we want to design stuff that's consistent. If we want to design stuff that's repeatable and works within a system across the whole product. So that way, when we're making something new, we're not just starting from scratch, but rather piecing things together. We need to build in this way. And the way we do that is through having pages. Those pages are built up of templates. Those templates are built up of organisms, which are, and then those are just groups of molecules. And those molecules are groups of atoms. So how does that translate into the design world? Well, let's take atoms, for example. So this is basically like the thing that is broken down the most possible, right? So we've got text labels. But then we've got input fields and it wouldn't be placeholders of the input fields because, you know, at the end of the day, that would basically just be a rectangle and a label, right? Which we've already got a label up here. Same deal with buttons. You know, buttons are kind of like the lowest level of design breakdown where you can have a button, but without text inside of it, is it really a button or without an icon inside of it? Is it really a button? It's really just a rectangle and then text, right? So no, those two together make a button. And so those are the atomic level of our designs. And then you piece those things together, the label, the input, and the button, and together they make an input field. Those input fields can be placed inside of a larger group that is going to be repeated across your website or app or product. And that looks like this. And then those are used and translated into a template, which is then used across the board on other. sides of the product and website. So you can see here, like this is how it translates and fits alongside of everything else. So you can really see that this is what design systems really are, right? And I've actually like gotten an argument through comments on threads once where it was all about like, Hey, like, why are you even talking about the semantics? Like, you know, design systems is atomic design and atomic design is design systems. And the truth is, is it really is not right. This is a methodology of how you go about your design approach. Right. You, you, and as long as you stop really at like the organism level, um, that's where once you get beyond that, it really gets into design system workflows and really like, and you know, cause you're not going to, when you're piecing those organisms together inside of groups of organisms and that's really just screens. Right. Uh, and so if you're going to take those screens and then work those into repeatable screens that have variants and stuff, that's when you're really getting into. Design system weeds that goes beyond what like what the atomic design in my opinion needs to go, right? Obviously if your design systems designer and you're working inside of a design system You need to be able to work on all this stuff But at that point it's kind of like the distinction in my opinion the distinction goes into your doing workflow work and Collaboration work more than anything because you're not really designing anymore. You're piecing together things documenting all the variants and everything like that. And that's where you're getting into design systems work and making sure that those are built properly in the way a design system needs to be. But again, You don't need to do that on, you don't need to take it to this level on your atomic design system. You could have a mini design system, which is an atomic design approach, right? And you could even have that outside of components, which I definitely don't recommend, but you could definitely do that. And it would still work because again, this is a methodology. This is not a workflow tactic. This is a way about going about the designs we want to do, right? how does all this translate you know i'd love for you to go read more about all of the details in here but i just wanted to get through the general idea to be able to show all this stuff to you this is a great example right here too where we've got if we take it backwards from the old old version of instagram uh where we've got a page we've got a template which is basically a page but this is just like you know kind of like more like a piecing together of components version of the page and then here we've got the organisms which is you know, the header group, the, you know, the whole post itself, and then the tab bar. And then within the post, we've got this, this bar, which is all about like the person who posted it, when it was posted, the engagement points, the likes points, the comments, and then those can be broken down further, which went to just text and different types treatments. And then additionally, all the buttons and interaction points like that. So you can see this is a great example of how to like use atomic design methodology. And now what I want to do really quick is just go through this design. And I'd love for you, if you want to attempt to do this, I'm going to give you these files for here. All of this stuff is not in a component outside of just this one. And actually, I'm going to break it before I send it over to you guys. So you've really got to go work in here to make this an atomic design system. I'm just going to mess with you guys. Here you go. Yeah, cool. Okay. Yeah, it seems like everything else is not componented. Okay, cool. So with all that said, what I want you to do, if you're ready for it and you think that you know about atomic designs, I think it'd be a great exercise for you to go in here and try to make all of these atomic design points, right? Turn these icons into individual atoms. Blend those together into an icon molecule. Place those alongside of text atoms. And these menu atoms and this timeline atom, mix those together into a card or molecule, and then mix those cards together into a component or organism. In addition to this, try to find ways to make a little variance. So this here could be a component on its own, where we've got, you know, this is about to go expire on, you know, January 1st, 2021. But... If it already expired then it should look a little bit different right you have a different treatment So go ahead and break those into you know Those atoms that are going to be repeated as you can see across different pages right and then work through that But what I'm gonna do is I'll go ahead and do that ourselves here So if you want to do it on your own go do it pause right now and see how I do it if you'd like To follow along so let's dig into it. So first off. I want to go ahead and grab this whole list I'm going to duplicate this, I'm going to pull this out. And now I'm going to ungroup all of these here. So we've got all of our little atoms of icons here. And what I'd like to do though is let's wrap these inside of a frame. I think I might have broken one thing too far, but that's okay. I'm just going to go in here. This is a repeated one. So we've got our frames. Now the trouble is, is they are different sizes and this is going to really mess up our atomic design system. But additionally too, it's going to mess up development. Developers are going to be really annoyed because they want to just come in and export really quick. And if it's not the same size, it's going to mess with the layout of everything. So how do we do that? Well, I'm going to go ahead and grab all these, press enter to be able to get our constraints. And the trouble is, is they're all set to scale. So if we If we scale it out like this, it's gonna break and look really wonky. All we have to do is set it to center center and then now we can set this to like say 16 by 16. Oh gosh, those are bigger. Okay, 26. Let's go 30 by 30. Perfect. And we'll center it. Center it. All right, perfect. So now we've got our icons. Let's see if we can we can set them down even further. Maybe 24? Oh, jeez. Yeah, no, that's breaking. Okay. Yeah, let's do 26. 26? Yes. Oh, the pineapple's just too big. Okay. Well, let's size it down then. Bum, But see, this is like, you know, as I'm doing this, I'm going to walk through some thoughts where this is okay that you're doing this late in the game. In my opinion, if you're too focused on the system too early, it's going to really mess you up as a designer because you're going to be constantly going back and forth. You're going to and whenever you want to try out a new layout when it's an early stage product or project. There's so many times that you need to go back and make changes. But then you're going to be focused on fixing the components rather than quickly designing and sketching and coming up with new ideas. And so that's the trouble and the balance with working in these systems is, you know, I might not take it this far before breaking it into components. But definitely at a wireframe stage of this should still not be components. But. And even then even when we're adding icons it might be worth it to not have them in components until you know for sure that Like the sizing of the icons and how they're gonna be because otherwise you're going to be breaking these components constantly Okay, so we've got our icons perfect. I'm gonna go ahead and create a component set. We'll rename this to icons Okay, this is gonna be carrot press tab Soup, I guess Pineapple, tab again, chicken, milk. Perfect. So we've got our icons. We also have a few other icons. We've got this one. We've got this one too. And then we've got the time as well. We should probably, you know, so this is a side. Is that like a distinction that you need to make a call on? Is you could create, even though they're the same icon sets, you can create different atoms and variants of those atoms, right? And that's really the distinction though, is can you use these interchangeably in your designs? Can you swap? a carrot for a shopping cart? Can you swap a time for a shopping cart? Not really, right? But you can kind of group them together in a component system. But again, that's not even really atomic design at that point. It's because atomic design is the lowest level parts, right? And so really all of these should probably be their own components instead of component sets. So We'll call these instead with all that in mind, we'll call these food icons. We'll call this. And, you know, I think for me, I might group these together simply on like the areas that they're going to be used. So like this plus button is a button, right? This one's another button. This menu thing is a button as well. And then all the tab bar buttons too could be. Could be nav buttons as well. So I'll probably group all of these together. I'm going to go ahead and press enter. Oh, let's make sure that all of these are a frame. Press enter, center, center. Let's see, 30. 30. Okay, cool. So now we've got our spacing properly set for our nav buttons. I'm going, I forgot to do this one too. So I'll go ahead and press that center center. We'll go 30 by 30. Is this centered properly? Group that center center Okay, cool. So grab all these create component set and We're off So we're gonna call these nav buttons Okay, and then is it the shopping cart is a nav button as well so instead of Look at that. I had some properties in here too. So let's just go ahead and reset those So I'm gonna put all of these in a tab bar Let's go variance tab bar true boom boom boom boom Those are all tab bars True, okay. These are not tab bars, so those are going to be false. I'm going to set this one to home. calendar shopping or list cart and settings okay this is set to false and this is going to be tab bar icon so then we need to set a new property and we'll call this nav button We'll call these buttons in general. So this is going to be a scan QR code. This is going to be a add. Okay. And yeah, each of these tab bar icons are going to get their own active state. But also, if you notice, this is active state. This one is the same icon, but it's not an active state because it's not a it's using a different context. And so because of that, it's worth even though this might be the same exact icon. Ultimately, when we get there, I'm going to go ahead and create a new nav button and call this. Okay, and then lastly we're going to put this clock. This clock is reused a lot, so I think it's worth calling it its own component. And we're going to go ahead and make this a frame. And then Command-Alt-K or Control-Alt-K. And we've got a clock. So we've got clock, food icons, buttons. And it's probably worth, like if you're going to create a component set, it's definitely worth being more strategic. and thoughtful than I did. I'm just doing this together to be able to piece this into atoms. But yeah, so now we've got this deal. So we've got the timeline set up. We do need to set this up as its own, you know, like title kind of, or text type of atom. This is another text atom. Let's see where we're at on the sizing. These are enter these should be open sans. This is why you do things inside of atoms a little bit earlier than what I did on this design. So we've got Adam, we've got these are all Open Sans regular 12 point font. Open Sans regular 12 point. Open Sans regular 12 point. So let's go ahead and this is also Open Sans regular 12 point. So I'm just going to create this into a new component. Actually, let's call this a textile. We're going to say... You know, paragraph. We'll call this because this is the same as this, as this, as this, right? No. Let's make it the same. Let's bump that down to 15 maybe. Yeah, there you go. Okay. So these are all going to be header 3s. They feel like header 3. These are definitely header 2s. I'm going to copy this style, paste it up here. Yeah, okay. These guys, I'm going to select all this stuff. I'm going to create a textile header to and these are header ones. Okay. A cool trick is if you go ahead and press Commander Control Alt C and then Commander Control Alt V You're able to paste the style so you can see over here. It's initially set as just like manually set text now I've got it set to the style text that I just created now you could also create these into components and it's probably worth doing that too but again I'm not I'm not sweating the design system right now I'm sweating the idea that we want to turn these into repeatable atoms that we can call upon. That's all we need to do right now. Until this becomes a large product that needs to work inside of a design system, we don't need to stress about turning these into specifically set and really mapped out naming conventions. As long as I, as the designer, know how to call upon them and be able to do that in a way that's easy to do, then I've done my job as... with atomic design in my opinion in my opinion so um lastly i'm going to set this guy so we've got um we've got the we'll call this uh pair paragraph dot bold okay nice so we've got bold paragraph and yeah might as well set some colors too so we should probably do this in variables but for now we'll just do style we can talk about variables colors in a little bit so warning we'll call this warning Call this black. I'm going to set the background color as white. Or sorry, light gray. Oh, jeez, I set that black as a variable. Didn't mean to do that. I'm going to delete that variable. Okay, style, black. Let's get some kind of naming conventions going. But see, for me right now, the reason why I'm not sweating it too much is I'm like, I want to be moving fast as I'm doing this. I don't want to be stressed out about not being able to, like think about the naming conventions right now. This is what I was kind of talking about when I was getting into like hey design systems are important but it's it's a whole different level of work and also that work that that we want to get into is is is more on the higher side of the atomic design, like the next levels up. Those are whole different things because you've got to be much more smart about, and intentional really, not even just smart, much more intentional about the way that you're going about your naming, your groupings, and all that. And that's not what I'm trying to do right now, right? I'm trying to just get this together so that I could call upon it easily, right? So we're doing that. So we've got these guys set up. This. is also the same as the header three let's just rename these header three paragraph bold one easy easy peasy right okay these can these be paragraph not really So we'll set a new paragraph. We'll call this long paragraph. And I could probably blend those two together, but, again, moving quick. So subheader. All right. This could definitely be paragraph bold. Yeah. This will be paragraph. bring these out and here we go subheader this is a long paragraph lolz Actually what I want to do is on that subheader I'm going to make it where the settings have it at capitalization as well. Cool. Okay, that should about do it. So we've got our atoms really nailed down. Oh, there's another icon. And this is definitely a button too. Duplicate that. We're going to call this nav button add or primary add. Okay. Perfection. Sweet. All right. So, what now? Well, I want to go ahead and make sure that we've got everything set up to the right styles. So, in order to do that properly, you know, I'll turn this into a header 3. Ah, we need a bold header 3, don't we? Yep. header two header three large should probably bump this down to header four then yeah um header four no shoot this is the header three and this is the header four this is the header four header three okay running we're moving we're moving we're moving let's keep it going now Okay, last icons is this guy. Yeah, you know what? This I feel like could live inside of this. So salt, right? Like this is a shopping app. So yeah, let's make it so that you could pull in salt as well. Okay, well, nope, nope. See, this is why you gotta really be intentional about this stuff is this contextually It's used in a different way, right? It's used as a quick, right? And it's kind of blended in with this clock thing and used contextually interchangeably like that. So we need to change this where we're bringing this guy down and we're going to set this as a new component and we'll call this fast. Yeah, like this is not the right icon, but that's... the best way to call that icon I think for now and last one is the filter we're going to duplicate this one call this filter Okay, last thing is, remember I said that we can't break down buttons any further, otherwise they're just rectangles? Well, these two are basically buttons, right? So we need to create these as a component set because this is actually a segment bar or chip. these are called chips this one is going to be called active or sorry we'll call this active equals true and this is active false okay and now when we pull this out turn them on off yeah let's just make sure that these are set with our atoms which would be a paragraph and then this is going to be a we call that paragraph bold just to make it even even better right yeah cool give this a little bit more spacing perfect okay Yes, so we've got Those atoms let's make sure let's do another sweep to make sure we haven't missed any other atoms Probably this guy Yeah It's like a checklist item Feel like that's a good nav bar button as well Check mark Maybe call this unchecked. Yeah, unchecked. Cool. Any other ones? Any other ones? I think one last one is the avatar picture for our person. Make that a avatar. Great. Okay. I think that finally does it. Yeah, okay. These are all of our atoms that we've used throughout the app. Now we need to just blend those together into components. And so what do we do? Well, I like to start from something that's already built, right? So go ahead and pull out. these cards and we're going to recreate them using our atoms and I'll show you how to do that in just a sec. Let's make sure that we grab every type of variant, right? So this one is an expired version which is going to show this card. We've also got Let's see. This is probably a molecule, honestly. There's enough groupings in here that we should probably call that a molecule. So we'll get there later. But maybe we need to break these up into groupings themselves, right? So I'll go ahead and... Go ahead and break those up. So we got the background and then the groupings together. So that's perfect. We'll put those together as molecules Hide that down. Let's let's do all of our molecules out over here actually, okay Perfect. So molecules are there Last one is these buttons. These are actually buttons, so those definitely should be the atoms as well. And actually, yeah, this plus button should not be an atom. This is the atom because it's a button. Words, you know what I mean? We're all just talking semantics here, really, you know? But the truth is, is this stuff is valuable, and it's really important to be intentional. And the other side is, like, you're going to constantly be going back and forth just like this, right? Don't sweat yourself of being like, dang, I'm, like, missing all these things. No, like, this is part of the process, really, right? So you've just got to keep going and make it happen. I'm going to go ahead and... Group this stuff going to paste that style there put that right there boom Okay That's the other side too is that you saw I just clean that up a bit as it went like this This stuff right here is actually a rectangle in the background, which is not ideal. We want that to be a frame so that we can auto-layout it. Same deal with this, too. So the way that those were originally designed was improper. And so I just wanted to make sure we do that. So we could probably blend these together as buttons. Buttons. We'll call this one plus. Call this one... Dragger lander And then save. Yeah, that feels good. Okay, so we've officially got our atoms together. Now let's get into the molecules. So I'm going to go ahead and let's just drag this on out. Holding Alt, dragging that. Going to drag the header 4. And then also going to drag the paragraph. And then... This too. And one last thing. This. Okay. So with this, this grouping right here is going to create our molecule. So I'm going to grab these two. Let's start from there. Press Shift-A. Right away we've got our setup. right here I've got it at a little bit tall but I think that's okay having it at 8 pixels give it a little bit more spacing than we had originally I'm going to place this right about here press shift a again center this and let's put it at 12 yeah 12 feels good finally I'm going to move this guy in I'm going to cut that and paste it over here and I'll get to yeah you know auto layout is another thing in itself but I'm gonna grab these two shift a now we've got an auto layout and then I'm gonna double click right here and now we've got a justified content you know a gap between space between in our contents I'm gonna actually bring this down to four it's a little tight but you know I think that's fine and then we need to also put this in another auto layout make sure that it's heading right and then this is gonna drag inside right here so bump this down definitely gonna be at four pixels there yep that looks great and yeah last thing is the styling so we're at 60% opacity again if I'm if I'm doing design systems I'm probably not gonna do opacity at this point I'm gonna be doing actual coloring but you know we're moving fast we're sketching and I want to move freely and because of that I'm gonna definitely add focus on opacity and color shading so yeah there we go add a little bit of padding a little bit of padding let's go ahead and copy the styling here of this background with command or control alt C go back over here commander control alt V just make sure to bring back the auto layout because that broke it and now we're back again cool this I'm definitely bring back down to 8 because that's feeling right and yeah Cool. Looking good. So this is a little bit shorter 51 versus 42. So let's add some padding. Let's put it at 12. Maybe Yeah, 12 feels good. Additionally, we're pretty tight on the left. So I might bring this 16 16 feeling okay yeah okay cool so look at that we've got a molecule made up of components right and we should probably rename our stuff I'm gonna do this content gonna we've got food icons already but this is content container this is a you know list And then yeah, okay. I'm just gonna put this into a component commander control alt K Perfect. So we've got our first molecule everybody. This is great. This is looking really great cool Now we just need to remember that we have this guy right here, right? so let's go ahead and create a new variant of this molecule and This is going to be overdue or expired expired as the word Thank you. I'm going to set this paragraph to paragraph bold. I'm going to change the color fill from black to the warning. Bring the opacity back up. And honestly, we should probably have like a warning color for this guy. But, you know, that's okay for now. We'll just leave it there as it's not an SVG anyways. So, okay, we've got stuff that's expired. Okay. Oh, fuck. And I just realized I'm not making this. I didn't duplicate it. So duplicate it, shift A. Now we've got two different variants inside of our component. And, yeah, let's do what I just did again. So this is going to be expired true. Set to true. The default is going to be set to false though. And then, yeah, I'm going to go to my assets panel. pull up my atoms and look for the shopping cart which is not in here that's because i believe we put it inside of yes there it is we put it inside of our uh other thing so this is the expired we're bringing this back putting this onto paragraph bold set the opacity to the warning or the color to the warning color and then there we go maybe we rename this to food item name this is one of those things that helps with us later to be able to manage that now we've got this justified contents uh like this and so we could do it in a few ways we could drag this all the way over so that it's like sort of fills the space maybe even set it to a fill uh that looks pretty good actually i mean the only thing is this the tappable area is a little bit too tight so yeah maybe we stopped doing the justified contents and then bring down the margins a little bit to eight yeah that feels really good so I'm gonna go do the same up here Drop justified contents. Put this to eight. Perfect. Now it still flexes, but it also accommodates for long food names, right? So perfect. So now you're going to be able to go in and automatically choose your, you know, swap over and add it to your food items right from here. Cool. So we've got a variant inside of a molecule, and it's looking really great. So we can go ahead and drop this out. Now the one thing that I it's a really awesome hockey if you're doing this a lot. Oh, actually, look. I just realized there's a little dot here. So we need to make sure that we do that inside of our expired item. So we're going to paste that. I'm going to set the absolute positioning over here, move it on over here. And there we go. Perfect. So as I was saying, we can sort this, this guy out and make it so that way we automatically swap everything in. in this list into our component. So just grab that list, press Shift-Enter, and then press Control-Shift-R. Look at that, it just replaced the item. And that was because I copied this first, and I pressed Control-Shift-R, and it basically paste replaced the shape. Then all we have to do is set this to expired as true, and we've got our item set up. Now, the only trouble is we can't select the food item, Icon right this is like kind of breaking or not breaking, but it's just like slowing us down So what we can do inside of Figma is we can instead of creating a new variant We can press this plus button and go to the nested instances and we can pull up food icons right and what that's going to do is it's going to allow us to over here the food icon is going to be listed right here so we're going to be able to drag or select our stuff to make this mock-up look even more real than before simply by just going from this list right here looks great looks really beautiful and we're on the way guys this is looking really awesome i'm going to go ahead and use that that ctrl c ctrl shift r and we've replaced the the element there perfect okay everything's looking awesome I'm gonna do that up here too we might as well copy ctrl shift R okay do it here too ctrl shift R boom Just replacing everything that we need. Boom. Okay. So I think this should be a component. Probably going to be a, yeah, because that's definitely made up of atoms. So that's a new. component that's gonna be a molecule of search probably press shift a on that perfect figma figured it out so we automatically have a search bar now and that is made up of components as well copy it control shift R boom We're moving. This is looking great. This is looking really good. So, you know, one thing that I love for you to do now, we've got all of our stuff set up. If you've been following along, we've got a mini design system. There's a few things that we still need to build together. And the big thing is, is use this idea of nested atoms, right? I would say even probably best to start putting these into sections, where this is molecules. Shift s this is atoms Make these like readable Something like that Perfect Okay, so we've got our atoms and our molecules these we know are going to be Molecules and then this is going to also turn into a group of molecules or a organism So with that in mind, I'd love for you to go do that on your own Go build those out because you know I could I could keep going but you it's gonna be beaten dead horse So this is looking awesome And I hope you got something out of this with atomic design the truth is is I showed you how to approach Like turning a design into atomic design But you should also be coming out your designs with an atomic design approach by being much more intentional about the way you're using your titles and cards and everything like that all those should be repeat it as much as you can and then find ways to just add little elements or atoms and those are the variants of the molecules and then you can just reuse those molecules and at that point you're just playing legos right you're building you're taking your building blocks which are your components you're piecing them together and every time a new feature comes out you guys can really run fast because everything's already built and you're just like kind of piecing new things together again that is atomic design and thanks so much have a good day

What we're going to do today is we're going to talk about atomic design methodology and why this is such an important process builder for you as a designer. And it's going to level up your skills. and get you ready to be able to be a design systems designer.

So without further ado, let's talk about it. So basically, Atomic Design was written by this guy, Brad Frost. And Brad Frost is kind of like the foundational person who was doing design systems back in the day.

But him and Dan Mall teamed up, and they kind of built out a bunch of design systems for large companies. And we're kind of the people who coined the term design systems and started it all for us. But...

Brad Frost is the guy who kind of wrote it out and gave like that, you know, kind of the ethos of how we design as designers and how we should go about product design as far as iterating and making it where we're building inside of cohesive teams. So, you know, he kind of goes in here and I'll share this chapters with you on the links. But basically, yeah, we're kind of talking about, you know, he kind of goes a little chew with it where. We're going into, you know, obviously, you know, we could break this all down into a periodic table of elements. He's taking it as far as he wants it to go.

But for me, this is the graphic that's most important. We are, at the end of the day, we want to design stuff that's consistent. If we want to design stuff that's repeatable and works within a system across the whole product.

So that way, when we're making something new, we're not just starting from scratch, but rather piecing things together. We need to build in this way. And the way we do that is through having pages.

Those pages are built up of templates. Those templates are built up of organisms, which are, and then those are just groups of molecules. And those molecules are groups of atoms. So how does that translate into the design world?

Well, let's take atoms, for example. So this is basically like the thing that is broken down the most possible, right? So we've got text labels.

But then we've got input fields and it wouldn't be placeholders of the input fields because, you know, at the end of the day, that would basically just be a rectangle and a label, right? Which we've already got a label up here. Same deal with buttons.

You know, buttons are kind of like the lowest level of design breakdown where you can have a button, but without text inside of it, is it really a button or without an icon inside of it? Is it really a button? It's really just a rectangle and then text, right? So no, those two together make a button.

And so those are the atomic level of our designs. And then you piece those things together, the label, the input, and the button, and together they make an input field. Those input fields can be placed inside of a larger group that is going to be repeated across your website or app or product. And that looks like this.

And then those are used and translated into a template, which is then used across the board on other. sides of the product and website. So you can see here, like this is how it translates and fits alongside of everything else. So you can really see that this is what design systems really are, right?

And I've actually like gotten an argument through comments on threads once where it was all about like, Hey, like, why are you even talking about the semantics? Like, you know, design systems is atomic design and atomic design is design systems. And the truth is, is it really is not right.

This is a methodology of how you go about your design approach. Right. You, you, and as long as you stop really at like the organism level, um, that's where once you get beyond that, it really gets into design system workflows and really like, and you know, cause you're not going to, when you're piecing those organisms together inside of groups of organisms and that's really just screens.

Right. Uh, and so if you're going to take those screens and then work those into repeatable screens that have variants and stuff, that's when you're really getting into. Design system weeds that goes beyond what like what the atomic design in my opinion needs to go, right?

Obviously if your design systems designer and you're working inside of a design system You need to be able to work on all this stuff But at that point it's kind of like the distinction in my opinion the distinction goes into your doing workflow work and Collaboration work more than anything because you're not really designing anymore. You're piecing together things documenting all the variants and everything like that. And that's where you're getting into design systems work and making sure that those are built properly in the way a design system needs to be. But again, You don't need to do that on, you don't need to take it to this level on your atomic design system.

You could have a mini design system, which is an atomic design approach, right? And you could even have that outside of components, which I definitely don't recommend, but you could definitely do that. And it would still work because again, this is a methodology. This is not a workflow tactic. This is a way about going about the designs we want to do, right?

how does all this translate you know i'd love for you to go read more about all of the details in here but i just wanted to get through the general idea to be able to show all this stuff to you this is a great example right here too where we've got if we take it backwards from the old old version of instagram uh where we've got a page we've got a template which is basically a page but this is just like you know kind of like more like a piecing together of components version of the page and then here we've got the organisms which is you know, the header group, the, you know, the whole post itself, and then the tab bar. And then within the post, we've got this, this bar, which is all about like the person who posted it, when it was posted, the engagement points, the likes points, the comments, and then those can be broken down further, which went to just text and different types treatments. And then additionally, all the buttons and interaction points like that.

So you can see this is a great example of how to like use atomic design methodology. And now what I want to do really quick is just go through this design. And I'd love for you, if you want to attempt to do this, I'm going to give you these files for here.

All of this stuff is not in a component outside of just this one. And actually, I'm going to break it before I send it over to you guys. So you've really got to go work in here to make this an atomic design system. I'm just going to mess with you guys.

Here you go. Yeah, cool. Okay. Yeah, it seems like everything else is not componented.

Okay, cool. So with all that said, what I want you to do, if you're ready for it and you think that you know about atomic designs, I think it'd be a great exercise for you to go in here and try to make all of these atomic design points, right? Turn these icons into individual atoms.

Blend those together into an icon molecule. Place those alongside of text atoms. And these menu atoms and this timeline atom, mix those together into a card or molecule, and then mix those cards together into a component or organism.

In addition to this, try to find ways to make a little variance. So this here could be a component on its own, where we've got, you know, this is about to go expire on, you know, January 1st, 2021. But... If it already expired then it should look a little bit different right you have a different treatment So go ahead and break those into you know Those atoms that are going to be repeated as you can see across different pages right and then work through that But what I'm gonna do is I'll go ahead and do that ourselves here So if you want to do it on your own go do it pause right now and see how I do it if you'd like To follow along so let's dig into it.

So first off. I want to go ahead and grab this whole list I'm going to duplicate this, I'm going to pull this out. And now I'm going to ungroup all of these here. So we've got all of our little atoms of icons here. And what I'd like to do though is let's wrap these inside of a frame.

I think I might have broken one thing too far, but that's okay. I'm just going to go in here. This is a repeated one. So we've got our frames.

Now the trouble is, is they are different sizes and this is going to really mess up our atomic design system. But additionally too, it's going to mess up development. Developers are going to be really annoyed because they want to just come in and export really quick.

And if it's not the same size, it's going to mess with the layout of everything. So how do we do that? Well, I'm going to go ahead and grab all these, press enter to be able to get our constraints.

And the trouble is, is they're all set to scale. So if we If we scale it out like this, it's gonna break and look really wonky. All we have to do is set it to center center and then now we can set this to like say 16 by 16. Oh gosh, those are bigger. Okay, 26. Let's go 30 by 30. Perfect. And we'll center it.

Center it. All right, perfect. So now we've got our icons.

Let's see if we can we can set them down even further. Maybe 24? Oh, jeez.

Yeah, no, that's breaking. Okay. Yeah, let's do 26. 26?

Yes. Oh, the pineapple's just too big. Okay.

Well, let's size it down then. Bum, But see, this is like, you know, as I'm doing this, I'm going to walk through some thoughts where this is okay that you're doing this late in the game. In my opinion, if you're too focused on the system too early, it's going to really mess you up as a designer because you're going to be constantly going back and forth. You're going to and whenever you want to try out a new layout when it's an early stage product or project. There's so many times that you need to go back and make changes.

But then you're going to be focused on fixing the components rather than quickly designing and sketching and coming up with new ideas. And so that's the trouble and the balance with working in these systems is, you know, I might not take it this far before breaking it into components. But definitely at a wireframe stage of this should still not be components. But.

And even then even when we're adding icons it might be worth it to not have them in components until you know for sure that Like the sizing of the icons and how they're gonna be because otherwise you're going to be breaking these components constantly Okay, so we've got our icons perfect. I'm gonna go ahead and create a component set. We'll rename this to icons Okay, this is gonna be carrot press tab Soup, I guess Pineapple, tab again, chicken, milk.

Perfect. So we've got our icons. We also have a few other icons. We've got this one. We've got this one too.

And then we've got the time as well. We should probably, you know, so this is a side. Is that like a distinction that you need to make a call on?

Is you could create, even though they're the same icon sets, you can create different atoms and variants of those atoms, right? And that's really the distinction though, is can you use these interchangeably in your designs? Can you swap? a carrot for a shopping cart? Can you swap a time for a shopping cart?

Not really, right? But you can kind of group them together in a component system. But again, that's not even really atomic design at that point.

It's because atomic design is the lowest level parts, right? And so really all of these should probably be their own components instead of component sets. So We'll call these instead with all that in mind, we'll call these food icons.

We'll call this. And, you know, I think for me, I might group these together simply on like the areas that they're going to be used. So like this plus button is a button, right? This one's another button. This menu thing is a button as well.

And then all the tab bar buttons too could be. Could be nav buttons as well. So I'll probably group all of these together.

I'm going to go ahead and press enter. Oh, let's make sure that all of these are a frame. Press enter, center, center. Let's see, 30. 30. Okay, cool.

So now we've got our spacing properly set for our nav buttons. I'm going, I forgot to do this one too. So I'll go ahead and press that center center. We'll go 30 by 30. Is this centered properly?

Group that center center Okay, cool. So grab all these create component set and We're off So we're gonna call these nav buttons Okay, and then is it the shopping cart is a nav button as well so instead of Look at that. I had some properties in here too.

So let's just go ahead and reset those So I'm gonna put all of these in a tab bar Let's go variance tab bar true boom boom boom boom Those are all tab bars True, okay. These are not tab bars, so those are going to be false. I'm going to set this one to home. calendar shopping or list cart and settings okay this is set to false and this is going to be tab bar icon so then we need to set a new property and we'll call this nav button We'll call these buttons in general.

So this is going to be a scan QR code. This is going to be a add. Okay. And yeah, each of these tab bar icons are going to get their own active state.

But also, if you notice, this is active state. This one is the same icon, but it's not an active state because it's not a it's using a different context. And so because of that, it's worth even though this might be the same exact icon. Ultimately, when we get there, I'm going to go ahead and create a new nav button and call this.

Okay, and then lastly we're going to put this clock. This clock is reused a lot, so I think it's worth calling it its own component. And we're going to go ahead and make this a frame.

And then Command-Alt-K or Control-Alt-K. And we've got a clock. So we've got clock, food icons, buttons. And it's probably worth, like if you're going to create a component set, it's definitely worth being more strategic.

and thoughtful than I did. I'm just doing this together to be able to piece this into atoms. But yeah, so now we've got this deal.

So we've got the timeline set up. We do need to set this up as its own, you know, like title kind of, or text type of atom. This is another text atom.

Let's see where we're at on the sizing. These are enter these should be open sans. This is why you do things inside of atoms a little bit earlier than what I did on this design.

So we've got Adam, we've got these are all Open Sans regular 12 point font. Open Sans regular 12 point. Open Sans regular 12 point.

So let's go ahead and this is also Open Sans regular 12 point. So I'm just going to create this into a new component. Actually, let's call this a textile.

We're going to say... You know, paragraph. We'll call this because this is the same as this, as this, as this, right?

No. Let's make it the same. Let's bump that down to 15 maybe. Yeah, there you go. Okay.

So these are all going to be header 3s. They feel like header 3. These are definitely header 2s. I'm going to copy this style, paste it up here.

Yeah, okay. These guys, I'm going to select all this stuff. I'm going to create a textile header to and these are header ones.

Okay. A cool trick is if you go ahead and press Commander Control Alt C and then Commander Control Alt V You're able to paste the style so you can see over here. It's initially set as just like manually set text now I've got it set to the style text that I just created now you could also create these into components and it's probably worth doing that too but again I'm not I'm not sweating the design system right now I'm sweating the idea that we want to turn these into repeatable atoms that we can call upon. That's all we need to do right now.

Until this becomes a large product that needs to work inside of a design system, we don't need to stress about turning these into specifically set and really mapped out naming conventions. As long as I, as the designer, know how to call upon them and be able to do that in a way that's easy to do, then I've done my job as... with atomic design in my opinion in my opinion so um lastly i'm going to set this guy so we've got um we've got the we'll call this uh pair paragraph dot bold okay nice so we've got bold paragraph and yeah might as well set some colors too so we should probably do this in variables but for now we'll just do style we can talk about variables colors in a little bit so warning we'll call this warning Call this black.

I'm going to set the background color as white. Or sorry, light gray. Oh, jeez, I set that black as a variable. Didn't mean to do that. I'm going to delete that variable.

Okay, style, black. Let's get some kind of naming conventions going. But see, for me right now, the reason why I'm not sweating it too much is I'm like, I want to be moving fast as I'm doing this.

I don't want to be stressed out about not being able to, like think about the naming conventions right now. This is what I was kind of talking about when I was getting into like hey design systems are important but it's it's a whole different level of work and also that work that that we want to get into is is is more on the higher side of the atomic design, like the next levels up. Those are whole different things because you've got to be much more smart about, and intentional really, not even just smart, much more intentional about the way that you're going about your naming, your groupings, and all that. And that's not what I'm trying to do right now, right? I'm trying to just get this together so that I could call upon it easily, right?

So we're doing that. So we've got these guys set up. This. is also the same as the header three let's just rename these header three paragraph bold one easy easy peasy right okay these can these be paragraph not really So we'll set a new paragraph.

We'll call this long paragraph. And I could probably blend those two together, but, again, moving quick. So subheader.

All right. This could definitely be paragraph bold. Yeah. This will be paragraph.

bring these out and here we go subheader this is a long paragraph lolz Actually what I want to do is on that subheader I'm going to make it where the settings have it at capitalization as well. Cool. Okay, that should about do it. So we've got our atoms really nailed down. Oh, there's another icon.

And this is definitely a button too. Duplicate that. We're going to call this nav button add or primary add.

Okay. Perfection. Sweet. All right. So, what now?

Well, I want to go ahead and make sure that we've got everything set up to the right styles. So, in order to do that properly, you know, I'll turn this into a header 3. Ah, we need a bold header 3, don't we? Yep.

header two header three large should probably bump this down to header four then yeah um header four no shoot this is the header three and this is the header four this is the header four header three okay running we're moving we're moving we're moving let's keep it going now Okay, last icons is this guy. Yeah, you know what? This I feel like could live inside of this.

So salt, right? Like this is a shopping app. So yeah, let's make it so that you could pull in salt as well. Okay, well, nope, nope. See, this is why you gotta really be intentional about this stuff is this contextually It's used in a different way, right?

It's used as a quick, right? And it's kind of blended in with this clock thing and used contextually interchangeably like that. So we need to change this where we're bringing this guy down and we're going to set this as a new component and we'll call this fast.

Yeah, like this is not the right icon, but that's... the best way to call that icon I think for now and last one is the filter we're going to duplicate this one call this filter Okay, last thing is, remember I said that we can't break down buttons any further, otherwise they're just rectangles? Well, these two are basically buttons, right? So we need to create these as a component set because this is actually a segment bar or chip.

these are called chips this one is going to be called active or sorry we'll call this active equals true and this is active false okay and now when we pull this out turn them on off yeah let's just make sure that these are set with our atoms which would be a paragraph and then this is going to be a we call that paragraph bold just to make it even even better right yeah cool give this a little bit more spacing perfect okay Yes, so we've got Those atoms let's make sure let's do another sweep to make sure we haven't missed any other atoms Probably this guy Yeah It's like a checklist item Feel like that's a good nav bar button as well Check mark Maybe call this unchecked. Yeah, unchecked. Cool.

Any other ones? Any other ones? I think one last one is the avatar picture for our person. Make that a avatar.

Great. Okay. I think that finally does it.

Yeah, okay. These are all of our atoms that we've used throughout the app. Now we need to just blend those together into components.

And so what do we do? Well, I like to start from something that's already built, right? So go ahead and pull out.

these cards and we're going to recreate them using our atoms and I'll show you how to do that in just a sec. Let's make sure that we grab every type of variant, right? So this one is an expired version which is going to show this card.

We've also got Let's see. This is probably a molecule, honestly. There's enough groupings in here that we should probably call that a molecule.

So we'll get there later. But maybe we need to break these up into groupings themselves, right? So I'll go ahead and...

Go ahead and break those up. So we got the background and then the groupings together. So that's perfect. We'll put those together as molecules Hide that down. Let's let's do all of our molecules out over here actually, okay Perfect.

So molecules are there Last one is these buttons. These are actually buttons, so those definitely should be the atoms as well. And actually, yeah, this plus button should not be an atom. This is the atom because it's a button. Words, you know what I mean?

We're all just talking semantics here, really, you know? But the truth is, is this stuff is valuable, and it's really important to be intentional. And the other side is, like, you're going to constantly be going back and forth just like this, right? Don't sweat yourself of being like, dang, I'm, like, missing all these things. No, like, this is part of the process, really, right?

So you've just got to keep going and make it happen. I'm going to go ahead and... Group this stuff going to paste that style there put that right there boom Okay That's the other side too is that you saw I just clean that up a bit as it went like this This stuff right here is actually a rectangle in the background, which is not ideal.

We want that to be a frame so that we can auto-layout it. Same deal with this, too. So the way that those were originally designed was improper. And so I just wanted to make sure we do that.

So we could probably blend these together as buttons. Buttons. We'll call this one plus. Call this one...

Dragger lander And then save. Yeah, that feels good. Okay, so we've officially got our atoms together. Now let's get into the molecules. So I'm going to go ahead and let's just drag this on out.

Holding Alt, dragging that. Going to drag the header 4. And then also going to drag the paragraph. And then...

This too. And one last thing. This. Okay. So with this, this grouping right here is going to create our molecule.

So I'm going to grab these two. Let's start from there. Press Shift-A.

Right away we've got our setup. right here I've got it at a little bit tall but I think that's okay having it at 8 pixels give it a little bit more spacing than we had originally I'm going to place this right about here press shift a again center this and let's put it at 12 yeah 12 feels good finally I'm going to move this guy in I'm going to cut that and paste it over here and I'll get to yeah you know auto layout is another thing in itself but I'm gonna grab these two shift a now we've got an auto layout and then I'm gonna double click right here and now we've got a justified content you know a gap between space between in our contents I'm gonna actually bring this down to four it's a little tight but you know I think that's fine and then we need to also put this in another auto layout make sure that it's heading right and then this is gonna drag inside right here so bump this down definitely gonna be at four pixels there yep that looks great and yeah last thing is the styling so we're at 60% opacity again if I'm if I'm doing design systems I'm probably not gonna do opacity at this point I'm gonna be doing actual coloring but you know we're moving fast we're sketching and I want to move freely and because of that I'm gonna definitely add focus on opacity and color shading so yeah there we go add a little bit of padding a little bit of padding let's go ahead and copy the styling here of this background with command or control alt C go back over here commander control alt V just make sure to bring back the auto layout because that broke it and now we're back again cool this I'm definitely bring back down to 8 because that's feeling right and yeah Cool. Looking good.

So this is a little bit shorter 51 versus 42. So let's add some padding. Let's put it at 12. Maybe Yeah, 12 feels good. Additionally, we're pretty tight on the left. So I might bring this 16 16 feeling okay yeah okay cool so look at that we've got a molecule made up of components right and we should probably rename our stuff I'm gonna do this content gonna we've got food icons already but this is content container this is a you know list And then yeah, okay. I'm just gonna put this into a component commander control alt K Perfect.

So we've got our first molecule everybody. This is great. This is looking really great cool Now we just need to remember that we have this guy right here, right?

so let's go ahead and create a new variant of this molecule and This is going to be overdue or expired expired as the word Thank you. I'm going to set this paragraph to paragraph bold. I'm going to change the color fill from black to the warning.

Bring the opacity back up. And honestly, we should probably have like a warning color for this guy. But, you know, that's okay for now.

We'll just leave it there as it's not an SVG anyways. So, okay, we've got stuff that's expired. Okay.

Oh, fuck. And I just realized I'm not making this. I didn't duplicate it.

So duplicate it, shift A. Now we've got two different variants inside of our component. And, yeah, let's do what I just did again.

So this is going to be expired true. Set to true. The default is going to be set to false though. And then, yeah, I'm going to go to my assets panel. pull up my atoms and look for the shopping cart which is not in here that's because i believe we put it inside of yes there it is we put it inside of our uh other thing so this is the expired we're bringing this back putting this onto paragraph bold set the opacity to the warning or the color to the warning color and then there we go maybe we rename this to food item name this is one of those things that helps with us later to be able to manage that now we've got this justified contents uh like this and so we could do it in a few ways we could drag this all the way over so that it's like sort of fills the space maybe even set it to a fill uh that looks pretty good actually i mean the only thing is this the tappable area is a little bit too tight so yeah maybe we stopped doing the justified contents and then bring down the margins a little bit to eight yeah that feels really good so I'm gonna go do the same up here Drop justified contents.

Put this to eight. Perfect. Now it still flexes, but it also accommodates for long food names, right? So perfect. So now you're going to be able to go in and automatically choose your, you know, swap over and add it to your food items right from here.

Cool. So we've got a variant inside of a molecule, and it's looking really great. So we can go ahead and drop this out.

Now the one thing that I it's a really awesome hockey if you're doing this a lot. Oh, actually, look. I just realized there's a little dot here. So we need to make sure that we do that inside of our expired item. So we're going to paste that.

I'm going to set the absolute positioning over here, move it on over here. And there we go. Perfect.

So as I was saying, we can sort this, this guy out and make it so that way we automatically swap everything in. in this list into our component. So just grab that list, press Shift-Enter, and then press Control-Shift-R. Look at that, it just replaced the item. And that was because I copied this first, and I pressed Control-Shift-R, and it basically paste replaced the shape.

Then all we have to do is set this to expired as true, and we've got our item set up. Now, the only trouble is we can't select the food item, Icon right this is like kind of breaking or not breaking, but it's just like slowing us down So what we can do inside of Figma is we can instead of creating a new variant We can press this plus button and go to the nested instances and we can pull up food icons right and what that's going to do is it's going to allow us to over here the food icon is going to be listed right here so we're going to be able to drag or select our stuff to make this mock-up look even more real than before simply by just going from this list right here looks great looks really beautiful and we're on the way guys this is looking really awesome i'm going to go ahead and use that that ctrl c ctrl shift r and we've replaced the the element there perfect okay everything's looking awesome I'm gonna do that up here too we might as well copy ctrl shift R okay do it here too ctrl shift R boom Just replacing everything that we need. Boom.

Okay. So I think this should be a component. Probably going to be a, yeah, because that's definitely made up of atoms. So that's a new.

component that's gonna be a molecule of search probably press shift a on that perfect figma figured it out so we automatically have a search bar now and that is made up of components as well copy it control shift R boom We're moving. This is looking great. This is looking really good. So, you know, one thing that I love for you to do now, we've got all of our stuff set up.

If you've been following along, we've got a mini design system. There's a few things that we still need to build together. And the big thing is, is use this idea of nested atoms, right?

I would say even probably best to start putting these into sections, where this is molecules. Shift s this is atoms Make these like readable Something like that Perfect Okay, so we've got our atoms and our molecules these we know are going to be Molecules and then this is going to also turn into a group of molecules or a organism So with that in mind, I'd love for you to go do that on your own Go build those out because you know I could I could keep going but you it's gonna be beaten dead horse So this is looking awesome And I hope you got something out of this with atomic design the truth is is I showed you how to approach Like turning a design into atomic design But you should also be coming out your designs with an atomic design approach by being much more intentional about the way you're using your titles and cards and everything like that all those should be repeat it as much as you can and then find ways to just add little elements or atoms and those are the variants of the molecules and then you can just reuse those molecules and at that point you're just playing legos right you're building you're taking your building blocks which are your components you're piecing them together and every time a new feature comes out you guys can really run fast because everything's already built and you're just like kind of piecing new things together again that is atomic design and thanks so much have a good day

Transcript for:Understanding Atomic Design Methodology

Transcript for:
Understanding Atomic Design Methodology