Design Tokens

Transcript

1. Design Token Daniel Wang March 2022 UX Episode
2. We acknowledge the Traditional Owners of country throughout Australia and recognise their continuing connection to land, waters and culture. We pay respect to their elders past, present and emerging.
3. DANIEL WANG Experience Design Lead - DDC Focus - Design framework and capability (GEL) - Design processes and tools - Design operations
4. Agenda • What is Design Token • Types of Design Token • Approach & Toolings • Demos • Future of Design Tokens • What is next
5. Why
6. Platforms Problem space
7. Web Technologies Problem space
8. AEMO’s branding and UI keep evolving Problem space
9. Problems we want to solve Problem space How do we implement design across platforms and devices? How do we make future visual design changes faster? How do we scale design across our ecosystem consistently? How do we keep systems and web app UI updated?
10. Invention of Design Tokens What is Design Token
11. What is Design Tokens
12. Definitions What is Design Token • Design tokens are named entities that store raw, indivisible design values like colors or sizes etc. • They are the core pieces of a design system. • Stored in a technology agnostic format they can be transformed for use on any platform, replacing hard-coded values.
13. Definition continue What is Design Token • Are not just variables • Describe intent and design decisions • Represent the single source of truth • Are scalable and consistent
14. Benefits of using design tokens What is Design Token • Scalability • Consistency • Maintainability • Design -Dev handoff • Design language • Reduce QA time
15. Types of Design Tokens • Font family • Font weight • Font sizes • Colours • Spacing • Radius • Shadows • Z indexes • Motion • Opacities • Media queries What is Design Token
16. Token name convention What is Design Token
17. What is Design Token Examples JSON CSS XML JS
18. Example What is Design Token
19. Approach and Tools
20. Approach Approach and Tools
21. Design demo
22. Figma Demo
23. Approach and Tools Style Dictionary Token Transformation
24. Tokens transformation Approach and Tools
25. Approach and Tools Consuming tokens
26. Code demo
27. Code Demo
28. Document demo
29. Document
30. Future of Design Tokens
31. Technology integration Future of design tokens at AEMO
32. Architecture Future of design tokens at AEMO Design tokens are design decisions propagated through many systems
33. Design - Dev handoff Methodology • Creates common design language between designers and developers • Text XL, Heading 3 • Purple 500, Slate 100 • Spacer 2, Radius SM • Elevation high
34. Dark mode vs Light mode Future of design tokens at AEMO
35. Recap Problem space
36. Methodology
37. Atomic Design Methodology
38. Questions & Thank you!