Formation au prototypage de zéro avec Figma

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

Couvre les applications web et desktop de Figma, les types d'abonnement et la configuration du compte. Établit la base technique avant le début de tout travail de design.

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

Couvre les raccourcis et les réglages de préférences 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 de projet

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

Leçon 1 • Dessiner et éditer des 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 composant d'interface créé par la suite.

Leçon 2 • Outil plume 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 apparaîtront 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 chapitre suivant.

Leçon 4 • Comprendre les cadres vs les groupes

Explique la différence structurelle entre les cadres et les groupes et quand utiliser chacun. Les cadres sont la base 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 d'interface soignés tout au long du projet.

Leçon 2 • Construire une échelle typographique

Apprend à définir une échelle typographique modulaire pour les titres, le texte courant 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, la nomination 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éer un système de couleurs local

Apprend à définir des tokens de couleurs primaires, secondaires, neutres et sémantiques sous forme de styles locaux. Des couleurs centralisées permettent des mises à jour globales instantanées sur tous les cadres.

Leçon 1 • Contraintes et cadres responsive

Les contraintes combinées à la disposition automatique produisent des designs d'écran véritablement responsive.

Leçon 2 • Imbriquer des cadres de disposition automatique

Apprend à imbriquer des cadres de disposition automatique pour construire des structures d'interface complexes et adaptatives. Les dispositions imbriquées sont l'épine dorsale des grilles de cartes, des barres de navigation et des dispositions de formulaires.

Leçon 3 • Introduction à la disposition automatique

Explique le concept central de la disposition automatique : direction, espacement et remplissage. Comprendre ce modèle est nécessaire avant de construire un composant responsive.

Leçon 4 • Construire des motifs d'interface responsive

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 des prototypes des chapitres ultérieurs.

Leçon 1 • Construire une bibliothèque de composants d'interface 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, 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 casser la structure du composant.

Leçon 3 • Variantes de composants

Apprend à regrouper les états de composants liés 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é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

Apprend à ajouter des connexions de prototype, des déclencheurs et des destinations entre les cadres. Les connexions transforment les écrans statiques en un prototype cliquable et navigable.

Leçon 2 • Concevoir les é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 disposition automatique et les styles partagés établis dans les chapitres précédents.

Leçon 3 • Planifier les écrans et les flux utilisateur

Couvre la cartographie des flux utilisateur, l'inventaire des écrans et les conventions de nommage avant la conception. La planification évite les remaniements structurels 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, 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 de 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

Apprend le défilement vertical et horizontal, le rognage par débordement et les couches fixes collantes. Ces paramètres reproduisent le comportement de défilement natif dans les prototypes mobiles et web.

Leçon 3 • Logique conditionnelle et actions

Apprend 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 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, 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 des 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 inspection et exportation de ressources

Apprend 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 parfaites pour toutes les résolutions d'image 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 soutient le design itératif à travers les sprints.

Leçon 4 • Analyser les retours et prioriser les modifications

Apprend 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 les plus impactants sont résolus avant le transfert.