Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stratos tokens presentation 2020


Published on

Juan Maguid har samlat sin bästa tips om Design tokens. Vad är design tokens, varför finns dom och hur jobbar man med dom?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Stratos tokens presentation 2020

  1. 1. Design Tokens The what, they why & the how
  2. 2. ”In the world of UI, design tokens are subatomic particles.” Brad Frost, Atomic Design
  3. 3. ”With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.” Jina Anne, Salesforce
  4. 4. ”The themes are always changing, but the tokens stay the same” Kyle Gach, CA Technologies
  5. 5. Style Dictionary Demo
  6. 6. primary1Color Google Material UI
  7. 7. primary1Color
  8. 8. Header1 primary1Color
  9. 9. Header1 primary1Color
  10. 10. Header1 primary1Color I’m a happy button
  11. 11. Colors, Typography, Effects, Border Radius, Spacing, Animation Timing Line height, Z-index, Opacity, Transition, Media Query Duet Design System Basic Design Tokens
  12. 12. Design Tokens beyond colors, typography, and spacing. ”From a purely technical point of view, design tokens are organised lists of key-value pairs that describe design decisions. So it’s just a matter of convenience (and context) what are the boundaries that we assume when describing a UI via design tokens.” Advanced Design Tokens
  13. 13. Why use design tokens? ”It holds the definitions of styles” ”Styles should be in a single source of truth” Style Dictionary Presentation
  14. 14. Team Sketch2React We develop design system tooling Fredrik Ward Juan Maguid Product Design App Development Words & Tutorials Documentation Support & Community Product Design Web Design Words & Tutorials Marketing & Sales Support & Community
  15. 15. Stratos Tokens Workflow © Team Sketch2React 2018–2020
  16. 16. Stratos Tokens Workflow Create & update your tokens in the apps you ❤ and use every day © Team Sketch2React 2018–2020
  17. 17. Stratos Tokens Workflow Export to design tokens code (JSON) via Stratos Tokens You now have a live link between your design app & Stratos Tokens © Team Sketch2React 2018–2020
  18. 18. Stratos Tokens Workflow Export to design tokens code (JSON) via Stratos Tokens Translate to iOS, Android & SCSS via our built-in Style Dictionary support © Team Sketch2React 2018–2020
  19. 19. Demo Time! 😺😺😺
  20. 20. Style Dictionary Demo #2 In this demo Fredrik shows us our built-in Style Dictionary support for updating the demo iOS App
  21. 21. Thanks, here’s some related links 🤖🤖🤖🤖 • The Nine rules of Stratos Tokens • What is a Style Dictionary? • More articles about Stratos Tokens • Material UI Theme Generator • Jump onboard our Stratos Beta Program © Team Sketch2React 2018–2020