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