Figma design expert

Préambule

• Connaître les dernières nouveautés Figma

Construire un Design System optimisé dans 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 Distinguer les styles et les variables
• Mettre en place une palette de couleurs de base et une palette d'usage Créer des composants atomiques simples
• Créer des composants complexes (propriétés : variants, bolean, instance, text) Créer des templates pour Buzz, Sites, Figjam

Appréhender les design tokens et variables dans Figma

• Appréhender les design tokens
• Créer des variables et des collections (couleurs, nombres, textes, booléennes) Automatiser la gestion des tailles sur les différentes écrans
• Automatiser la gestion des couleurs sur les différentes écrans
• Optimiser le workflow de la production avec la conception de différentes collections (taille, thèmes, responsive...)

Optimiser votre workflow avec les dernières nouveautés

• Créer des composants complexes qui mixe les différentes propriétés et les variables Exploiter les nouvelles fonctions liées aux polices (nombre de lignes visibles, catégories, hauteur de texte, numérotation...)
• Exploiter des plugins d'ai génératives (intelligences articielles) Connaître des plugins d'ai analytiques
• Appréhender les nouveautés dans Figjam

Créer des prototypes avancées avec les variables

• Connaître tous les différents types d'événements, d'actions et d'animation 
• Partager les états des composants interactifs, des vidéos et du défilement  Générer des valeurs numériques ou de chaînes dynamiques à l'aide d'opérateurs
• Ajouter des conditions au prototypes

Exploiter les fonctionnalités du dev mode

• Définir l'état d'une section pour les développeurs
• Inspecter et copier-coller les codes pour le web, ios ou android
• Lier un composant Figma à une ressource Dev (GitHub, StoryBook, Jira) Comparer les modifications de la version actuelle à la précédente Inspecter des fichiers Figma dans VS Code

Élaborer un mode de travail collaboratif sur les projets

• Appréhender l'espace de travail Figma (Team, Project, File, Branch, History) Partager ses fichiers, prototypes, bibliothèques, templates
• Ajouter et gérer des librairies partagées par plusieurs documents Optimiser et documenter la Focus View pour les développeurs Gérer l'utilisation des polices aux polices et des plugins
• Mettre en place une gouvernance pour le design system