A presentation at Design System Day in in London, UK by Louis Chenais
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:
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
“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
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
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
What you’ll learn from this talk:
Here’s what was said about this presentation on social media.
for free. You
can too.