Design Tokens

  • Design System
Télécharger le programmeLe programme

DETAILS

Durée 2 Jours
Public cible Designers seniors, Product Managers, Développeurs Frontend
Niveau Intermédiaire
Prix présentiel 1700 € HT/pers

DESCRIPTION

Les design tokens sont la représentation du langage visuel de votre organisation. Ils doivent être définis et/ou utilisés par toutes les équipes collaborant sur vos interfaces. Pour faire simple, les design tokens sont l’évolution logique d’une charte graphique à l’heure du digital. Avec un système de tokens adapté, vous améliorez la qualité de vos interfaces ainsi que votre image de marque. Néanmoins, comme tout langage, leur création et leur utilisation doivent suivre une méthodologie claire.

En suivant cette formation, vos équipes auront toutes les clés pour créer et utiliser un système de tokens adaptés à vos différents produits et aux besoins de votre organisation (gestion du multi-marque, thème light/dark…).

OBJECTIFS PEDAGOGIQUES

1. Comprendre l’utilité des design tokens
2. Créer un premier lots de design tokens qui apporte de la valeur dés le premier jour
3. Maitriser les outils pour créer des design tokens en design et en code

 

MÉTHODES D'ENSEIGNEMENTS

Cette formation pose les fondations et développe aux travers d’exercices la gestion des design tokens pour les équipes produits.

  • Support : un support de cours en français sera remis aux participants au format électronique via PDF 
  • Évaluation : Les acquis sont évalués tout au long de la formation par le formateur (Questions régulières, travaux pratiques, QCM ou autres méthodes). 
  • Formateur : Louis Chenais expert en design tokens et un des membres du Design Tokens Community Group. Il a dans le passé accompagné les équipes design system de Carrefour, Dashlane ou Epic Games à la mise en place de leurs design tokens.
  • Satisfaction : à l’issue de la formation, chaque participant répond à un questionnaire d’évaluation qui est ensuite analysé en vue de maintenir et d’améliorer la qualité de nos formations. 
  • Suivi : une feuille d’émargement par demi-journée de présence est signée par chacun des participants. 
  • Format : Cette formation peut être dispensée en format inter-entreprises ou intra-entreprise sur demande et en mode présentiel comme en distanciel. 

DUREE

Les 2 jours sont constitués de présentations théoriques, d’ateliers pratiques et de démonstrations.

PRE REQUIS

  • Cette formation apportera le plus de valeur à vos équipes si les designers et les développeurs y participent. Ces deux rôles doivent idéalement participer à la formation.
  • Votre organisation est déjà convaincue de l’importance d’un design system que vous avez peut-être déjà.
  • Les designers doivent avoir un UI Kit dans Figma dans lequel sont créés des composants et éventuellement des Styles et/ou des Variables Figma.
  • Les développeurs doivent avoir accès à un repository git dans lequel nous pourront mettre en place des tokens et un éventuel système de synchronisation automatique (ex: Une GitHub Action pour générer des variables CSS via Style Dictionary)

PROGRAMME

Programme Jour 1 : Définir l’impact des design tokens dans son design system

Matin

  • Introduction :
    • Définition d’un design token.
    • Raisons d’existence des design tokens.
    • Place des données design dans un design system.
  • Mise en pratique et évaluation des connaissances (1/4).

Après-midi

  • Définir le scope idéal :
    • Identifier les design tokens prioritaires.
    • Définir une nomenclature initiale.
    • Valider un workflow entre designers et développeurs.
  • Mise en pratique et évaluation des connaissances (2/4).

Programme Jour 2 : Workflow entre designers et développeurs

Matin

  • Mise en place du workflow défini :
    • Nommer les design tokens (exemple : couleur) pour les niveaux « core » et « sémantique ».
    • Créer des styles/variables dans Figma.
  • Mise en pratique et évaluation des connaissances (3/4).

Après-midi

  • Documentation et implémentation :
    • Documenter les design tokens dans une source de vérité (exemple : Zeroheight).
    • Implémenter les design tokens en code dans un projet d’exemple.
  • Évaluation des connaissances (4/4).
Télécharger le programmeLe programme

Design Tokens Préinscription à la formation