Louis_Chenais____Design_Systems_Nantes__1_Bien_initier_son_Design_System___2020.pdf

 Louis_Chenais____Design_Systems_Nantes__1_Bien_initier_son_Design_System___2020.pdf

Da8473ea2fde4ace25362603e93f8ea0?s=128

DesignSystems44

May 20, 2020
Tweet

Transcript

  1. Introduction to Design tokens @chuckn0risk | Design Systems Nantes #1

    : Bien initier son Design System | 2020
  2. None
  3. None
  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
  5. None
  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
  11. None
  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