How To Organize Figma Product Design Files and Design Systems (Tutorial)

hey everyone dennis cortez here in today's video i will be going over how i organize my design system and just normal regular files for figma i want to preface this and say this is not the best way to do it i don't know what is the best way to do it but this is how i prefer to do it personally so i've been doing this at mothership at dave and in all of my personal projects including taste notes i'm just going to go through some examples with taste notes and even show you some of the mothership breakdown of the design system that we use and i'm going to be showing you one how i do it where there's only one file and two how i do it where there's multiple files and i keep a design system file separate so let's get right into it so right here i have set up a bit of a diagram just kind of showing my overall approach to organizing my files the way that i like to do this is i have my flow name i actually like to name my flows on the left side so that it's easy for somebody else to come into the file and kind of see what each of these flows are that they need to be looking at so they can come in here they can see that and then i go through the steps from left to right i start with the beginning of that flow and go all the way to the end with each one i do steps for each one between each of those step artboards i like to have 80 pixels between there like i've made videos before the eight point grid is the best thing in my opinion for design with that i like to keep my frames a certain space away that's on the eight point grid as well from left to right i keep them 80 pixels so that you have some more spacing than you would vertically you have more spacing left and right so it kind of gives a little bit of a separation from those steps then between each of the states i do 40 pixels so i do half the amount that i do horizontally i do that vertically and the reason for that is because these screens below are actually tied to the screen up top when you're designing you want to try and show all the different states that you have to have so typically you'll have a default state you'll have like an active state a filled state and maybe even error state most of the time that's the type of states that you'll have for inputs obviously it'll be different depending on what app you have so you might have some other state that's just random specifically for your app so if you need to show like a certain state for a list like the way that it's showed when it's active versus inactive versus disabled et cetera so it kind of depends on that rule of thumb here is to have your states shown vertically as an example here i have this flow one name so left to right i have the steps so i have step one step two step three etc etc for the step one this is the only one that has different states so for example i will be showing an active state here below and then i show a filled state so i like to show the order of operations from top to bottom for example you'll start in the default or like an empty state then you'll go to active where the input is actually being interacted with and you'll go to a filled state so after it's been unfocused another note is i like to order my layers from top left to bottom right take a look here on the left panel so very top layer i have is the flow one name so with this name it's going to be the top one and then from left to right i start adding these steps so i have the step one then i have the step one active state then the step one filled state and then it goes over to the next row once you reach the bottom of this one so now it's over to step two over step three etc etc and then between my flow name and my actual first step i like to keep this at 240. don't ask me why it's just a random one that i came up with i like the spacing that it gives it gives some good breathing room and then the reason that i do that is that i do 240 between the flow names as well so if i have two flows for example in this one that i'm showing then this top one i want to give it some breathing room so that you can go through and kind of read these easily so this first flow will have 240 pixels between it and the next flow so with that again we give it some good spacing and make it easy to read for somebody else coming into this file giving you an actual example of this i'm going to use taste notes which by the way i launched the new website last week if you didn't see it go ahead and check it out it's at tastenotes.app with this real example we have the review flow here so for this is one of the main flows and taste notes it starts from the beginning of when they would land on the home page and how this would look this is obviously a wireframe view that i'm working on this is the first step that they would go to then they would go to the next step with entering the coffee info we have 80 pixels between them and then once they finish this they get into the questions so these questions each of them have separate states between them so we have the unfilled state which is like the default state that i was mentioning then we have the active state so what does it look like when a user is actually clicking onto this input so we have the keyboard up buttons become active and then finally we have the filled state so after they click off of the keyboard input then we'll show this state as well so then going to the next one we have the 80 pixels between this one as well and then we show the next step in that flow i like to name my artboards based on that too so it's in the review flow this is the roaster screen and it's the unfilled state same thing here so it's the review flow this is the coffee name screen and it's in the unfilled state for example so this would continue on until i get to the end of this flow there's actually seven questions here but just for example sake i have these three so say that this is the end of this flow we're going on to the next one which is the profile so for this next flow i'm still working on it but just to show you an example i have this profile flow and it's 240 away and then between each of these steps i would have the 80 pixels between them so this is how i keep these organized this is what i do at mothership 2 because it's super scalable you can do like huge massive files and still do them in this order it's still very legible and still easy to get through as long as you're doing this correctly so for the next example i want to show a little bit of the design system file that we have at mothership so the difference here is that for this file we actually use it throughout multiple files so we have to keep this as a separate one and we have its own pages its own organization and everything but this is how i've always done design system files and how i organized them to make it easier for everybody at the company to go through and be able to use i won't show the actual components here just because this is mothership work but as you can see i like to organize my pages based on the component types that we have and i usually do this in alphabetical order so it's easy to read through i try and keep it as simple as possible and i group things as often as i can so we have actions first so that'll be just your buttons your components so these are what i was talking about in my design system video if you haven't seen it go ahead and check it out these are where the custom components that aren't like applicable to most applications so in here we have like stuff that's specifically for logistics and delivery flows then in communication we have like toasts and messages and banners and things like that controls we have radios check marks etc glyphs we have icons inputs self-explanatory we just have text field inputs for the most part and then we have ios so that's opponents that are specific to ios so like the top bar the status bar home indicator at the bottom for example then we have lists so these are like the cells that you use that you can stack them up to make a list and we also have like sections in here we have miscellaneous so this is just random things like dividers or some sort of illustration for example that we need to use navigation is navigation that we use between both android and ios so this would be like your tab bar for example or if you have a top bar that you share between the different os's that's where we put this stuff and then finally we have the styles so just basically all the colors and stuff that we use this is more so for reference than anything and yeah so then finally we just have like internal stuff so we put like notes in here i like to make note components so that i can put these underneath of frames i make them exactly the size of the frames that i'm using so for example on ios i would do like a 375 have it so it's directly underneath the frame and then i do 16 pixels of space between it because again you want to keep it on the eight point grid and then finally we just have the cover um so i like to have covers for all of my figma files because it just makes it so much easier for you to find things when you're searching in the browse view so that's an overview of how i organize my design system files as well as my normal files like i said i use this for both personal projects and for projects at work i've used this at mothership currently and i've used it in the past like at dave and meta lab this has been super helpful for us to keep things organized making sure that we have an organized file and keeping the same distance between things and overall it just makes it a lot more legible and readable for both designers and non-designers as well i hope this was helpful let me know if you have any questions down in the comments reminder that i do have a patreon so if you want to get these videos early and get any extra content that i post there i post a lot of snippets of the taste notes work and like behind the scenes stuff so if that interests you feel free to check it out at patreon.comshyboytm i have links in the description as well follow me on social media for more behind the scenes and i hope you all enjoyed and i will see you all later bye

Channel: Dennis Cortes

Views: 12,533

Keywords: minimal, tutorial, process, beginner, ambient, lo-fi, export, assets, figma, images, user interface, ui, ux, iconography, product design, design, graphic design, app, apps, code, developer, how to, tips, tricks, mockup, ux design, figma design, ui design, organize design systems, organize design files, organize figma files, figma organization, figma organization best practices, figma best practices, figma external design file, figma design systems, organize figma projects, organize figma components

Id: 5QHYn2BBkbM

Length: 9min 19sec (559 seconds)

Published: Fri Mar 26 2021