Design Tokens - Speaker Deck

Slide 1

Slide 1 text

Design Token Daniel Wang March 2022 UX Episode

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

DANIEL WANG Experience Design Lead - DDC Focus - Design framework and capability (GEL) - Design processes and tools - Design operations

Slide 4

Slide 4 text

Agenda • What is Design Token • Types of Design Token • Approach & Toolings • Demos • Future of Design Tokens • What is next

Slide 5

Slide 5 text

Why

Slide 6

Slide 6 text

Platforms Problem space

Slide 7

Slide 7 text

Web Technologies Problem space

Slide 8

Slide 8 text

AEMO’s branding and UI keep evolving Problem space

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

Invention of Design Tokens What is Design Token

Slide 11

Slide 11 text

What is Design Tokens

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Benefits of using design tokens What is Design Token • Scalability • Consistency • Maintainability • Design -Dev handoff • Design language • Reduce QA time

Slide 15

Slide 15 text

Types of Design Tokens • Font family • Font weight • Font sizes • Colours • Spacing • Radius • Shadows • Z indexes • Motion • Opacities • Media queries What is Design Token

Slide 16

Slide 16 text

Token name convention What is Design Token

Slide 17

Slide 17 text

What is Design Token Examples JSON CSS XML JS

Slide 18

Slide 18 text

Example What is Design Token

Slide 19

Slide 19 text

Approach and Tools

Slide 20

Slide 20 text

Approach Approach and Tools

Slide 21

Slide 21 text

Design demo

Slide 22

Slide 22 text

Figma Demo

Slide 23

Slide 23 text

Approach and Tools Style Dictionary Token Transformation

Slide 24

Slide 24 text

Tokens transformation Approach and Tools

Slide 25

Slide 25 text

Approach and Tools Consuming tokens

Slide 26

Slide 26 text

Code demo

Slide 27

Slide 27 text

Code Demo

Slide 28

Slide 28 text

Document demo

Slide 29

Slide 29 text

Document

Slide 30

Slide 30 text

Future of Design Tokens

Slide 31

Slide 31 text

Technology integration Future of design tokens at AEMO

Slide 32

Slide 32 text

Architecture Future of design tokens at AEMO Design tokens are design decisions propagated through many systems

Slide 33

Slide 33 text

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