Louis_Chenais____Design_Systems_Nantes__1_Bien_initier_son_Design_System___2020.pdf

Transcript

1. Introduction to Design tokens @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
4. Hello ✌ Louis Chenais Co-founder & Front-End Developer @ Specify @chuckn0risk Previously • Front-End Developer @ SportEasy, 5emeGauche & Ultranoir • Author of “Design Tokens for Dummies” • Member of the W3C Design Tokens Community Group @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
6. Summary 1. Introduction 2. What are design tokens? 3. How to create and use them? 4. TL;DR @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
7. SaaS destructuration 1. A SaaS is composed of features 2. A feature is composed of interfaces 3. An interface is composed of components 4. A component is composed of design tokens @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
8. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
9. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
10. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
12. What are design tokens? "Design tokens are an abstraction for everything impacting the visual design of an app/platform" — Sönke | @soenkerohde @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
13. What are design tokens? "Design tokens are cross platform variables that define key design data" — Sarah Federman | @sarah_federman @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
14. "Design tokens are the visual atoms of the design system - specifically, they are named entities that store visual design attributes. We use them in place of hard coded values (such as hex values for colors or pixel values for spacing) in order to maintain a scalable and consistent visual system." — Jina Anne | @jina What are design tokens? @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
15. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
16. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 DESIGN TOKENS
17. Your design primitives Design tokens are… More like constants Technology agnostic The basis of your UI @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
18. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 Designing Standard Systems https://t.co/MqLj7SQjlR
19. Design tokens allow product teams to better collaborate and ensure brand consistency across any platform. TL;DR @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
20. @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
21. 21 ➡ https://github.com/salesforce-ux/theo
22. 22 ➡ https://amzn.github.io/style-dictionary
23. 23 ➡ https://specifyapp.com
24. Design tokens can be… Design options @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 Design tokens that have no context of use. They are at the core of your brand UI.
25. Design tokens can be… Design decisions @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 Design tokens that are at the component level. They inherit from design options.
26. Example of a design tokens file (JSON) @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
27. Design tokens are canonical @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
28. Design tokens are agnostic @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 They can be used anywhere, in any platforms or any tools. In order for your design tokens to navigate freely from one tool to another, they must be as agnostic as possible.
29. Design tokens are contextual @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
30. Design tokens are relational @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020
31. Design tokens make you save money @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 Multi-product components become easily themable: ➡ This lowers the cost of scaling. Updating the style of a component only requires an update of few values a single JSON/Yaml file: ➡ This lowers the cost of change.
32. TL;DR: Design tokens make your design system… @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020 Consistent: you can make change at one place and it will be reflected everywhere the token is applied. Resilient: since your design tokens are agnostic you don't have to worry about new technologies coming out. Your brand variables and assets are resilient to change. Flexible: you can change a specific token no matter its context of use. You could change a core color which has a broad reaching change or the background color of a component in a specific state.
33. Shoukran @chuckn0risk | Design Systems Nantes #1 : Bien initier son Design System | 2020