Cours de prototypage Figma à partir de zéro

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 le début du travail de design.

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

Couvre les raccourcis et les préférences les plus impactants pour un flux de travail efficace. La rapidité et la précision acquises ici décupleront leur effet dans tous les chapitres suivants.

Leçon 3 • Organisation des fichiers, des pages et des projets

Enseigne comment créer, dupliquer et organiser des fichiers et des pages dans des projets. Une structure adéquate prévient la confusion dans le travail ultérieur de prototypage multi-écrans.

Leçon 1 • Dessin et édition des formes de base

Couvre les rectangles, les ellipses, les polygones et l'outil étoile avec leurs propriétés. Ces formes primitives constituent les blocs de construction de chaque élément UI 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 vectorielles personnalisées créées ici seront utilisées dans les écrans de prototype ultérieurs.

Leçon 3 • Alignement, distribution et espacement

Couvre les outils d'alignement, la distribution intelligente et les contrôles d'espacement précis. Un espacement précis est essentiel avant d'introduire la disposition automatique dans le prochain chapitre.

Leçon 4 • Comprendre les cadres par rapport aux groupes

Explique la différence structurelle entre les cadres et les groupes et quand utiliser chacun. Les cadres sont le fondement des écrans, des composants et de la disposition 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 UI soignés tout au long du projet.

Leçon 2 • Construction d'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 la 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 l'ensemble du 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 jetons de couleur 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 cadres.

Leçon 1 • Contraintes et cadres réactifs

Couvre les paramètres de contrainte qui contrôlent le comportement des calques lorsqu'un cadre est redimensionné. Les contraintes combinées à la disposition automatique produisent des designs d'écran véritablement réactifs.

Leçon 2 • Emboîtement de cadres à disposition automatique

Enseigne comment emboîter des cadres à disposition automatique pour construire des structures UI complexes et adaptatives. Les dispositions emboîtées sont la colonne vertébrale des grilles de cartes, des barres de navigation et des formulaires.

Leçon 3 • Introduction à la disposition automatique

Explique le concept central de la disposition automatique : la direction, l'espacement et le remplissage. La compréhension de ce modèle est requise avant de construire un composant réactif.

Leçon 4 • Construction de motifs UI réactifs

Applique la disposition 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 ultérieurs.

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

Applique des composants et des 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, textuelles, d'échange d'instance et d'instance emboîté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 des états de composants connexes dans un ensemble de variantes avec des propriétés nommées. Les variantes permettent les changements d'état interactifs dans les prototypes sans duplication des composants.

Leçon 4 • Créer et utiliser des composants

Couvre la conversion de cadres en composants principaux et le placement d'instances dans l'ensemble du 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 cadres. 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 des écrans d'intégration, de tableau de bord et de détail. Chaque écran utilise la disposition 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 la conception. La planification prévient les reprises structurelles lors de la liaison des écrans dans les sections ultérieures.

Leçon 4 • Transitions et paramètres d'animation

Couvre les transitions instantanées, de dissolution, de glissement, de poussée et d'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 des changements d'état. Les composants interactifs réduisent le nombre de cadres nécessaires pour les flux complexes.

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

Enseigne le défilement vertical et horizontal, le rognage des débordements et les calques fixes adhérents. 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 si-alors 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 réels d'une application.

Leçon 4 • Introduction aux variables Figma

Couvre la création de collections de variables de type nombre, chaîne, 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 commentaires exploitables pour le cycle d'itération.

Leçon 2 • Mode Inspect et exportation des ressources graphiques

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

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

Couvre la sauvegarde de versions nommées, la restauration d'états antérieurs et le maintien d'un fichier propre au fil du temps. Le contrôle de version protège le travail et soutient le design itératif tout au long des sprints.

Leçon 4 • Analyse des commentaires et priorisation des changements

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