Figma pour débutants : créer sa première interface

Ce que vous saurez faire à la fin

1. Créer un compte Figma et configurer votre premier projet équipe.
2. Maquetter une page web et un écran mobile complet.
3. Utiliser composants, variants, auto-layout, styles et variables.
4. Construire un mini design system et le partager.
5. 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.

É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.

É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)

É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.

É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 %.

É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).

É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.

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