Cours Figma

Leçon 1 • Fichiers, pages et organisation de projet

Enseigne comment créer, nommer et organiser des fichiers et des pages. Une structure adéquate évite toute confusion dans les projets multi-pages ou d'équipe.

Leçon 2 • Raccourcis clavier essentiels

Couvre les raccourcis les plus efficaces pour la sélection, le zoom et le changement d'outil. Les habitudes de rapidité acquises tôt se cumulent tout au long du cours.

Leçon 3 • Disposition de l'interface et navigation

Présente chaque panneau, barre d'outils et menu de l'éditeur. Les étudiants acquièrent une conscience spatiale de l'espace de travail pour travailler sans hésitation.

Leçon 1 • Travailler avec les formes primitives

Couvre les rectangles, les ellipses, les polygones et les étoiles avec des contrôles de dimensions précis. Ces formes sont les éléments de base de tout design.

Leçon 2 • Opérations booléennes et édition de tracés

Enseigne les opérations d'union, de soustraction, d'intersection et d'exclusion pour combiner des formes en formes complexes. La logique booléenne accélère considérablement la création d'icônes et de formes.

Leçon 3 • Outils d'alignement et de distribution

Couvre les contrôles d'alignement, de distribution et de rangement pour un agencement spatial précis. Un espacement cohérent est fondamental pour des mises en page de qualité professionnelle.

Leçon 4 • Dessin vectoriel avec l'outil Plume

Présente les points d'ancrage, les poignées de Bézier et l'édition de tracés. Les icônes et illustrations personnalisées nécessitent ces fondamentaux vectoriels.

Leçon 1 • Création et application de styles locaux

Enseigne comment enregistrer des couleurs, des styles de texte, des effets et des grilles en tant que styles locaux réutilisables. Les styles imposent la cohérence et accélèrent l'itération de design.

Leçon 2 • Types de remplissage et sélecteur de couleur

Couvre les remplissages unis, les dégradés linéaires et radiaux, les remplissages d'image et les contrôles du sélecteur de couleur. La précision des couleurs est essentielle pour un travail de design cohérent avec la marque.

Leçon 3 • Propriétés de contour et d'effet

Enseigne l'épaisseur du contour, sa position, les motifs de tirets et les effets de calque comme l'ombre portée et le flou. Les effets ajoutent de la profondeur et du soin aux composants d'interface.

Leçon 4 • Opacité, modes de fusion et masquage

Présente l'opacité des calques, les options de mode de fusion et les techniques de création de masques. Ces contrôles permettent des compositions visuelles avancées dans tout design.

Leçon 1 • Contraintes et cadres responsives

Couvre les paramètres de contrainte pour les calques sans Auto Layout et le redimensionnement responsive des cadres. Les contraintes garantissent que les éléments restent correctement ancrés sur différentes tailles d'écran.

Leçon 2 • Fondamentaux d'Auto Layout

Présente les modes Auto Layout horizontal, vertical et enveloppe avec des contrôles de remplissage et d'espacement. Auto Layout remplace le repositionnement manuel lorsque le contenu change.

Leçon 3 • Structures Auto Layout imbriquées

Enseigne l'empilement de cadres Auto Layout les uns dans les autres pour construire des motifs d'interface complexes. L'imbrication est la façon dont les composants du monde réel comme les cartes et les barres de navigation sont construits.

Leçon 4 • Grilles et guides de mise en page

Présente les guides de mise en page en colonnes, en lignes et en grille pour la conception d'écrans structurée. Les grilles alignent les designs sur les points de rupture de développement et les systèmes d'espacement du monde réel.

Leçon 1 • Création et utilisation de composants

Couvre la façon de convertir des cadres en composants principaux et de placer des instances. Les composants sont l'unité centrale des systèmes de design évolutifs et maintenables.

Leçon 2 • Organisation d'une bibliothèque de composants

Enseigne les hiérarchies de nommage, le regroupement avec des barres obliques et la publication d'une bibliothèque partagée. Une bibliothèque bien organisée est le pilier de la cohérence du design au sein d'une équipe.

Leçon 3 • Remplacements et propriétés d'instance

Enseigne les remplacements de texte, de remplissage, de visibilité et d'échange sur les instances sans rompre le lien avec le composant principal. Les remplacements permettent une réutilisation flexible sur différents écrans.

Leçon 4 • Variantes de composant

Présente la fonctionnalité Variantes pour regrouper les états de composants associés en un seul ensemble. Les variantes rationalisent la gestion des états pour les boutons, les champs de saisie et les cartes.

Leçon 1 • Connexions et flux de prototype

Couvre la création de connexions entre les cadres, la définition des points de départ et la définition des flux. Les flux permettent aux parties prenantes de découvrir un design comme une séquence navigable.

Leçon 2 • Smart Animate et micro-interactions

Présente Smart Animate pour interpoler les calques correspondants entre les cadres. Les micro-interactions élèvent la fidélité du prototype et démontrent l'intention du design de mouvement.

Leçon 3 • Déclencheurs et actions

Enseigne les déclencheurs de clic, survol, glisser, pression de touche et entrée de souris avec les actions correspondantes. Les paires déclencheur-action définissent la sensation et le comportement des interactions.

Leçon 4 • Transitions et animations

Couvre les transitions instantanées, de dissolution, d'entrée/sortie, de poussée et de glissement avec des courbes d'accélération. Les transitions communiquent les relations spatiales entre les écrans.

Leçon 1 • Fonctionnalités de collaboration en temps réel

Couvre les curseurs multijoueurs, le mode observation et le mode suivi pour la co-conception en direct. Les fonctionnalités en temps réel réduisent les échanges asynchrones dans les équipes distribuées.

Leçon 2 • Transfert aux développeurs avec le mode Développeur

Présente le mode Développeur pour inspecter l'espacement, les couleurs, la typographie et les ressources exportées. Le mode Développeur comble le fossé entre l'intention du design et l'implémentation.

Leçon 3 • Exportation de ressources et de spécifications

Enseigne les paramètres d'exportation pour PNG, SVG, PDF et WebP à plusieurs résolutions. Une configuration d'exportation correcte garantit que les ressources s'affichent correctement en production.

Leçon 4 • Autorisations de partage et contrôle d'accès

Couvre les niveaux d'autorisation d'affichage, de modification et de commentaire pour les fichiers et les projets. Des autorisations correctes protègent les ressources de design tout en permettant l'accès aux parties prenantes.

Leçon 1 • Gestion de versions et assurance qualité du design

Couvre l'enregistrement de versions nommées, les workflows de branchement et de fusion, et les listes de contrôle d'assurance qualité du design. Les processus de gestion de versions et d'assurance qualité protègent l'intégrité du design à travers les versions itératives.

Leçon 2 • Stratégies multi-marques et de thématisation

Enseigne l'utilisation de modes de variable pour basculer instantanément entre les thèmes clair/sombre et les marques. La thématisation au niveau des variables élimine les ensembles de composants en double.

Leçon 3 • Plugins, widgets et automatisation

Présente l'écosystème de plugins Figma, les bases de la création de widgets et les cas d'utilisation d'automatisation. Les plugins étendent les capacités natives de Figma et éliminent les tâches manuelles répétitives.

Leçon 4 • Architecture de composants avancée

Couvre les composants à base de slots, les composants de base et les motifs de composition de composants. Une architecture avancée réduit le nombre de composants tout en augmentant la flexibilité du design.

Leçon 5 • Jetons de design et variables

Couvre les variables Figma pour les jetons de couleur, de nombre, de chaîne et booléens avec modes. Les variables permettent le design multi-thème et multi-marque à partir d'une source unique de vérité.