Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.

1. Design System
To build an efficient
Fail, Learn, Build, Test
Paya Do

2. Introduction
Works & Skills
日本語ができる
Web 3.0
React.js
Material Design
Android
Team member, fellow engineer
Kentaro Teramoto
https://github.com/zigen
Me, your friendly
neighborhood designer
Paya Do

4. via ‘https://jp.merpay.com/’

5. MercariX applications
Make transactions possible without the need
to trust others
Provides a protocol that allows it to function
as a marketplace on the Mercoin economy
Internal Use. No intention of sharing publicly or implementing externally.
More at ‘mercariX - Decentralized Marketplace’

6. Communication Design
& Experience Design

7. Mercari Japan
Help guide UI renewal
Adding keyword search form
with auto-complete
Changing to drop-down menu
Adding web / desktop version
Customer support chatbot

8. In this role, you will be responsible for creating UI components that are part of design-only libraries used by our Product Designers.
You will partner with the overall Product Design team to shape the visual appearance of our Design System, engage with our UX Writer to
document it, and align with UI Engineers for implementation.
You will want to work with us if you like:
Tomorrow’s technology
To think about small details that affect an entire ecosystem of applications
To translate specs and requirements into scalable, visual solutions
To think about colors, typography, and spacings in a systematic way
To contribute, maintain, and help in documenting an always-evolving library of components
To partner with roles that spread across different disciplines, such as Product and Engineering
via ‘Netflix - UI Designer, Design Systems - Content Platform’

9. Design System
By the people, for the people

10. A Design System is the single source of truth
which groups all the elements that will allow the
teams to design, realize & develop a product.

11. s
The Structure of a Design System
via UXPin
Templates Modules Components Elements
UI Patterns
Color Palettes Typographic Scales Grid Definitions Icons & Assets
Design Principles Implementation Guidelines Editorial Guidelines
Building Blocks
Rules

12. Atomic Design
Atom > Molecule > Organism > Template > Page

14. Internal Use. No intention of sharing publicly or implementing externally.

15. Internal Use. No intention of sharing publicly or implementing externally.

16. The repository of publicly available design systems and pattern libraries
via ‘https://adele.uxpin.com/’

17. Why do we need
a Design System?

18. 1. Keeping the same look and feel across
the product

19. Does your product has this
Color pallette?
...

20. 2. Source of truth, manual of
standards for the product team

21. Design + Code + Documentation
Airbnb Datepicker Library
for the web.
Built on storybook js
https://storybook.js.org/

22. Figma
Real-time, multiplayer. Code-based components.

23. 3. Product scales.
Design needs to scale, too.

24. People Product
New trends, new hirings, new teams…

25. To overcome these challenges thousands of companies
are investing in Design Systems.
So how to get your team on-board?

26. Find the 50 shades of grey moments.
Is everyone happy with the speed of dev & code tasks?
“How do we build this?” “It doesn’t match the design?”
…
Then start with a UI inventory!
And do not give up on talking to people everyday.

27. UI Inventory

28. via ‘The Atomic Workflow - Brad Frost’

29. Build your design system on-top of a mature product.
Do not shoot at multiple targets.

30. Design System > Usability > Accessibility
“Accessible design allows users of all abilities to navigate, understand, and use your UI successfully.”

31. Material UI Guideline

32. Why is this important
for a mature design
system?
Design system acts as a foundation
for our inclusivity efforts.
Look for Web Content Accessibility
Guidelines 2.0 to know more.
red-blind green-blind

33. Design System ROI for the Developer Team
ROI = Return of investment
2.5h/week * 52 weeks * $75 * 50 devs = $487,500/year
via ‘UXPin’

34. Question?