Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project! ------------------ Follow me on Instagram to learn more about design https://www.instagram.com/fazurrehman/ ------------------ Understand Design System A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system! I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀ Interested to work with me, let's start working together! fazurrehman@gmail.com

1. BUILD
A DESIGN
SYSTEM
HOW TO
PART 1
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design

2. Before going forward!
first, understand What is
design system?
A Design System is the single source of truth, which
groups all the elements that will allow the teams to design
and develop a product even can be assembled together
to build any number of applications and Design system
can be included things like.
Design Principle Design Token UX guidelines
Development
guidelines
UI Patterns
Remember UI Kit is not a design system, It can be a part of the design system!
2
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design

3. faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
Understand difference 3
What’s the difference
between a design system
and a style guide?
The design system is more complex than a style guide and
style guide is a simple collection of colors, typography &
other elements which can help to identify the brand.
According to Emmet Connolly, Director of
Product Design at Intercom, “most Design
Systems are really just Pattern Libraries: a big
box of UI Lego pieces that can be assembled in
near-in!nite ways. Your product is more than
just a pile of reusable UI elements. It has
structure and meaning.

4. According to Atomic Design
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
There are so many benefits to
creating a design system like
Many more…
It provides a future-friendly foundation to grow and involve
the system over time.
Make things easier to test UI
Establish shareable vocabulary between disciplines and
di!erent products
Allows for generating higher quality design
Allows for faster production
Design system promote UI consistency, allowing user to
get done what they need to get done
4

5. Focus on right clients 5
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
Before providing a solution, understand they really need
design system? if yes then why they need?
Who have multiple digital products and now they are
struggling with design.
Who are trying to extend their business
Who are running business last serval years (2-5 years)
There are many types of clients, you can offer them a
design system
Don’t try to sell design system to startup, reason !rst they just
begin and they didn’t scale their business so it is very hard to sell,
because for design system you need to scale business and look
into problems & challenges.
Lastly, understand, the Design system is a way to solve the
design+business problems but you should !nd right clients
and right companies.
How to sell design system?

6. Heading
body text
Gilroy font
Aa
Regular
Medium
Bold
Extra Bold
Say hello, I am gilroy typeface
Say hello, I am gilroy typeface
Say hello, I am gilroy typeface
Say hello, I am gilroy typeface
How to define design system 6
Understand the design system
is not about working in isolation
it's all about collaboration!
If you are working individually, you may start from create
style guide & It’s good start for individual designer.
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
Colors (brand, gradients, accents)
Typography
Layout/Grid
Spacing
Accessibility Colors
Content
More…

7. And then you can start 7
Building ui components
Example
Buttons
Modals
Form elements
Data Tables
On-o! switches
Dialogs
Toolbars
Checkboxes
Dropdown menus
Sliders
Steppers
More…
Button
Button
Button
Pressed
Disabled
Default
Default
Pressed
Disabled
Cover
The card container is the only required element in a
card. All other elements shown.
14/05/2018
Date
Faizur Rehman
Card Holder
4345 43457123 71235354 53540023 0023
14/05/2018
Date
Faizur Rehman
Name
300$
Upcoming Payment
Add Shop Amazon AliExpress
Complete
Introduce yourself
Choose your account
Confirm email address
After this step your card will be send
Vertify your identify
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design

8. Valuable sources 8
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
https://www.designsystems.com/
Design System
http://atomicdesign.bradfrost.com/
Atomic Design Book
https://www.designbetter.co/design-systems-handbook
Design Systems Handbook
https://www.uxpin.com/create-design-system-guide/
Design System Starter Kit Books

9. Part 2 | Coming soon 9
I will continue design system
post in part 2 and I will tell you
what is complete roadmap to
build a design system!
faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
These are basics about design system, somehow you can
start building in your own way, but truth is there are lots of
things you need to do in the way to create design system!
I will everything in the next post.

10. faizurrehman.com
Faizur Rehman
@fazurrehman
Follow on Instagram
youtube.com/faizurrehman
Learn UX/UI Design
Don’t forget to tag your
friends in comments