So > x, e ss on 7 " Si - = a ie ee < ss 4 > SS sm“ an c- ~ co Qe eee eS ™~ Og S SS coe SS SS Se. Se 4 ~ cos a N a Ss a “Sy a Ne UI Design Systems Al Advance in your career and become an efficient designer. Marina BudarinaNice to see you! I'm Marina Budarina - a digital product designer and creator of this e-book. Thanks for downloading the free sample of my UI Design Systems Mastery eBook! om That's mel And here is my Great to see you! Instagram > This free version includes some pages from 2 chapters - Tokens @marina_uiux and Colors. | hope it will be valuable to you and you'll be able to learn something new. | would appreciate if you could write me a short email with feedback after reading this sample. I’m constantly looking for ways to improve the eBook, your opinion is precious. Thank you very much! Send you my love and light “+Table of contents Version 2.0. Last Update: Jan 30, 2023. Introduction My vision My design journey What to expect Part 1 - Introduction to Design Systems History Whatis a Design System Definition Parts of the system Examples Do you need a design system? Benefits Challenges Signs that you need a Design System What to consider? Terms confusions “Component' vs “Pattern” library “UL kit” vs “Design system” 08 08 16 18 19 27 28 30 40 43 44 45 46 47 50 51 51Part 2 - Preparation & setting of the base Important notes Audit What is a design audit? From where to start? The ways you can do the audit How to organize and categorize? Audit checklist Understanding problems and needs Setting goals and framing the system Design system team How big should the team be? Team roles Team types From where to start Design system principles and rules How to define principles? Suggestions Part 3 - Foundations Tokens What are design tokens? When should you and shouldn't use tokens? 56 57 58 59 59 60 60 65 67 69 72 73 73 75 76 79 80 81 85 86 87 90Tokens’ benefits Token types Naming conventions Theming: what and how Do's and don'ts Tokens implementation Colors Glossary of terms Keeping branding in mind Color psychology Creating a base color palette Creating tints and shades Naming conventions Creating color styles Limiting Tint & Shade Quantity Accessibility Tokens Light and dark themes using tokens Typography Choosing a typeface Best typefaces Size units Building a type scale TABLE OF CONTENTS 91 93 95 97 99 101 103 104 105 106 109 113 119 121 123 126 131 135 142 143 148 150 156 04,Line height Naming conventions Building a typography system Creating Figma text styles Building a PRO typography system Documentation Spacing Glossary of terms Defining a spacing system Naming conventions Spacing Tokens Spacing usage Figma tips Grids and layouts [7 Glossary of terms Breakpoints Grid types Layout types Creating grids Complex layout grids Grid Tokens TABLE OF CONTENTS 159 161 162 166 169 176 180 181 183 186 188 189 191 194 195 197 199 201 204 213 218Part 04 - Components, patterns, templates What to consider before creating any component Not so atomic approach. There is a hierarchy. Naming conventions Scalability Connecting Tokens Documentation Components Core and compound components Component categories From where to start Creating components. Button. Method 1 Creating components. Button. Method 2 Testing components Patterns & templates What is a UI design pattern? Common UI design patterns & how to apply them How to create UI design patterns Where to find existing UI design pattern libraries Dark design patterns Templates How to create templates Pages TABLE OF CONTENTS Nod 222 223 227 228 229 230 232 233 234 236Part 05 - Documentation [EJ Documentation Why do we need documentation? Documentation types and tools Structure & what should be inside Part 06 - Implementation & scaling Adopt, Adapt or Create Adopt. What it is about and how to do it Adapt. What it is about and how to do it Create. What it is about and how to do it Which approach to choose? Tips for freelancers Freelance vs full-time How can design systems help freelance designers? How to use design systems to improve your efficiency? Outro - Final words What's next? Copyright © 2023 Marina Budarina. All rights reserved. 268 269 270 274 286 287 288 290 292 296 301 302 303 304 308 309 No portion of this e-book may be reproduced in any form without permission from the publisher (Marina Budarina).CHAPTER 12 Tokens Everyone out there is talking about tokens, and it’s for a reason. In this chapter, I'll explain tokens basics, and in the following chapters, we will cover tokens specifically for colors, typography, spacing, and sizing. Q Table of contents What are design tokens? [In this Free sample] When should you and shouldn't use tokens? Tokens’ benefits Token types [In this Free sample] Naming conventions [partially in this Free sample] Theming: what and how Do's and don'ts Tokens implementation TOKENS 86What are design tokens? From the perspective of the atomic framework, tokens are the smallest building blocks of the system - like quarks, you know:) Tokens Molecules Patterns 2© & Atoms Organisms Pages They contain information about the fundamental parts of the visual language, such as: @ Colors @ Border radius © Typography © Border width Sizing e Effects (shadows, blurs..) @ Spacing @ Elevation Tokens help to go from design to code seamlessly. They’re used instead of hard-coded values to ensure flexibility, clarity, and consistency. See the example below: static value, such as hex code for color, replaced with a self-explanatory name.Value Token B #FA4083 B color-primary The token's value can be: a color, a typeface, a measurement, or even another token: Global token Alias Token BB pink-s00 BB cta-background-color As you understand that, let’s reconsider the atomic framework in relation to tokens. The very essence, the smallest piece, is the raw value itself, and a token is this raw value + a shell (the naming). black-900 Raw value ETT PLYx] Token = Raw value + nameAnd as there can be several names - several levels of abstraction (we will cover that in the token types part) - there can be several shells (naming layers), which won't change the essence - the raw value itself. Giinueee Teena (Sones TOKENS 89Token types Tokens can take different levels in the hierarchy. Therefore, the way to organize and structure a token system will depend on how many levels of abstraction you would like to have. ‘Component B color-background-button Alias @ color-cta Global @ pink-s00 Raw value @ #racoss Reach Raw values. These are the raw values in code, such as color values (HEX, rgba), absolute and relative length & size units, percentages, numbers, etc. These are not tokens. Global tokens. These are primitive values in our design language, represented by context-agnostic (generalized) names. For example, with colors, global tokens refer to “what they are.” All design foundations start with a global design token and a value. TOKENS 93This single token is later inherited to alias tokens representing a specific context or abstraction in a design. Value Global token OB #racoss — OB pink-500 Alias tokens. They relate to a specific context and communicate the intended purpose of a token. Alias tokens are practical when a single value appears in multiple places. So instead of referring to colors by “what they are,” you can ‘also’ refer to them by “what they do.” Global token Alias tokens B pink-500 —_— B color-cta B color-notification Component-specific. They are the representation of every value associated with a TOKENS 94component. They often inherit from alias tokens but are named in a way that allows engineering teams to be as specific as possible in applying tokens in component development. Alias tokens Component specific B color-cta —_= @ color-button-primary-bg Token types are your guiding force for naming. However, you can use a different logic as long as others will understand it too. Naming conventions The key to a design token structure is consistency. We must use a predictable naming convention so design system users can easily find tokens and scale the system. *Design system users - designers, developers, etc. Names should be meaningful, logical, modular, and consistent. Here is one of the best practices for an alias or component- specific token’s naming structure: 1. Category. What attribute are you referring to? (colors, typography, shadows, spacing, border-radius, etc.) TOKENS 95N . Property/Type/Usage. Where is it being used? (text, background, icon, border, body, heading, etc.) . tem/Component. w What component is it affecting? (input, button, segmented control, checkbox, tab, link, etc.) 4. Sub-Item/Variant. Are there any variants? (primary, secondary, xl, |, m, s) All tokens may not have variants, and that is fine. 5. State. Is that an interactive component with states? (active, disabled, inactive, hover, focus). Example: If we wanted to create a design token for a primary active button using this structure, it might look like this: category rem state \ color-background- button-primary-active property cutee Or can be shortened: category Kem state color-bg- ptn- primary-active I propery sub-itemKey takeaways Tokens are the smallest building blocks of the system, and include sizing, spacing, color, typography, shadows, rounding, animation and others. Tokens allow us to create a single source of truth. There are 3 main token types: global, alias & component-specific. Depending on your specific case, different naming and hierarchies will work better or worse than others and it’s almost impossible to be right about all decisions until the end. Tokens open the door to cross-platform sharing & multi product theming.CHAPTER 13 Colors Colors can impact all areas of the design system. Hence, we should set it first. Then, before the UI stage - for wireframes and sketches - you can use shades of black and white. Setting color styles is a must, even if you don't (and won't) have a Q complete design system. Table of contents Glossary of terms [In this Free sample] Keeping branding in mind Colors psychology Creating a base color palette Creating tints and shades [In this Free sample] Naming conventions [partially in this Free sample] Creating color styles [partially in this Free sample] Limiting Tint & Shade Quantity [In this Free sample] Accessibility Color Tokens [partially in this Free sample] Light & dark mode using tokens coLors 103,Glossary of terms Before we get into the topic, | want to ensure we are on the same line. Let's cover some terms. HSL: (hue, saturation, lightness) is the alternative representation of the RGB color model. | will refer to this color space when we get to the practical part. Hue: means color, pure color (while a tint is hue+white, and shade is hue+dark). Saturation: range from pure color [100%] to gray [0%] (desaturated) Lightness: define how white the color is, ranging from pure black [100%] to white [0%]Base color: primary color in the extended pallet. Tint: a lighter value of a color. Shade: a darker value of a color. Tints Base Shades Keeping branding in mind First, you should understand that your palette should rely on branding. Think of Duolingo or Airbnb. Which colors and what feeling comes to your mind? They don't only have different colors but the whole branding system and tone of voice. coLors 105Creating tints and shades We created a base color palette by choosing primary, secondary, feedback, and neutral colors, but we need more. We need additional tints and shades of the base color to cover different use cases, Il show you several methods for creating an extended color pallet. Shortcut: use Tailwind pallet You can use Tailwind CSS color palettes as a base. Then, if you need - you can tweak colors. It is a great starting point if you don't have your specific branding in mind. You can search in the Figma community “Tailwind colors” or just Google, and you will land on their documentation page. I'll save links in the resources section.Automated way: use a plugin As an example, | will use our primary color. But first, let's follow the steps: 1 Take your base color — which will be in the middle between your tints and shades. . Run the “Color, Tint & Shade” generator plugin, input your base color hex value and generate the pallet. Here I'm using Figma. 3. Add or tweak shades. For me, the lightest tint is still dark; | would add one lighter shade. But you can tweak existing tints. Ei Xtole)s] go) A) Color, Tint & Shade Generator x Base Color #35088Manual way: play with lightness Here we will play with lightness and saturation. 1. Take your base color — the first step is the same. 2. Create tints. Add ~ +10 to the lightness value. 3. Create shades. Subtract ~ +10 from the lightness value. PPX E KBB PRE KER) PE Bid H:223 S:93 L:79 PER RECS H:223 S:93 L:89 WYRE BY) H:223 5:93 L95 Vek Eh eld ‘P Pro tip 1: increase saturation as you get further from the base color (~50% lightness). Because in HSL color space, as we create lighter and darker shades, the saturation impact decreases, and color starts to lookwashed off. Changing the saturation is a tiny tweak, but UI is all enone 590070 27 m0 ? Note: since our primary color already has high saturation=93%, about such tiny things. we don't need to increase it even more, though you can play with it. ‘P Pro tip 2: increase hue to make a color lighter, and decrease to make it darker. Sometimes it’s good to change the hue, to make sure that your wore o> | ES meenge oo 7) FBG Here is what happens if you change the hue in the opposite colors look rich and not dull. direction: coLorseee ae Create grayscale | already showed how you could create neutral colors from your primary color by changing lightness and saturation value: VERSA} PE KD Bh) 223 5:20:98 Now let's create a grayscale from it. Use the same manual technique | showed you above and pro tip 1. Add + 10 to lightness and decrease saturation value as lightness comes closer to 50%. That’s what | have:me es S14 L:80 16:90 20:98 Shortcut: use pre-made pallets. If you don’t want to create a neutral pallet manually, check the tailwind CSS color library. Do you want a slight hint of blue to bring more liveliness to these colors? Or do you want it to be completely neutral? It’s up to you. 200 eseu 4 900 #192815 700 #3F3F46 Neutral 200 05 400 fa 700 8404040 800 #262626 900 #17273Naming conventions Clear naming is a must for communication: using names like ‘primary color’ is more straightforward than some hardcoded values (#£C4899). Agree? It’s also crucial for maintenance and scaling. And as we already talked about Design Tokens, it would be great if the naming system also works for them. Global naming No context: Use literal color naming, like [red], [blue], and a numeric scale, where [50] is the lightest and [900] is the darkest. This approach is suitable for defining global pallet and using it as a reference for alias, content-specific tokens. blue-50 blue-100 blue-200 “ @ blue-s00 Semantic: Use color intent, like [primary], [secondary], [danger], [success], [error], [accent], and the same numeric scale. If your project is small & you are going to have only a few themes, you can go ahead with global semantic naming.Create color styles. We created a pallet; now it’s time to turn them into styles. Again, | use Figma, but you can apply this technique to any other tool. Let's say we have a set of colored layers with random names. Select frame, press Enter to select all layers, press “Ctrl+R” to rename, Input: Primary/ (Use Number J button), and tweak to Primary/$NOO, start ascending from 0. Rename 10 layers. x Preview Primary000| Primary/100 Primaryl200 Primary'300 Primary'$n00 ‘Start ascending from 0 Primaryi900 That's what you will get:WE colors colors 1s color swateh 1 Primary/000 Il) color swatch 1s Pelaryit00 1s color swateh 1b Pelmary/200 1s color swateh 1s Pelary/300 Ils color swatch 1) Pelary/400 1s color swateh 1b Peimary/500 1s color swaten 1s Primary/600 Ilr color swatch 1s Pelmaryi700 1s color swateh 1b Primary/600 1s color swaten 1b Primary/900 Rename Primary/000 to Primary/50. Select all layers again and run the “Styler” plugin. Click generate styles. Done! * Primary @ 400 @ v0 @ 20 @ 200 200 @ 700 100 @ om 50 @ s00 coLors 122Limit tint and shade quantity You don't need 50 different shades of gray. This will only create a paradox of choice where you won't be sure which gray to choose for other use cases. So instead, aim for about 6-10 and use them intentionally and consistently across all of your components. For example, | use neutral 600/500 for secondary text, neutral 900 for headings, 200/300 for dividers and borders, 50/00 for backgrounds, neutral 400 for secondary text in dark mode, etc. Here is an example from my design system: e 00 6-digit code 900 600 The same goes for other colors as well. Consider use cases, and that depends specifically on your project. A good example is an alert component, where the darkest shade [900] can be used for the text, while the lightest [50] is for the background. You canpractice such a component when creating tints and shades. Though the final solution will depend on the style you're going with, here is an example, and both options are good: blue-900 @ Some info message for the user. blue-50 blue-500 @ Some info message for the user. blue-50 Or consider a button, along with its states: hover, pressed/selected. Default Hover Pressed blue-600 blue-500 blue-700 blue-500 blue-400 blue-600 Button Cr nS CTY Youll quickly establish a pattern. Moreover, as you get to experience - all these decisions will become automatic for you, and you'll save yourself a lot of hours. | may assume you aren't Material Design or Shopify, intended to serve countless products. Therefore, you may not need to offer endless choices.The more choices you provide, the more challenging it'll be to control harmonic combinations and a consistent feel across applications. ® Pro tip 1: | usually go with 9-10 shades for primary and neutral pallets since | also design for dark mode. For small projects, six shades might be enough. Just be intentional in your choices. ‘P Pro tip 2: It might happen that you don’t need too many shades of feedback or accent colors, then you can trim your pallet up to 5-6 colors: light shades will go for backgrounds, while shades besides the base color are for different states: hover, selected, etc. ~~ = = 960860 v ” »- / / /866/ / coLors 125Color tokens ? Reminder: Design Tokens are used in place of hardcoded values to build and maintain a scalable, consistent design system. Read more in the “Tokens” chapter. Creating global tokens. We are going to use the plugin “Figma tokens.” ? Note: | assume that we already created color styles. 1. Run the plugin. TOKENS studio rr 2. Click styles - import styles. For example, we can import color, typography, and effect styles. Click Import. You'll see a list of all styles you have. If you don’t need some of them, delete them.Import styles What styles should be imported? Color Load Export Styles es Done. Congrats, you've made your first tokens:) v Color v Primary In the same way, you can update tokes by importing styles again: Existing Tokens Update all Primary.900 {color:"#0033e533";"type":"dropShadow’; +o lur's16;"spread":0} #1e3a8a Primary.800 {Ceolor"#00830533*Mype'*dropShadow'x0-y6-blur16"epreado) wteaoat +O It also works the opposite way - you can update tokens in the plugin and export them - it will update your styles. coLorsCreating alias tokens. Alias tokens are helpful if you have a multi-brand/theme design system. ? Note: all tokens support references to one another, so for example, if you want to alias {color.text.accent} to colors.blue.600, then you'd write {colors.blue.600} as a value. This means that we can use our global tokens as a reference: color-text-base B® reutral-900 color-text-subdued B® neutral-600 color-text-accent ® blue-600 So we refer to a global token and take the raw value from it. This allows us to change [text-subdued] to another value, for example, [neutral-500], without changing the color pallet itself: | just change the reference. So tokens are easily understood if you think of them from a developing perspective. B neutral-600 color-text-subdued ® neutral-500 coLors 33Or, if you have several themes, you don't have to change the naming. Instead, you can reference another value: B pink-600 color-text-accent B blue-600 So let's create some alias tokens. 1. Run the plu: 2. Add anew token. ¥ Primary °000000 3. Customize it. Give it a name and reference to a global token. Here you can whether type it or select the value from the dropdown: Name Text Accent Color #000000, hsia(), rgbal) or {alias} Primary.50 #eFrorr I Primary.s00 #307969 Co Ti Primary.700 #1D4ED8 coLors 134Done. The same way | added [Text.Base] & [Text.Subdued]. So now we have global and alias tokens. iii + ¥ Color Primary y Neutral + Text Sr) Light and dark themes using tokens. Tokens are handy for the creation of flexible systems. Let's start with the foundation - a global system, then build a light [default] theme on top of that, and after that, we will quickly create a dark theme by tweaking values. The most important here is to create a good structure and set proper naming conventions. Of course, that will depend on your project, scale, and needs. To use the “theme” feature, you will need to upgrade to pro in this plugin; I'll explain techniques for a free version.Key takeaways Colors can impact all areas of the design system. So setting color styles is a must, even if you don't (and won't) have a complete design system. Keep color phycology and branding in mind when creating color pallets for your designs. Start by creating your base color pallet, then add tints and shades, and reduce their amount if possible. Remember: an abundance of options requires more effort to choose. Keep accessibility in mind and follow WCAG guidelines, but don't rely on them dogmatically. A good naming system is a base for future scaling and ensures the design system stays stable. Tokens are the next step in the design game. It may be hard to set it right at the beginning, but in the long term, you will benefit from it.= + Create your base pallet by choosing primary, secondary, Homework and feedback colors. Create extended pallets by adding tints and shades. Limit their quantity. Create Figma styles. Create some components/text blocks, apply your color styles, use the "Contrast’ or “Ally - Contrast check’ Figma plugins, and ensure colors are accessible. Note: not all colors should pass the contrast ratio because some are supportive. Create a set of tokens. Practice creating an alias and component-specific tokens. Create light and dark themes. TOKENS 41That's it for the free sample | hope you have learned something or have refreshed some of your knowledge. Feel free to write me any feedback at ms.m.budarina@gmail.com If you liked this piece of content... ..then I'm sure you'll love the full version of the eBook. It has way more content and tips, which will help you improve your skills, become better at designing, more efficient, and as a result, land better projects. Along with the ebook, you will get Figma files and small video tips. Click here to get the eBook UI Design i CiayDid you like this Free sample? In return to this piece of content, all | ask for is your rating on gumroad Your rating: wkkkh View receipt Resend receipt Just click here