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

Bonjour đź‘‹

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

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

  1. Why we need design tokens

Crafting cohesive user experiences across several platforms is a real challenge

Design systems help teams to work together better

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

However…

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

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

  1. What are design tokens?

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

18

19

20

21

Simple vs Composite

Available types

Available types

Available types

Core vs Alias

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

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

Who’s responsible for managing design tokens?

Source: State of Design Tokens 2022

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

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

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

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

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

  1. Design token best practices

Prioritize design token efforts

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

Make an inventory of your design token areas

Identify your organization brand architecture

42

43

44

SaaS common brand architecture 45

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

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

48

49

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.

Define a token taxonomy that sticks

Automate the synchronization of your design tokens and assets

Demo

Shaper V2 - Generative Design Tool for UI Interfaces Hayk An

Tweet by @markacianfrani Mark Cianfrani Design Tool for UI Interfaces Shaper V2A. - Generative Hayk An

Shoukran Louis Chenais 🙏 Lets stay in touch • twitter.com/@chuckn0risk Co-founder & Chief Evangelist • louis@specifyapp.com