Formation au prototypage Figma de A à Z

Leçon 1 • Écosystème Figma et configuration du compte

Couvre les applications web et de bureau de Figma, les types de forfaits et la configuration du compte. Établit la base technique avant que tout travail de design ne commence.

Leçon 2 • Raccourcis clavier et paramètres essentiels

Couvre les raccourcis et les paramètres de préférence les plus impactants pour un flux de travail efficace. La rapidité et la précision acquises ici se cumulent dans chaque chapitre suivant.

Leçon 3 • Fichiers, pages et organisation des projets

Enseigne comment créer, dupliquer et organiser des fichiers et des pages au sein de projets. Une structure appropriée évite toute confusion dans les travaux de prototypage multi-écran ultérieurs.

Leçon 1 • Dessiner et modifier les formes de base

Couvre les rectangles, les ellipses, les polygones et l'outil étoile avec leurs propriétés. Ces primitives constituent les éléments de base de chaque élément d'interface utilisateur créé ultérieurement.

Leçon 2 • Outil Plume vectoriel et édition de tracés

Présente l'outil Plume pour les tracés vectoriels personnalisés et la manipulation des points d'ancrage. Les icônes et illustrations personnalisées créées ici seront utilisées dans les écrans de prototype ultérieurs.

Leçon 3 • Alignement, répartition et espacement

Couvre les outils d'alignement, la répartition intelligente et les contrôles d'espacement précis. Un espacement précis est essentiel avant d'introduire la mise en page automatique au chapitre suivant.

Leçon 4 • Comprendre les plans de travail vs. les groupes

Explique la différence structurelle entre les plans de travail et les groupes et quand utiliser chacun. Les plans de travail sont le fondement des écrans, des composants et de la mise en page automatique.

Leçon 1 • Remplissages, dégradés et images

Couvre les remplissages unis, les dégradés linéaires et radiaux, et les modes de remplissage d'image. Ces techniques produisent des arrière-plans et des surfaces d'interface utilisateur soignés tout au long du projet.

Leçon 2 • Construire une échelle typographique

Enseigne comment définir une échelle typographique modulaire pour les titres, le corps de texte et les légendes. Une échelle définie garantit une hiérarchie visuelle sur chaque écran du prototype.

Leçon 3 • Styles de texte et gestion des styles

Couvre la création, le nommage et l'application de styles de texte partagés dans le fichier. La gestion des styles réduit les incohérences avant l'introduction des composants.

Leçon 4 • Création d'un système de couleurs local

Enseigne comment définir des tokens de couleurs primaires, secondaires, neutres et sémantiques en tant que styles locaux. Des couleurs centralisées permettent des mises à jour globales instantanées sur tous les plans de travail.

Leçon 1 • Contraintes et plans de travail responsives

Couvre les paramètres de contrainte qui contrôlent le comportement des calques lorsqu'un plan de travail est redimensionné. Les contraintes combinées à la mise en page automatique produisent des designs d'écran véritablement responsives.

Leçon 2 • Imbrication de plans de travail en mise en page automatique

Enseigne comment imbriquer des plans de travail en mise en page automatique pour bâtir des structures d'interface utilisateur complexes et adaptatives. Les mises en page imbriquées sont l'épine dorsale des grilles de cartes, des barres de navigation et des mises en page de formulaires.

Leçon 3 • Introduction à la mise en page automatique

Explique le concept central de la mise en page automatique : direction, espacement et rembourrage interne. La compréhension de ce modèle est nécessaire avant de construire un composant responsive.

Leçon 4 • Construction de motifs d'interface utilisateur responsives

Applique la mise en page automatique et les contraintes pour construire une barre de navigation, une grille de cartes et un formulaire. Ces motifs sont réutilisés directement dans les écrans de prototype des chapitres suivants.

Leçon 1 • Construction d'une bibliothèque de composants d'interface utilisateur de base

Applique les composants et les variantes pour construire des boutons, des champs de saisie, des icônes et des cartes. Cette bibliothèque est la source directe de tous les écrans construits dans le chapitre sur le prototypage.

Leçon 2 • Propriétés des composants

Couvre les propriétés booléennes, de texte, d'échange d'instance et d'instance imbriquée sur les composants. Les propriétés exposent une personnalisation contrôlée sans briser la structure du composant.

Leçon 3 • Variantes de composants

Enseigne comment regrouper les états associés d'un composant dans un ensemble de variantes avec des propriétés nommées. Les variantes alimentent les changements d'état interactifs dans les prototypes sans dupliquer les composants.

Leçon 4 • Création et utilisation des composants

Couvre la conversion de plans de travail en composants principaux et le placement d'instances dans le fichier. Les composants garantissent qu'une seule modification se propage instantanément à tous les écrans.

Leçon 1 • Connexions et interactions du prototype

Enseigne comment ajouter des connexions, des déclencheurs et des destinations de prototype entre les plans de travail. Les connexions transforment des écrans statiques en un prototype cliquable et navigable.

Leçon 2 • Conception des écrans d'application clés

Applique la bibliothèque de composants pour construire les écrans d'intégration, de tableau de bord et de détail. Chaque écran utilise la mise en page automatique et les styles partagés établis dans les chapitres précédents.

Leçon 3 • Planification des écrans et des parcours utilisateurs

Couvre la cartographie des parcours utilisateurs, l'inventaire des écrans et les conventions de nommage avant de concevoir. La planification évite les reprises structurelles lors de la liaison des écrans dans les sections suivantes.

Leçon 4 • Paramètres de transition et d'animation

Couvre les transitions instantanées, par fondu, par glissement, par poussée et par animation intelligente. Des transitions appropriées communiquent clairement la direction de navigation et le comportement de l'interface.

Leçon 1 • Composants interactifs et changements d'état

Couvre l'utilisation des variantes de composants avec des connexions de prototype pour simuler les changements d'état. Les composants interactifs réduisent le nombre de plans de travail nécessaires pour les flux complexes.

Leçon 2 • Défilement, dépassement et éléments fixes

Enseigne le défilement vertical et horizontal, le masquage par dépassement et les calques fixes persistants. Ces paramètres reproduisent le comportement de défilement natif dans les prototypes mobiles et web.

Leçon 3 • Logique conditionnelle et actions

Enseigne les conditions if-else et les séquences d'actions en plusieurs étapes sur les interactions du prototype. La logique conditionnelle permet des flux ramifiés qui reflètent les points de décision d'une application réelle.

Leçon 4 • Introduction aux variables Figma

Couvre la création de collections de variables de type nombre, chaîne de caractères, booléen et couleur. Les variables permettent une gestion dynamique des données et des états, indisponible dans le prototypage de base.

Leçon 1 • Tests d'utilisabilité avec les prototypes

Couvre la planification des tâches de test, le recrutement des participants et l'animation de sessions modérées. Des tests structurés génèrent des retours exploitables pour le cycle d'itération.

Leçon 2 • Mode d'inspection et exportation des ressources

Enseigne aux développeurs comment utiliser le panneau d'inspection de Figma et comment les designers exportent les ressources. Des paramètres d'exportation corrects garantissent des ressources pixel-parfait à toutes les résolutions cibles.

Leçon 3 • Historique des versions et maintenance des fichiers

Couvre l'enregistrement de versions nommées, la restauration d'états antérieurs et le maintien d'un fichier propre dans le temps. Le contrôle de version protège le travail et prend en charge le design itératif sur plusieurs sprints.

Leçon 4 • Analyse des retours et priorisation des modifications

Enseigne la cartographie d'affinités, l'évaluation de la sévérité et la priorisation des modifications à partir des résultats des tests. La priorisation garantit que les problèmes ayant le plus d'impact sont corrigés avant le transfert.