How to Structure Design Systems like a Pro in Figma

hey guys Bri here in this video we're going to talk about Design Systems and specifically around how to structure a design system for six seven and especially eight figure companies since at the Enterprise level you're going to need to structure things differently than if you're working on a small project for a startup but these are going to be really important Concepts to keep in mind all throughout your journey so that you can set up a system which can then expand and scale with the company now let's start with the very first one which is going to be the color sections and by the way this is actually a design system that I worked on for a e figure company and uh I'm simply going to focus on the high level I removed a lot of The Branding and custom aspects to it but you can essentially consider this that it's going to be 95% close to the structure of the original so what you really want to focus on is the high level over here so let's talk about colors colors are an essential part of any design system as you know since uh colors are going to enable the agency or you know company to basically have an established brand online so you want to keep in mind all the primary colors of the brand all the secondary colors ter and all of the colors which aren't deeply related to the brand but are still important colors such as for UI States whenever you have a positive action or positive feedback or whenever there is an issue with uh the app maybe there's a notification or some alert which uh needs to drive attention from the user perspective so these are all things that you need to consider from a high level before you even start creating the tonalities so if you have a look over here what you can see is that uh we have the main brand colors which uh can be one or two and up to four probably but these are going to be the essential colors that are strictly related to the brand then we're going to have the primary colors which are going to be not only brand related but also UI ux related so again as I mentioned positive States we're probably going to go with green without uh having to reinvent the wheel we're going to want to stick with colors that have positive associations to them in a common format in ux and uh for issues or negative connotations we're probably going to stick with tones of yellow to Red so these are all things uh that you need to keep in mind and uh we also have other colors which we're going to use in user interface such as this slate tint this can be used for example for dividers for lines for different type of sections so these are all things which uh you can leverage as a asset within your design system and one only once you established this colors from a high level then you can go on and create all the various tins and shades of the color since you're going to need to um to use them at one point or another and uh there's different philosophies if you wish when it comes to creating the different shades because you could actually just use a few so instead of uh having 10 as we have over here you could even have maybe five Shades and this is going to suffice in the most amount of uh uh scenarios but what I like to do is to always keep options open because you never know when you might need a shade or another so by having a vast array of Shades you're going to have a lot of flexibility when it comes to using the design system and uh the way that it's structured going to Simply show you in uh in figma is if we select one of these fills you can actually see over here that we have them synced up in the design system and I'm going to create an entire video about how to sync these color styles text Styles up and we're actually going to build a design system from scratch but for the purpose of this video we just want to keep it a high level and as you can see for each and every tint we have different shades and uh if we go all the way on the top you're going to notice that we have also the primary colors so that if I I simply need to reference one of those primary colors I can easily do that by simply going on the top section of my design library but if I need a specific tint I can simply go here below and uh essentially leverage one of those so this is the base when it comes the color and uh one more note which I highly recommend is whenever you're uh setting up the primary colors especially for typography do keep in mind accessibility and uh you want to create clear contrast which pass accessibility if you have any doubts regarding that you can SP go on Google and search for accessibility color Checker and you're going to find a whole lot of resources that are going to enable you to check uh the accessibility uh contrast ratio especially when you're working on websites or web apps so this is it for colors now let's move on on to typography so typography is another major building block in Design Systems and uh reason being is that we use type all the time and uh this is going to essentially convey what are the fonts that you're using and also what are the uh different font sizes and font weights for the most part for uh what can be as a base the headings and then the paragraph text but it can be even more styles from there so the base as we have a structure here for the web and marketing which essentially translates in the website side of things is uh we have this uh main title which is an extra um it's a it's an extra style from The Heading it's uh it's almost like a special custom class which we decided to use um just due to the fact that in the website we needed this uh class but we couldn't really justify it having it as an H1 if that makes sense since for SEO purposes we decided to move uh the H1 in a strategic um Bic location it's kind of hard to explain by words it's easier to to show it but for a very most part in 99.9% of these scenarios you're going to focus on uh The Heading one heading two heading three all the way to The Heading six and also the body text now the body text you we we had just one in this case case but you can actually divide it up into body text large body text medium and body text small so that you can have more scenarios covered in this case we basically were good with ch the body text so we don't didn't really need uh any more Styles but again these are going to be the base but you're you can definitely add more custom cells just think about the scenarios that you're going to use in the far most amount of cases and then try and see the patterns and uh uh feel the gaps really and very similarly to the color styles you can simply select any one of these headings and uh you're going to have the textiles which are associated with it now on top of that you can see that we have the inapp textiles which in this case we structured it initially and then we decided to move to another design file so this is not the final but it can be something around these lines where you simply have different text at different sizes you don't necessarily need to go with the H1 H2 H3 approach you can actually uh customize this uh B more and um it's uh really up up to you and uh do to what are the project requirements for that specific um project or company that you're working on so these are good to have as an extra because these are going to be for the web app or maybe for the mobile app since the typography is likely not going to match exactly in the way website and in the web app as well usually in web apps you have smaller type you might need some uh uh type uh faces which have or different different fonts weight and font sizes which were different than the one displayed in the website at least in this case that was uh that was the case uh simply because it's two different type of visuals that serve two different um approaches and goals really so this is it when it comes to the typography and um you just want to keep everything clean and and neat and uh essentially tailored around your goals now also add usually this section which is the logos now you can really see the logos here as the I blured them but the main concept when it comes to to the logo section is to have a place where you have all of the logos in the different ways that uh you intend of visualizing them and ideally with some examples of when to use this logo or that logo and uh I'm thinking for example we could even a company might have a icon plus text logo maybe the icon is colored and you might have the black and white version of that logo which you might want to use at the end of a letter head or at the beginning of a letter head where you don't want necessarily to have the color for uh printing reasons for example or you can decide to have just the icon logo within this part of the design system simply because uh you might want to have um that displayed in the mobile version because it's taking up too much uh wi so you might want to accustom for the limited amount of space in that scenario so these are kind of like the logic and the thought process that goes in the uh logo design section so that's uh that's that for the logo there isn't really like a specific guideline it really goes on a Case by casee scenario and you really need to think of through the different scenarios and uh what you think is the best um the best solution for that specific case another very important aspect which uh is uh neglected especially from uh uh junior uh designers or designers who are entering the space is is the icons and iconography can play a huge role in the brand identity and one of the most important things to consider is the consistency you don't want to have uh for example uh a app where you're using solid icons and outline icons and uh colored icons without a specific logic usually you're going to stick with one for the very most part and then you might use um the other version which might be the solid or the outline depending on which one was the first option in specific cases and uh this is true as well also for the colored icons this might even be hover effects where by default you have solid and then on Hover you're going to see the colored so you definitely don't want to mix and match these icons without logic and you want to keep a level of consistency and stability throughout the project so one thing that uh we've done in the original scenario is we noted down some examples and some notes regarding this for developers stakeholders marketing team so that they will not mess up the intended design system the way that we originally thought about it and needless to say all of these must be in SVG because these days it's uh really not acceptable not to have scalable Vector icons uh whenever possible at least so this is another major building block of uh any design system and uh something that you want to keep at heart at all times now another element which is um important I wouldn't say it's absolutely necessary in the first stages of uh the design system but it's definitely a great element to add whenever you can is the spacing and the grids now when it comes to the spacing in this case we essentially have a series of size increments that we adhere to whenever we're adding um these different uh tokens if you wish to the uh to design system and to the actual screens that we're designing so we're trying to adhere to this uh uh to this spacing definition sometimes uh you can do that other times you might want to come up with more custom Solutions it really depends on the design that you're doing um so again sometimes you these are not rules which are written in stone and you can never touch but this is a general guide that you should adhere to whenever you can and uh then based on your specific situation you can make your own judgment as to what is the best solution in that case same is true also for GDs for example over here we have the basic container which is going to have the 12 column and if I go back to the edit View and I double click on this you're going to see that uh we actually have the the grid uh for the 1,68 pixels uh container and uh you can see all of these grids for the different scenarios different sizes and um this is something that we are trying to adhere to whenever whenever possible then another element which uh def you want to touch upon is the Shadows overlays and blurs and uh for the time being I'm just going to um make this uh uh not visible the the layout grid and um these are going to be a really nice stature in the design system so that you can get a level of consistency also in the shadows so as you can see over here you have uh Shadow 2 XL Shadow XEL Shadow large Shadow medium so depending on the amount of VES visually that you want to give to a element that needs a shadow you can actually the deci side which Shadow to use since you already have it synced in the design system there's no thinking everything moves moves faster when applying these type of effects the same is true also for the overlay overlays for example used all the times in models in uh popups so for the background so having an overlay uh system or an overlay style which you can use the time with a high level of consistency is simply going to uh make the project run faster and uh make The Branding consistent overall and same is true for blurs so you don't want to reinvent the wheel each and every time you're creating a blur so having an overlay a blur overlay is going to help in that case as well now when it comes to the components here we have this section which is called infile components we are not going to really Touch Too Much upon this because we have things like naming conventions which these for the most part or totally up to you as to what you prefer to have for foram conventions it's uh definitely not something which is uh written in stone but for example over here we decided to have to adapt this naming convention which is the main context component modifier variant and then States and here you have the list of these different items with some examples so again these are are definitely something which is project um which depends on the specific project uh as well as any elements but when it comes to the actual components uh what I believe is a crucial element and a very important tip is to divide these Base building blocks that we just discussed in this video and to create a separate figma file with uh just components and all the components which we going to apply are going to have this styled applied from the original so for example I can have a second document which is like this and uh in this example we have the Tailwind components Library these two ideally should be synced so I'm assuming that I'm I'm working on a project with uh um elements around these lines so for example these are the buttons of uh the company and uh you ideally want to have this color style sync in with the core colors right here and uh the same is true for all of the other components when it comes to typography when it comes to Shadows when it comes to the icons so this components are all going to feed from the original design Foundation uh design system so this file is the base for the for building more complex Elements which are going to be the components and this brings us to the atom uh methodology or Atomic design which is going to be a topic that I'm going to discuss much more in detail in another video we didn't really um go too much in depth in it but for the very most part you already understood the base elements of this concept which we're going to explore in a further video so I hope this video was helpful now you have a good understanding on the high level picture of how to structureal design system in an efficient way for Enterprises and creat structures which are scalable overall and you understand what is the why behind some of these macro decisions so that you can impress your team stakeholders but most importantly create efficient and scalable Solutions my name is Pierre and I worked in U design industry for over a decade and I share my experience in U this YouTube channel as well as uh many other social platforms Instagram Twitter Tik Tok nowadays and uh if you want to learn more feel free to check out the other videos on my channel and I'll see you in the very next one

Channel: Pierluigi Giglio

Views: 3,010

Keywords: ui design, ux design, web design, designer, design

Id: LKiB8KnMB1c

Length: 24min 8sec (1448 seconds)

Published: Tue Nov 21 2023