A design system is a comprehensive guide for project design that includes rules, principles, constraints, components, and best practices. It enhances consistency, communication among teams, and speeds up the design and development process by utilizing a predefined component library. To create a design system, it involves a structured approach of organizing design elements into atoms, molecules, organisms, templates, and pages.

1. Design System
How it improves the process
Design System
How it improves the process

2. Whatisa
DesignSystem?
DesignSystemisacomprehensiveguide
forprojectdesign–acollectionofrules,
principles,constraints,componentsand
bestpractices.

3. Doweneeda
DesignSystem?
Scale
Willyourproduct(s)grow
significantly?
Consistency
Doyourproductneeds
consistentbranding?
Teamwork
Domultipledevs&designers
workssimultaneously?

4. Companiesusing
DSMs
Material Design System Human Interface Guidelines Fluent Design System
Atlassian Design System Uber Design System Polaris Design System

5. WhatisTheBenefitsof
UsingDesignSystem?

6. Consistency
Developers are able to implement
consistent UI much easier. They can think
of the particular page as of the set of
components.

7. Higher Standard
Consistency makes the impression of
higher quality. QA Specialists will easily
monitor the implemented design with
Design System documentation.

8. Better
Communication
with Dev Team
Design System uses a specific naming
convention in the project. When the
developer and designer discuss the page,
they will use the same names of the
components.

9. Faster Design &
Development
Process
We have already built component library of UI
controls needed to implement. Now we just
use them when the new feature requires to
create a new page or modify the existing one.

10. Focus More on
UX, Less on
Visuals
Using UI Library means we do not have to
figure out every time what should be the
appearance of the components on this page.
We can focus more on better usability and
delightful experiences.

11. HowtoBuildDesign
System?

12. Atomic
Design
Atom Molecules Organisms Templates Pages

13. Atom
1 Color Theme
Selecting specific numbers of
colors
2 Typography
Creating a fixed number of
text styles
3 Iconography
Organise icons that will be
used in the design
4 Grid
Lower unit of measumenet for
the design

14. Molecules
They are groups of atoms that
work as a single component
with a single function
Dropdown menu
Radio buttons inside
regular button
Dropdown button
Date picker
Search component
Blockquote
Breadcrumb
Card component
Collapsible group item
Input fields (with labels
Media uploader
Loading component
Notification
Pagination

15. Organisms
Theyarecombinationsof
multiplemoleculesandhave
morethanonefunction.
Navigationbar
Tabbar
Videoplayer
Musicplayer
Mediagrid
Progressindicato
Table
Carousel
Forms

16. Feeling Confused?

17. Let’s Solve
Together
Atom Molecules Organisms

18. Templates
They are combinations of
multiple oraganismsi and
have multiple functions.
Pofile Sectio
Multiple Listin
Grids

19. Pages
They are combinations of
multiple oraganismsi and
have multiple functions.
Whole UI

20. Howtohandoff
DesignSystem?
DesignDocumentation
Detaileddocumentationwithallthepossible
sceneiros
Design
Token
Tokensarecreatedbydesigners.Devcanuse
themintheirproductsdirectly