Coconote
AI notes
AI voice & video notes
Export note
Try for free
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.
📄
Full transcript