B

u
tt
o
n
B
u
tt
o
n
h
1

h
2

h
3

v
a
ri
a
b
le
s

UI Design

Systems Mastery
Mastering Design Techniques
to Stay on Top of the Market

Marina Budarina
Table of contents
Version 3.0. Last Update: Jul 8, 2023.

Introduction 08

Part 1 - Introduction to Design Systems 18

History 19
What is a Design System 27
Definition 28
Parts of the system 30
Examples 40
Do you need a design system? 43
Benefits 44
Challenges 45
Signs that you need a Design System 46
What to consider? 47
Terms confusions 50
“Component” vs “Pattern” library 51
“UI kit” vs “Design system” 51

Part 2 - Preparation & setting of the base 56

Important notes 57
Audit 58

Table of contents 02
 What is a design audit? 59

From where to start? 59

The ways you can do the audit 60

How to organize and categorize? 60

Audit checklist 65

Understanding problems and needs 67

Setting goals and framing the system 69

Design system team 72

How big should the team be? 73

Team roles 73

Team types 75

From where to start 76

Design system principles and rules 79

How to define principles? 80

Suggestions 81

Part 3 - Foundations 85

Tokens 86

What are design tokens? 87

When should you and shouldn’t use tokens? 90

Tokens’ benefits 91

Token types 93

Naming conventions 95

Table of contents 03
 Naming conventions

Theming: what and how 97

Do’s and don’ts 99

Tokens implementation 101

Colors 103

Glossary of terms 104

Keeping branding in mind 105

Color psychology 106

Creating a base color palette 109

Creating tints and shades 113

Naming conventions 119

Creating color styles 121

Limiting Tint & Shade Quantity 123

Accessibility 126

Tokens 131

Light and dark themes using tokens 135

Typography 142

Choosing a typeface 143

Best typefaces 148

Size units 150

Building a type scale 156

Line height 159

Naming conventions 161

Building a typography system 162

Table of contents 04
 Creating Figma text styles 166
Building a PRO typography system 169
Documentation 176
Spacing 180
Glossary of terms 181
Defining a spacing system 183
Naming conventions 186
Spacing Tokens 188
Spacing usage 189
Figma tips 191
Grids and layouts 194
Glossary of terms 195
Breakpoints 197
Grid types 199
Layout types 201
Creating grids 204
Complex layout grids 213
Grid Tokens 218

Part 04 - Components, patterns, templates

What to consider before creating any component 222
Not so atomic approach. There is a hierarchy. 223
Naming conventions 227

Table of contents 05
 Scalability 228
Connecting Tokens 229
Documentation 230
Components 232
Core and compound components 233
Component categories 234
From where to start 236
Creating components. Button. Method 1 237
Creating components. Button. Method 2 242
Testing components 247
Patterns & templates 254
What is a UI design pattern? 255
Common UI design patterns & how to apply them 255
How to create UI design patterns 259
Where to find existing UI design pattern libraries 260
Dark design patterns 261
Templates 262
How to create templates 263
Pages 264

Part 05 - Documentation 268

Documentation 269

Table of contents 06
Part 06 - Implementation & scaling 286

Adopt, Adapt or Create 287

Tips for freelancers 301

Part 07 - Variables New Part 308

What are Variables? 310

Types of Variables 312
Types of Tokens 313
Organizing variables with collections, groups & modes 314
Tips for creating variables 316
Color variables 327
Number variables 335
Boolean variables 342
String variables 347
Simplifying components using variables: mixed modes. 349
How variables can be used 354

Outro - Final words 358

Copyright © 2023 Marina Budarina. All rights reserved.

No portion of this e-book may be reproduced in any form without

permission from the publisher (Marina Budarina).
Introduction
Hey there,

I am Marina Budarina - a digital product designer and creator of

this e-book. First and foremost, thank you for trusting me and

purchasing my content to be a part of this learning journey.

That’s me!
And here is my

Great to see you! Instagram

@marina_uiux

Before we dig into the theory and practice, I want to tell you a little

about my journey, the obstacles I have met, and my vision - to

encourage you and give light on why I wrote this e-book.

My vision

First, I am from a small city in Kazakhstan.

Second, I am a software engineer - that is my initial degree.

Third, I am a self-taught designer.

I began my self-taught journey by gathering information from

different sources, applying them in the form of practical solutions,

and eventually spending hours and hours figuring things out on my

own. It was
Introduction not easy, but I got through it.

08
Third, I am a self-taught designer.

I began my self-taught journey by gathering information from

different sources, applying them in the form of practical solutions,
and eventually spending hours and hours figuring things out on my
own. It was not easy, but I got through it.

To make it less complicated and easier to navigate this field for

many beginners and professionals alike, I conceptualized and
brought this e-book to life. It aims to gather all the ideas and
concepts that have profoundly helped me and that you can use in
your design journey.

All your experience matters, and all of it will help you.

I have done many different things in the past, some just as a

hobby, some I took very seriously. But all of it made me who I am.
And if you think you are a zero at something - you may be wrong.

Experience Skills

Culture

You ≠ Zero
Inter
ests
ies
Hobb

Initially, I needed to gain experience in the design itself. Still, I did

photography, knew Photoshop, had an eye on aesthetics, was
creative, had communication skills, understood programming,
learned psychology, etc.

Introduction 09

You do know something, and you do have skills. Let them be your
Initially, I needed to gain experience in the design itself. Still, I did
photography, knew Photoshop, had an eye on aesthetics, was
creative, had communication skills, understood programming,
learned psychology, etc.

You do know something, and you do have skills. Let them be your
strengths.

If you do something - be committed. Otherwise - quit.

If you are 100% sure that something will not be helpful or you do not
want to do that, just quit. Because even if it is applicable, you have
already decided, in your head, that it is not - you framed yourself.

For example: only go to a lecture or a masterclass if you are going

to pay attention, if you are going to commit, and if you haven’t
come just for the sake of being there.

During my university program, I was one of the best students. But

you know what? I skipped classes that I did not find helpful or those
that were giving low value to me. I did that not because I was lazy: I
worked a lot, earned money, and learned things on my own. But in
a better, more efficient way. I valued my time and effort and did
not want to waste it.

As a result, I could do more, and I did it well. Teachers loved me,

and I was happy.

Introduction 10
My design journey

At the beginning of 4th year, in parallel with my university program,

I got into design.

How it started: my friend asked me for “help” - to create designs

for Instagram posts. After that, I began to explore design more, just

for fun. I designed some websites and even posted some of my

works on Instagram - initially, it was just a hobby.

Next, the same person asked me to design a taxi app. I have not

been paid. However, that was a significant step, after which I

gained some confidence and started to get some projects from

Instagram.

After a while, I got into one of my first big projects - a start-up

(SunnyPeople). We were creating a product for brands and

influencers to run their business on Web3.

How did I land this job?

What helped me? Design skills - maybe, communication - mindset

- perhaps. But it was all together, all my previous experiences, that

made me who I am. That is what let me in.

But to use actual data and not rely just on my assumptions, I have

asked the manager, and here is what he said:

“1. Ability to understand the product and customer and put

yourself in the customer’s shoes.

Introduction 11

2. Proposing structure and steps rather than jumping straight into

But to use actual data and not rely just on my assumptions, I have

asked the manager, and here is what he said:

“1. Ability to understand the product and customer and put

yourself in the customer’s shoes.

2. Proposing structure and steps rather than jumping straight into

UI and drawing.

3. Resourcefulness: You never design based on your knowledge,

but you are resourceful and always see what other apps and

products do and consider that.

4. Not afraid to push back and provide your opinion based on your

intuition and experience. Junior people typically accept everything

managers say and never offer their opinion. Managers (or any

human!) can be wrong many times. You used to tell me. You

disagreed and preferred another method/approach (of course, in

a respectful way).

5. Coachable: You are very coachable, take feedback, adapt,

improve, etc.

6. Kind: Last but not least, you were a nice and kind person who

was pleasant to work with. We had fun, we joked, and you were a

good team member. That is very important for me, too, and teams

in general as well.”

So it was not so much about actual skills but all my knowledge,

values, and experience that allowed me to think and act in a

specific way.

So here my
Introduction idea or vision takes place: 12
values, and experience that allowed me to think and act in a

specific way.

So here my idea or vision takes place:

No matter what you do, the more diverse your knowledge

and experience are, the better.

That allows you to see problems from different perspectives,

provide better results and grow faster.

This is why knowledge about design systems will be helpful

not only to designers but to developers, managers, owners,

etc.

So let’s keep going with the experience.

Most of the time, when you work freelance and in start-ups - you

are the only designer in a team. That was the case. So I’ve started

to work from 0, doing research, analysis, IA, wireframes, and

eventually UI.

And here we get closer to the design system…

There are problems that you may not face in small projects or

when you are a junior designing only several screens, but trust me,

when a product is big and grows, the wrong approach and flawed

system can create a lot of trouble.

Simple example: when there are a lot of the same screens, and if

your team at some point decides to change one color, change a

component, or add some tiny element - it will take you hours of

tedious work to change it on all 100+ screens. Or if you did not

agree at the beginning on how the pop-up should work or what

happens on
Introduction bigger screens - it will require extra time, 13

communication, and energy, which you may not have at this point.

Simple example: when there are a lot of the same screens, and if
your team at some point decides to change one color, change a
component, or add some tiny element - it will take you hours of
tedious work to change it on all 100+ screens. Or if you did not
agree at the beginning on how the pop-up should work or what
happens on bigger screens - it will require extra time,
communication, and energy, which you may not have at this point.

If there is some complicated labeling system in the design, you

may explain it once, but in a month, everyone will forget, you will
have to repeat it, or even worse - you will forget. And if you will
leave the project - this information will stay only in your head…

Do you see?

Instead of being a designer that creates a good product,

you become a pixel mover.

There was a lot of work, and my time was limited. So from my side, I
did everything to simplify the process.

I have created color and typography styles. I was turning elements

into components as I was designing UI. I did that back then only to
enhance and speed up my workflow and keep things consistent
while just reusing parts I have created smartly.

And I knew if I needed to change something - I would not have to

go through each screen repeatedly. I will change it in one place -
and done. Easy and quick.

So as I was
Introduction simplifying my design processes, documentation came14
into place. And here is a big thanks to one of the best managers I
while just reusing parts I have created smartly.

And I knew if I needed to change something - I would not have to

go through each screen repeatedly. I will change it in one place -
and done. Easy and quick.

So as I was simplifying my design processes, documentation came

into place. And here is a big thanks to one of the best managers I
have worked with, who became for me a very good friend: Ramzi
Assaf. He was very involved in the process and forced me to
document some rules on confluence (we used Jira (Atlassian) for
our product management). So I started to put some notes in Figma
as well for each case.

This way, I didn’t have to spend much time explaining my

reasoning and components usage rule over and over again. I also
did not keep redundant information in my head, reducing mental
overload.

Bit by bit, We were creating a design system. But, of course, it was

not complete or perfect. And as you see, I did not know much
about design systems back then, and it was an outcome, a need,
that made the whole process easier, organized, and helped the
entire team.

A design system was a need, and as a result, that made the

whole process easier and organized and helped the entire
team.

Introduction 15
What to expect?

In this e-book, I will tell you about: what a design system is, why you
need or do not need it, what purposes they serve, from which
components it consists, how to build your design system most
efficiently, and how to use it.

You will understand how to collaborate with the team,

communicate with clients about the design system's needs, and
explain its value.

And as a result, you will be able to build design systems from

scratch or make a reusable design system for your future projects.

You will be able to improve your skills and knowledge, increase

your efficiency, work faster, create better products and provide
better results, get a promotion or a better job, impress your clients
with professionalism, and go to another level of your career.

You will learn how designs and prototypes are meant to be

translated into code, speed up the development process, and
reduce misunderstandings during the handoff.

If you are a non-designer, you will get a solid foundation and will be
able to break into UI/UX, product design, or even managing
processes.

Introduction 16
 Key takeaways
No matter where you're coming from and what are your
current conditions, nowadays you can learn from any
country, become a good specialist and change your life.
But it will require some diligence, hard work, and
discipline.

All your experience matters, and all of it will help you. The
more you know - the better. Diverse knowledge is a key
to a broad outlook on life and problems, which will help
you to become a great specialist

Knowledge about design systems will be helpful not only

to designers but to developers, managers, owners, etc

If you don't create a good foundation and suitable

processes for the design work, you can quickly become
a pixel mover; instead of being a designer that focuses
on logic, structure, UX, and UI

For me, a design system was a NEED that made the

whole work process more manageable and organized
and helped the entire team.

Introduction 17