Introduction aux Design Tokens et W3C

Nov 6, 2024

Introduction à Figma et aux Design Tokens

Contexte

  • Interaction avec Figma et les équipes design en Europe depuis deux ans.
  • Patterns observés sur les problématiques récurrentes.
  • Figma embarque des logiques ressemblant au code front-end, notamment CSS.

Challenges pour les Designers

  • Gap entre designers familiarisés avec le code et ceux qui ne le sont pas.
    • Expérience passée de code ou outils similaires (Axure).
  • Discussion autour de l'auto-layout, flexbox, etc.
  • Difficulté à adapter le modèle mental existant aux nouvelles normes techniques.

Importance de la Convergence Design-Code

  • Fusion entre outils de création digitale et logiques de code.
  • Attentes des développeurs pour que les designers comprennent mieux les processus de développement.
  • Statistiques Figma : 80% des développeurs voient un profit d'une collaboration étroite avec les designers.

Standardisation du Web et W3C

Comprendre le Fonctionnement du Web

  • Le web est consommé via les navigateurs (Chrome, Safari, etc.).
  • HTML, CSS, JavaScript sont les langages à la base du web.
    • HTML = structure, CSS = style, JavaScript = interaction.

Rôle des Standards

  • Standards assurent une expérience uniforme (ex : focus ring).
  • PNG, SVG, JSON sont des formats standardisés par le W3C.

Métaphore : Les Prises Électriques

  • Standards facilitent notre quotidien (ex : standards électriques).
  • Importance de l'adoption maximale des standards pour uniformiser.

W3C (World Wide Web Consortium)

  • Créé par Tim Berners-Lee, auteur du HTML, CSS.
  • Organisme non lucratif rassemblant industries et passionnés.
  • Groupes de travail (working groups) pour développer les standards.

Design Tokens et le DTCG (Design Tokens Community Group)

Participation et Fonctionnement

  • Sessions bimensuelles pour définir les standards.
  • Travail sur des spécifications, documentations.
  • Collaboration avec créateurs d'outils pour implémentation (ex: Figma).

Design Tokens : Définition et Utilisation

  • Design tokens : noms, valeurs, propriétés pour uniformiser design et dev.
  • Token doit avoir un nom significatif (sémantique).

Statuts des Standards

  • Processus long (ex : media queries de 2001 à 2012).
  • Importance de noter l'historique des discussions et décisions.

Réflexion sur la Nomenclature

  • Importance d'un langage design commun (sémantique, usage).
  • Nomenclature doit être flexible et adaptée aux équipes.

Conclusion et Ressources

Participation au W3C et DTCG

  • Ouvert aux nouveaux membres via Slack Design Systems.
  • Importance de l'apprentissage continu et de la veille technologique.

Prochaines Sessions

  • Discussion prévue sur l'impact de l'IA dans les outils créatifs en novembre.