Design Tokens: To Infinity and Beyond

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? 2. What is a Design API? 3. Why do we need a standard? 4. Future of design tokens 5. Demo of a Design API

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

Created in 2019 par Kaelig DeloumeauPrigent & 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 tokens modules

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