Design Tokens: to infinity and beyond
A presentation at Design Tokens: To Infinity and Beyond in September 2020 in by Louis Chenais
Design Tokens: to infinity and beyond
Bonjour 👋 Co-founder & Front-End Developer • W3C Design Tokens Community Group Member • Author of “Design Tokens for Dummies” Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir @chuckn0risk • louis@specifyapp.com
Summary
Design Tokens kézako?
🤔 What are design tokens? What business issue do we want to address?
“Design tokens are cross platform variables that define key design data” — Sarah Federman | @sarah_federman
Design tokens allow product teams to better collaborate and ensure brand consistency across any platform.
🙏 Thanks to the Salesforce team for providing this categorization
Design tokens should be named differently according to their context of usage.
Design option Design decisions
Design options Design decisions Text style text-body-large Text style button-text-default Color purple-500 Color background-button-primary-default Spacing base-space-3 Spacing button-side-padding
background-button-primary-default button-text-default button-side-padding
“Design tokens are useful for describing core design values, but their full power emerges when used to describe the specs of UI components.” — Cristiano Rastelli | @areaweb
What is a Design API ?
Current situation 🤕 Crafting cohesive user experiences across several platforms is a real challenge.
“A design system isn’t a project. It’s a product, serving products.” — Nathan Curtis | @nathancurtis
Design tokens
Design system Design tokens
Accessibility team 👩 Design team Design System Marketing team Engineering team
Tool #2 Design API Tool #3 Tool #2
Design APIs are the logical evolution of design systems.
“An interoperable, guessable design API is the foundation of a fully networked design system, […]. It’s the next step in the evolution of design systems.” — Matthew Ström | A design API in practice
Why do we need a standard?
As an organization’s brand identity must be used and applied as easily as possible, its design tokens must be able to transit freely from one tool to another.
Colors, icons and images from Figma to Pitch.
Images from Dropbox to Github.
Updating design tokens in Figma will create a ticket in Jira.
Locales from Excel to Webflow.
Our market direly needs a design tokens standard widely spread so that design decision can transit freely across an organization tools ecosystem.
“Systems should support how creators work.” — Danny Banks | An Introduction to Multi-Platform Design Systems
Design Tokens W3C Community Group to the rescue!
DTCG | @designtokens
Objective #1 Provide a standard for design tokens. It will alIow tool creators and tool consumers to have quality design that scales thanks to design APIs. Lead by Kaelig Deloumeau-Prigent (UX Developer @ Shopify).
Objective #2 Manage the design tokens community and promote design tokens best practices. Lead by Jina Anne (Design System Lead @ Asana).
Design Tokens Community Group modules: Colors Spacing Animation Format …
The future of design tokens
🏆 Universal interoperability
Universal interoperability for design tokens: ability to define and maintain design tokens from any tool.
This would allow us to: • Edit all design tokens directly from a simple YAML/JSON file • See, edit and use all design tokens from a design tool • Use design tokens from apps like Google Docs/MS Word and create templates or themes from them • Use design tokens from a CMS or a third-part system like Webflow/Squarespace/Wordpress/Shopify
Shaper | @hihayk
🌓 The multi-brand use case
Card Grid Component for Themeable Design System | @brad_frost
A unique Card component is applied to three different brands : Verywell.com, TheSpruce.com, and TheBalance.com. https://bradfrost.com/blog/post/creating-themeable-design-systems/
🚀 Beyond digital products
👏 Thanks to @AdamSedwick, @calebwilliams12 and @vlh for their thorough research on the subject.
Demo of a design API
🙏 Shoukran @chuckn0risk • louis@specifyapp.com
