Standardisation des design tokens : le futur du design à grande échelle ?

Bonjour 👋 Co-fondateur & Développeur Front-End • Membre du W3C Design Tokens Community Group • Auteur de “Design Tokens for Dummies” Et avant Front-End Developer @ SportEasy, 5emeGauche & Ultranoir @chuckn0risk • louis@specifyapp.com

Au menu

Design tokens kézako ? 2. Qu’est-ce qu’une Design API ? 3. Pourquoi avons-nous besoin d’un standard ? 4. Le future des design tokens 5. Démo d’une Design API

Design Tokens kézako?

🤔 Que sont les design tokens ? Quel problème business voulons-nous régler ?

“Design tokens are cross platform variables that define key design data” — Sarah Federman | @sarah_federman

Les design tokens permettent aux équipes produits de mieux collaborer et assurent la cohérence d’une marque à travers plusieurs plateformes.

🙏 Thanks to the Salesforce team for providing this categorization

Les design tokens doivent être nommés différemment selon leur contexte d’utilisation.

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

Qu’est-ce qu’une Design API ?

Situation actuelle 🤕 La création d’expériences utilisateurs cohésives à travers plusieurs plateformes est un véritable défi.

“A design system isn’t a project. It’s a product, serving products.” — Nathan Curtis | @nathancurtis

Design tokens

Design system Design Tokens

Équipe d’accessibilité 👩 Équipe design Design System Équipe marketing Équipe développement

Tool #2 Design API Tool #3 Tool #2

Les Design APIs sont l’évolution logique des 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

Pourquoi avons-nous besoin d’un standard?

Pour que l’identité de marque d’une organisation puisse être appliquée facilement, ses design tokens doivent pouvoir transiter librement d’un outil à un autre.

Les couleurs, icons et images de Figma vers Pitch.

Les images de Dropbox vers Github.

Mettre à jour les design tokens depuis Figma créera un ticket dans Jira.

Les traductions depuis Excel vers Webflow.

Why do we need a standard? / Prerequisite
Both parties must provide API writing and/or API reading access 2. Design tokens transiting from one system to another must respect the respective API data format

Notre marché a réellement besoin d’un standard pour les design tokens, largement utilisé afin que chaque décision design puisse transiter librement à travers les outils d’une organisation.

“Systems should support how creators work.” — Danny Banks | An Introduction to Multi-Platform Design Systems

Le Design Tokens W3C Community Group à la rescousse!

DTCG | @designtokens

Créé en 2019 par Kaelig Deloumeau-Prigent pour rassembler la communauté des design tokens 2. Le besoin d’un standard est plus fort que jamais : un appel aux éditeurs est fait en Février 2020 3. En Juin 2020 tous les éditeurs sont trouvés et répartis sur différents modules de recherche

Objectif #1 Fournir un standard pour les design tokens. Il permettra aux créateurs d’outils et à leurs consommateurs d’avoir un design de qualité à grande échelle grâce aux design APIs. Dirigé par Kaelig Deloumeau-Prigent (UX Developer @ Shopify).

Objectif #2 Gérer la communauté des design tokens et promouvoir les meilleurs pratiques liées aux design tokens. Dirigé Jina Anne (Design System Lead @ Asana).

Les modules du Design Tokens Community Group : Colors Spacing Animation Format …

Le futur des design tokens

🏆 Interopérabilité universelle

Interopérabilité universelle pour les design tokens : capacité de définir et de maintenir des design tokens à partir de n’importe quel outil.

Cela nous permettrait : • D’éditer nos design tokens directement depuis un simple fichier YAML/JSON • De voir, d’éditer et d’utiliser nos design tokens depuis un outil design • D’utiliser nos design tokens dans des applications tel que Google Docs/MS Word et de créer des templates ou des thèmes à partir de ces derniers • D’utiliser nos design tokens depuis un CMS ou un système tierce comme Webflow, Squarespace, Wordpress ou encore Shopify

Shaper | @hihayk

🌓 Le cas du multi-marques

Card Grid Component for Themeable Design System | @brad_frost

Un unique composant Card appliqué à trois marques différentes : Verywell.com, TheSpruce.com, and TheBalance.com. https://bradfrost.com/blog/post/creating-themeable-design-systems/

🚀 Au delà des produits digitaux

👏 Merci à @AdamSedwick, @calebwilliams12 et @vlh pour leurs recherches sur le sujet.

Démo d’une design API

Shoukran 🙏 @chuckn0risk • louis@specifyapp.com