B

ut
to
n
B
ut
to
n
h1

h2

h3

UI Design
Free
Sam

Systems Mastery
ple

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!

That’s me!
And here is my

Great to see you! Instagram

@marina_uiux

This free version includes some pages from 2 chapters - Tokens

and Colors. I hope it will be valuable to you and you’ll be able to

learn something new.

I 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 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

Table of contents 05
 Naming conventions 227

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 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).
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.

Table of contents

What are design tokens? [In this Free sample

When should you and shouldn’t use tokens

Tokens’ benefit

Token types [In this Free sample

Naming conventions [partially in this Free sample

Theming: what and ho

Do’s and don’t

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 :)

They contain information about the fundamental parts of the visual

language, such as:

Colors Border radius

Typography Border width
Sizing 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.

Tokens 87
 Value Token

#FA4083 color-primary

The token's value can be: a color, a typeface, a measurement, or

even another token:

Global token Alias Token

pink-500 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).

Name black-900

Raw value #282829

Token = Raw value + name

Tokens 88
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.

Component-specific Name

Alias Name

Global Name

Raw value

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 color-background-button
ity

Alias color-cta
ific
ec
Sp

Global pink-500

Raw value #FA4083

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.
This single token is later inherited to alias tokens representing a
specific context or abstraction in a design.
Tokens 93
global tokens refer to “what they are.”

All design foundations start with a global design token and a value.

This single token is later inherited to alias tokens representing a

specific context or abstraction in a design.

Value Global token

#FA4083 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

pink-500 color-cta

color-notification

Component-specific.

They are the representation of every value associated with a

component. They often inherit from alias tokens but are named in

a way that allows engineering teams to be as specific as possible

Tokens 94
in applying tokens in component development.
They are the representation of every value associated with a
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

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
Category. 

What attribute are you referring to? (colors, typography,
shadows, spacing, border-radius, etc.
Property/Type/Usage. 

Where is it being used? (text, background, icon, border, body,
heading, etc.
Tokens 95

Item/Component.

 Category. 


What attribute are you referring to? (colors, typography,

shadows, spacing, border-radius, etc.

Property/Type/Usage. 


Where is it being used? (text, background, icon, border, body,

heading, etc.

Item/Component.


What component is it affecting? (input, button, segmented

control, checkbox, tab, link, etc.

Sub-Item/Variant. 


Are there any variants? (primary, secondary, xl, l, m, s) All tokens

may not have variants, and that is fine

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 item state

color-background-button-primary-active

property sub-item

Or can be shortened:

category item state

color-bg-btn-primary-active

property sub-item

Tokens 96
 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.

Tokens 102
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

complete design system.

Table of contents

Glossary of terms [In this Free sample

Keeping branding in min

Colors psycholog

Creating a base color palett

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

Accessibilit

Color Tokens [partially in this Free sample

Light & dark mode using tokens

Colors 103
Glossary of terms
Before we get into the topic, I 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. I 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%]

Colors 104
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.

Duolingo

Airbnb

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.

I'll 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.

Colors 113
Automated way: use a plugin
As an example, I 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.
2. 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; I would
add one lighter shade. But you can tweak existing tints.

#356BF8

Colors 114
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.

H:223 S:93 L:59

H:223 S:93 L:69 H:223 S:93 L:49

H:223 S:93 L:79 H:223 S:93 L:39

H:223 S:93 L:89 H:223 S:93 L:29

H:223 S:93 L:95 H:223 S:93 L:19

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
about such tiny things.
Colors 115
 S:50 L:90 S:50 L:70 S:50 L:50 S:50 L:30 S:50 L:10

S:70 L:90 S:70 L:70 S:50 L:50 S:60 L:30 S:90 L:10

Note: since our primary color already has high saturation=93%,

we don't need to increase it even more, though you can play with it.

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

colors look rich and not dull.

H:51 L:90 H:51 L:70 H:51 L:50 H:51 L:30 H:51 L:20

H:55 L:90 H:53 L:70 H:51 L:50 H:45 L:30 H:40 L:20

Here is what happens if you change the hue in the opposite

direction:

Colors 116
 H:42 L:90 H:47 L:70 H:51 L:50 H:56 L:30 H:57 L:20

Create grayscale

I already showed how you could create neutral colors from your

primary color by changing lightness and saturation value:

H:223 S:20 L:8

H:223 S:93 L:59

H:223 S:20 L:98

Now let’s create a grayscale from it. Use the same manual

technique I showed you above and pro tip 1.

Add + 10 to lightness and decrease saturation value as lightness

comes closer to 50%. That’s what I have:

Colors 117
 S:20 L:8 S:15 L:18 S:12 L:28 S:11 L:38 S:8 L:50

S:10 L:60 S:12 L:70 S:14 L:80 S:16 L:90 S:20 L: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.

Colors 118
Naming conventions
Clear naming is a must for communication: using names like
‘primary color’ is more straightforward than some hardcoded
values (#EC4899). 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-900

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.

Colors 119
Create color styles.

We created a pallet; now it’s time to turn them into styles. Again, I

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 ↓ button), and tweak to

Primary/$N00, start ascending from 0.

That’s what you will get:

Colors 121
Rename Primary/000 to Primary/50. Select all layers again and run
the “Styler” plugin. Click generate styles. Done!

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, I 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:

00 900

6-digit code 900 00 6-digit code

Please enter the code we’ve sent to
600 Please enter the code we’ve sent to

+1 777 456 7890 400 +1 777 456 7890

300
600
Resend code in 0:58 Resend code in 0:58

500
Continue 600 Continue

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:
Colors 123
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.

You'll 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.

I 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.
Colors 124
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: I usually go with 9-10 shades for primary and neutral
pallets since I also design for dark mode. For small projects, six
shades might be enough. Just be intentional in your choices.

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.

50 100 200 300 400 500 600 700 800 900

50 100 200 300 400 500 600 700 800 900

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: I assume that we already created color styles.

1. Run the plugin.

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.

Colors 131
Done. Congrats, you’ve made your first tokens:)

In the same way, you can update tokes by importing styles again:

It also works the opposite way - you can update tokens in the
plugin and export them - it will update your styles.

Colors 132
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 neutral-900

color-text-subdued 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: I just change

the reference. So tokens are easily understood if you think of them

from a developing perspective.

neutral-600

color-text-subdued

neutral-500

Colors 133
Or, if you have several themes, you don't have to change the

naming. Instead, you can reference another value:

pink-600

color-text-accent

blue-600

Colors 134
 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.

Tokens 140
 Homework
Create your base pallet by choosing primary, secondary,
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 "A11y - 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 141
chapter 20

Variables

We were expecting tokens to be the updates of 2023, but Figma

released Variables.

As they say, Variables are not JUST tokens. They became a

compound solution for design tokens, along with calculations &

expressions, string dictionaries, conditional logic, parametric

design, and more is coming.

Table of contents

What are Variables

Types of Variable

Types of Token

Organizing variables with collections, groups & mode

Tips for creating variables

Color variable

Number variable

String variable

Boolean variable

Simplifying components using variables: mixed modes

How variables can be used

Variables 309
What are Variables?
Variables store reusable values that can be applied to all kinds of
design properties and prototyping actions.

They help save time and effort when building designs, managing
design systems, and creating complex prototyping flows.

For now, there are two main ways to use variables in Figma
Designs and design system
Advanced prototyping

In the 1st case, variables act as Figma native design tokens. They
are named entities that store values — like fill colors, padding,
visibility, and more — that can be reused throughout designs.

So everything that we discussed so far about Tokens applies here.

Logic stays the same, but now we can just use Figma UI instead of
a Plugin. And in this case, Variables = Tokens.

Variables 310
 Variables, AKA Tokens

In the 2d case, they help adjust prototypes to specific rules. And

this is "something else" that Figma brought to us.

Advanced prototyping,
using Variables

Credit: Figma Community.

Variables 311
Types of Variables

For now, Variables can store the following values

Color — use for fills & stroke

String — apply for text strings and variant names

Number — use for spacing, size, text layers, corner radius or

minimum maximum width and height

Boolean — true/false values for layer visibility of variant

instances

In V.2 is coming

Imag

Typography

number

color

string

boolean
Types of Tokens
We have previously discussed different types of tokens, including
global, alias, and component tokens (refer to page 93).

Now, let's take a closer look at these token types from a variables
perspective to clarify any confusion

Primitive variables - contain the actual value itself. They are

also known as global, base, or atomic tokens
Semantic variables - describe the intended use or purpose of
the variable and may refer to existing variables. They are also
referred to as alias, brand, or reference tokens
Component variables - are specifically associated with a
particular component.

So, when we refer to the graph on page 93, we are essentially

describing the same concepts using different terminology:

Component Component color-background-button

Semantic
city

Alias color-cta
cifi
Spe

Global Primitive pink-500

Raw value #FA4083

Reach

Variables 313
Organizing variables with
collections, groups & modes
To organize variables and make them easier to find we can create
groups and collections.

All variables are organized into collections. For example, we can

create a collection of primitives [global tokens] and alias tokens
[that will use global tokens as a reference].

Within one collection, we can have different modes,

which allow us to define alternative values & represent the different

contexts of our designs.

That opens doors to creating different styles of the same designs,

such as light/dark mode, modern/old-fashioned styles, or even
different
Variables
braidings.

314
which allow us to define alternative values & represent the different
contexts of our designs.

That opens doors to creating different styles of the same designs,

such as light/dark mode, modern/old-fashioned styles, or even
different braidings.

We can also create groups of related variables, such as surface,

spacing, text, border, etc...

Variables 315
Tips for creating variables
Manual method
How to add variables
From the right sidebar, click on the Local Variables section
Click + Create variable
Select a variable type from the dropdown
Give the variable a name in the first column, and a value in the
second column.

Repeat.

4
1

2
3

Shortcut: To duplicate a variable, select one or more variables

and press Shift + Enter.

Variables 316
Group variables

From the Variables modal, select multiple variables

Hold ⌘ Command / Control to select multiple variable
Hold ⇧ Shift to select a range of variable
Right-click the selection and select New group with selection.

1
2

Variables 317
 Pro Tip: to organize variables into a group automatically, when
naming a variable add / to it. Example: “red/50”.

Group created
automatically
Pro Tip: click and drag groups in the sidebar of the Variables
modal to reorder groups.

You can also click and drag groups into other groups to nest them.

Nest groups

drag to
reorder groups

Variables 318
Create and manage variable collections

To create or manage a variable collection

From the Variables modal, click Toggle sidebar so that it’s
visible
Open the collection dropdown and select Create collection

To rename or delete a collection of variables: open the

collections dropdown, choose the collection you want to
manage. Open the collections dropdown again and select
Rename collection or Delete collection.

1
2

Styles to Variables transfer

Most likely you already have color styles, so instead of creating

variables manually, let’s just use plugin

Press Shift+I, Search for “Styles to Variables” plugin and run it

All styles will be added to the new collection “Style Tokens”
Click on the collection dropdown and go to “Style Tokens
Rename collection to Primitives, by clicking on the dropdown
and choosing “Rename Collection”.
Variables 319
 Press Shift+I, Search for “Styles to Variables” plugin and run it
All styles will be added to the new collection “Style Tokens”
Click on the collection dropdown and go to “Style Tokens
Rename collection to Primitives, by clicking on the dropdown
and choosing “Rename Collection”.

3
1

2 4

Now just group them, by changing the group name from “Blue” to
“Color/Blue” and drag other groups inside the “Color”

add / to create
a group

drag other
groups to nest

Variables 320
That’s it for the free sample
I hope you have learned something or have refreshed some of your
knowledge. Feel free to write me any feedback at
[email protected]

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

Bu
tto
n
Bu
tto
n
h1
h2
h3

UI Design

Systems Mastery
Advance in your career

& become efficient designer

Marina Budarina
Did you like this Free sample?
In return to this piece of content,

all I ask for is your rating on gumroad

Just click here