Figma Expert - Optimiser son Design System

Préambule sur Figma

• Découvrir les dernières actualités du logiciel Figma

Construire un Design System avec Figma

• Analyser des ressources et modèles de fichiers de design system
• Acquérir une bonne convention de nommage (files, pages, sections, frames, layers, styles, components…)
• Appréhender la construction atomique, ses bénéfices et ses limites
• Faire l'inventaire de ses besoins et structurer son design system
• Mettre en place une palette de couleurs de base
• Déployer la palette de couleurs pour le thème Light et Dark
• Mettre en place les styles de texte, d'effets, de grille partagés
• Créer des composants atomiques simples
• Créer des composants complexes (propriétés : variants, bolean, instance, text)
• Automatiser les positions des éléments avec les autolayout et l'absolute positionning
• Créer des templates de pages

Appréhender les design tokens et variables dans Figma

• Appréhender les design tokens
• Mettre en place des variables dans Figma (couleurs, nombres, textes et variables booléennes)
• Automatiser la gestion des tailles sur les différentes frames
• Automatiser la gestion du thème Light/Black sur les différentes frames
• Mettre en place des tailles minimum et maximum pour les composants

Optimiser votre workflow avec des plugins Figma

• S'assurer de l'accessibilité
• Accéder directement aux banques d'icônes
• Créer et gérer un système d'espace
• Nettoyer, optimiser le design system
• Exploiter des plugins d'ai génératives (intelligences articielles)
• Connaître des plugins d'ai analytiques

Mettre en place une documentation sur ZeroHeight

• Connecter Figma et ZeroHeight
• Créer un fichier Figma dédié à la documentation
• Importer les fichiers Figma
• Mettre en place une page de suivi des états des composants
• Mettre à jour sa documentation

Élaborer un mode de travail collaboratif dans le Design System

• Appréhender l'espace de travail Figma (Team, Project, File, Branch, History)
• Partager son fichier, son projet, son équipe avec des "collaborateurs", "viewers" ou "viewer restricted"
• Ajouter et gérer des librairies partagées par plusieurs documents
• Gérer l'utilisation des polices aux polices (accès, variable font, propriétés avancées)
• Exporter les éléments pour la production (code et assets)
• Mettre en place une gouvernance pour le design system