Ce que vous saurez faire à la fin

Créer un compte Figma et configurer votre premier projet équipe.
Maquetter une page web et un écran mobile complet.
Utiliser composants, variants, auto-layout, styles et variables.
Construire un mini design system et le partager.
Prototyper les interactions et exporter pour les développeurs.

Durée : 6h sur 3 sessions. Pré-requis : ordinateur avec Chrome ou Edge récent, compte Google, souris recommandée. Aucune connaissance préalable du design.

Étape 1 — Créer le compte et installer le client

Allez sur figma.com, cliquez « Sign up » en haut à droite, choisissez « Continue with Google ». Pour de meilleures performances, téléchargez l’app desktop : Menu utilisateur (avatar) > Get desktop app. L’app gère mieux les fontes locales et les raccourcis.

Créez un compte gratuit sur figma.com (le plan Free permet 3 projets actifs et 3 fichiers par projet, suffisant pour la phase d’apprentissage). Pour une expérience optimale, installez le client desktop (figma.com/downloads) qui gère mieux les performances que le navigateur sur des fichiers chargés. Le client est disponible Windows, macOS et Linux. Pour iPad ou Android, l’app Figma Mirror permet de prévisualiser sur device sans éditer. Pour une équipe à Plateau, le plan Professional à 12 USD/mois par éditeur (gratuit pour les viewers) débloque les fichiers illimités et le contrôle de version.

Étape 2 — Comprendre l’interface en 6 zones

À gauche : Layers (arborescence des calques) et Assets (composants). Au centre : le Canvas (espace de travail infini). À droite : panneau Design (propriétés) avec onglets Prototype et Inspect. Tout en haut : barre d’outils. En bas à gauche : zoom (Ctrl + molette pour zoomer, barre d’espace + glisser pour déplacer le canvas).

Étape 3 — Créer votre premier fichier et frame

Cliquez « New design file ». Appuyez sur F pour activer l’outil Frame. Dans le panneau droit, choisissez un preset : Desktop (1440 px), Macbook (1280 px) ou iPhone 14 (390 × 844 px). La frame se crée au clic. Renommez-la en double-cliquant son nom dans Layers.

Dans le dashboard, cliquez New design file. L’espace de travail s’ouvre vide. Pressez F (raccourci Frame) puis dessinez un rectangle ou choisissez un preset (iPhone 15, MacBook Air, A4). Le frame est l’équivalent d’une artboard ou d’une page. Tout votre design vit dedans. Pour une app mobile, créez un frame iPhone 15 (393×852). Pour un site web, créez un frame Desktop (1440×1024). Renommez le frame avec le nom de l’écran (Login, Dashboard, Profile) — cette discipline simple paie quand vous avez 30 frames dans le fichier.

Étape 4 — Maîtriser les 8 raccourcis essentiels

V         Outil sélection
F         Frame (artboard)
R         Rectangle
O         Cercle
T         Texte
L         Ligne
P         Plume (vectoriel)
Ctrl+D    Dupliquer
Alt+drag  Dupliquer en glissant
Shift+A   Auto-layout
Ctrl+Alt+K  Créer composant
Ctrl+/    Recherche d'action (palette de commandes)

Les 8 raccourcis qui économisent 80% du temps. V pour l’outil de sélection. F pour Frame. R pour Rectangle. T pour Text. K pour Scale (redimensionner proportionnel). Cmd/Ctrl + D pour dupliquer. Cmd/Ctrl + G pour grouper. Cmd/Ctrl + Alt + K pour créer un Component. Apprenez-les par cœur dès la première semaine. Les designers expérimentés utilisent moins de 5 % de la souris pour la navigation, le reste passe par les raccourcis. Cette fluidité accélère le rythme de travail considérablement.

Étape 5 — Construire un bouton avec auto-layout

Pressez R, dessinez un rectangle 120 × 44. Pressez T, écrivez « S’inscrire », placez sur le rectangle. Sélectionnez les deux (cliquez sur le premier puis Shift+clic le second), faites Shift+A. Auto-layout activé. Dans le panneau droit, réglez padding 12 vertical / 24 horizontal, fond #2563EB, coins arrondis 8, texte blanc 14 px Inter Medium. Le bouton se redimensionne tout seul si vous changez le texte.

Étape 6 — Transformer en composant réutilisable

Sélectionnez le bouton, faites Ctrl+Alt+K (Mac : Cmd+Option+K). Le bouton devient violet : c’est un Component (Master). Glissez-le dans Assets > Local components. Pour le réutiliser, glissez depuis Assets vers le canvas : ce sont des Instances. Modifier le master change toutes les instances.

Sélectionnez l’élément (un bouton, une carte, un avatar) et appuyez Cmd/Ctrl + Alt + K pour le convertir en Component. L’icône devient violette dans le panneau Layers. Toutes les copies (Instances) du composant héritent automatiquement des changements appliqués au master. Modifiez la couleur du master, toutes les instances se mettent à jour. Pour une équipe à Cocody qui livre 3-5 sites web par trimestre, créer une bibliothèque de 30-50 composants réutilisables divise le temps de design par 2-3 sur les nouveaux projets.

Étape 7 — Créer des variants (états du bouton)

Sélectionnez le composant, panneau droit cliquez « + Add variant ». Une seconde version apparaît. Renommez les propriétés à gauche : Property1 devient « État », Variant1 devient « Default », Variant2 devient « Hover ». Pour Hover, changez le fond à #1D4ED8. Ajoutez un 3e variant « Disabled » avec opacité 50 %.

Sélectionnez le composant Button. Dans le panneau de droite, cliquez Add Variant. Figma duplique le composant en mode variants. Renommez les états : Default, Hover, Pressed, Disabled. Modifiez chaque variant (couleurs, opacity selon l’état). Dans les Properties, ajoutez une propriété state avec ces 4 valeurs. Cette structure permet aux développeurs frontend de switcher entre états dans le prototype et de référencer les bons CSS classes. Les variants évitent de créer 4 components Button-default, Button-hover séparés.

Étape 8 — Définir des styles de couleur et texte

Sélectionnez un fond bleu, dans Fill cliquez les 4 points > « + Create style » > nom : « Brand/Primary ». Faites pareil pour Brand/Secondary, Neutral/100 à 900, Success, Warning, Danger. Pour le texte, sélectionnez un texte, dans Text cliquez les 4 points > Create style : Heading/H1 (32 / 40 Bold), H2 (24 / 32), Body (16 / 24), Caption (12 / 16).

Étape 9 — Utiliser les Variables (mode clair / sombre)

Menu Local variables (icône en bas du panneau Design ou Ctrl+Alt+Y). Cliquez « + Create variable » > Color > nom « color/bg/surface ». Donnez-lui 2 valeurs en créant un mode « Dark » : blanc en Light, #0B1220 en Dark. Appliquez la variable à votre frame Background. Bouton en haut à droite de la frame : bascule Light / Dark instantanément.

Étape 10 — Maquetter une page Landing en 30 minutes

Frame Desktop 1440. Empilez 5 sections en auto-layout vertical : Header (logo + nav + CTA), Hero (titre 56 px + sous-titre + 2 boutons + image), Features (3 colonnes avec icône Lucide), Testimonials (carrousel statique), Footer 4 colonnes. Utilisez le plugin « Iconify » (Menu > Plugins > Browse plugins) pour insérer des icônes Lucide ou Heroicons en SVG.

Étape 11 — Prototyper la navigation

Onglet Prototype (en haut à droite). Sélectionnez le bouton « S’inscrire », glissez la flèche bleue qui apparaît vers la frame « Inscription ». Choisissez Trigger : On click, Animation : Smart animate, Easing : Ease in and out, Duration 300 ms. En haut à droite, cliquez le triangle « Present » : votre prototype tourne dans un nouvel onglet, cliquable.

Étape 12 — Inviter votre équipe en édition

Bouton « Share » en haut à droite. Tapez l’email du collaborateur, choisissez « can edit » (gratuit jusqu’à 2 éditeurs sur le plan Starter). Cochez « Anyone with the link can view » pour partager publiquement en lecture. Pour les réunions, ouvrez Audio chat (icône casque, Ctrl+Shift+M).

Cliquez Share en haut à droite. Saisissez les emails séparés par des virgules. Choisissez le rôle : can edit (designer, modifier), can view (commenter, valider). Les viewers sont gratuits dans Figma, seuls les editors comptent vers le quota du plan. Pour une équipe à Bamako de 3 designers et 5 développeurs, vous payez seulement les 3 designers (36 USD/mois Professional), les 5 développeurs accèdent gratuitement. Cette tarification rend Figma adapté aux petites équipes africaines avec budget contraint.

Étape 13 — Préparer le handoff développeur

Onglet Inspect (à droite). Sélectionnez n’importe quel élément : Figma génère le CSS, iOS Swift ou Android XML automatiquement. Pour exporter une icône en SVG : sélectionnez-la, panneau Design en bas > Export > format SVG > cliquez Export. Pour exporter en PNG @2x ou @3x, ajoutez les suffixes via « + Add export setting ».

Étape 14 — Sauvegarder une version nommée

Menu fichier (Figma logo en haut à gauche) > File > Save to version history (Ctrl+Alt+S). Donnez un nom : « v1.0 — Validation cliente ». Vous pourrez toujours revenir à cette version via File > Show version history même après modifications futures.

Figma sauvegarde automatiquement chaque seconde mais accumule un historique infini de micro-versions. Pour repérer les jalons importants, créez des Named Versions : menu File → Save to Version History → entrez un nom (V1.0 – Onboarding initial, V1.5 – Refonte couleurs marque). Restaurer une version revient à dupliquer le fichier à cet état. Cette discipline équivaut aux git tags et permet de revenir 6 mois en arrière sans naviguer dans des centaines d’auto-saves illisibles.

Erreurs de débutant à éviter

Ne pas utiliser auto-layout : aligner à la main = casse au moindre changement de texte.
Renommer « Frame 47 » en « Frame 47 copy » : nommez tous vos calques (Section/Hero, Card/Feature). Vos collègues vous remercieront.
Couleurs en dur partout : définissez des styles dès le 3e usage de la même couleur.
Composants non détachés : ne pas faire Ctrl+Alt+B (détacher) sauf cas exceptionnel, sinon vous perdez le lien au master.
Plugins lourds qui ralentissent Figma : désactivez ceux non utilisés via Menu > Plugins > Manage.

Checklist de fin de fichier

✓ Frames nommées avec convention claire
✓ Tous les composants dans la page "Components"
✓ Au moins 1 variant par composant interactif
✓ Styles de couleur, texte, effet créés et appliqués
✓ Variables pour les couleurs (mode clair / sombre)
✓ Auto-layout sur sections, cartes, boutons
✓ Grille 12 colonnes activée sur desktop
✓ Prototype navigable de bout en bout
✓ Export settings configurés sur les assets
✓ Version "v1.0" sauvegardée dans l'historique
✓ Lien partagé à l'équipe avec droits adaptés