How design tokens empower brand consistency at scale

Slide 1

How design tokens empower brand consistency at scale Louis Chenais Design System Day October 11th, 2023

Slide 2

Bonjour 👋

Slide 3

I’m Louis Chenais Co-founder & Chief Evangelist • W3C Design Tokens Community Group Editor • Design System aficionado Find me on • @chuckn0risk • lucho.cool

Slide 4

What’s in store for us:

01 Why we need design tokens
02 What are design tokens?
03 Design tokens best practices
04 Demo of a Design API
05 Q&A Session

Slide 5

Why we need design tokens

Slide 6

Crafting cohesive user experiences across several platforms is a real challenge

Slide 7

Design systems help teams to work together better

Slide 8

Slide 9

“A design system is the official story of how an organization designs and builds digital interfaces.” Brad Frost @brad_frost

Slide 10

However…

Slide 11

… we still all spend too much time recreating styles in our daily tools over and over

Slide 12

Anatomy of a SaaS 1. A SaaS is composed of features 2. A feature is made of interfaces 3. An interface is composed of components 4. A component is composed of design tokens

Slide 13

Slide 14

What are design tokens?

Slide 15

Slide 16

Slide 17

“Design tokens are a language for communicating intent between different parts of a system.” Ethan Marcotte @beep

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Simple vs Composite

Slide 23

Available types

Slide 24

Available types

Slide 25

Available types

Slide 26

Core vs Alias

Slide 27

Core Tokens A “core token” is the translation of a value into a semantic and agnostic identification. 27

Slide 28

Alias Token An alias token is the representation of the intent of a core token. The specificity of an alias token can vary from one usage to the other. Common usages are semantic and component values. 28

Slide 29

Slide 30

Who’s responsible for managing design tokens?

Slide 31

Source: State of Design Tokens 2022

Slide 32

Design tokens don’t travel well within our design systems (yet)

Slide 33

Our market direly needs a design token standard widely spread so that design decisions can transit freely across an organization tools ecosystem.

Slide 34

Design Tokens Community Group 1. Created in 2019 by Kaelig Deloumeau-Prigent & Jina Anne to gather the design tokens community 2. The need for a standard is now stronger than ever: a call for editors is made in February 2020 3. In June 2020 all editors are found and officially spread across different design token modules 4. In June 2022, a 2nd editor’s draft is shared to the community and tool makers are invited to start implementing the format

Slide 35

Figma Styles & Variables • Figma released a new feature called “Variables” in June • We can now define variables and aliases targeting different modes, and organize them in groups or collections

Slide 36

Specify Design Token Format • Specify helps you sync your design tokens and assets within your design system • Specify collects Figma Styles, Figma Variables, assets, tokens from Tokens Studio and distribute them in your desired destination in the right format, automatically • SDTF = DTCG + Figma Styles, Variables, Tokens Studio + assets

Slide 37

Design token best practices

Slide 38

Prioritize design token efforts

Slide 39

Start working on the type of tokens that will bring you the most value from day-1.

Slide 40

Make an inventory of your design token areas

Slide 41

Identify your organization brand architecture

Slide 42

Slide 43

Slide 44

Slide 45

SaaS common brand architecture 45

Slide 46

Determine your platform’s/brand’s common core 46

Slide 47

Determine your platform’s/brand’s common core 47

Slide 48

Slide 49

Slide 50

If in doubt, focus on token types that bring the most value for your end users: color, spacing/sizing, typography. Because w/o them our UIs are basically empty.