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.