Figma pour débutants : créer son premier design UI en 30 minutes (tutoriel 2025)
Tutoriel pratique pour maîtriser Figma de zéro et créer votre première interface de landing page en 30 minutes chrono.
Figma est devenu l'outil n°1 pour le design d'interfaces web et mobile. Gratuit, collaboratif et puissant, il a révolutionné le métier de designer UI/UX. Dans ce tutoriel, vous allez créer votre première landing page de A à Z en 30 minutes.
Pourquoi Figma ?
Avant de commencer, voici pourquoi Figma écrase la concurrence :
- 100% gratuit pour un usage personnel (jusqu'à 3 projets).
- Dans le navigateur : pas d'installation, fonctionne sur Mac, PC, Linux.
- Collaboratif en temps réel : comme Google Docs, plusieurs personnes peuvent travailler simultanément.
- Auto-save : impossible de perdre son travail.
- Prototypage intégré : créez des interactions sans code.
- Communauté géante : des milliers de templates et plugins gratuits.
Étape 1 : Créer un compte Figma (2 minutes)
- Allez sur figma.com
- Cliquez sur "Get started for free"
- Inscrivez-vous avec votre email ou Google
- Confirmez votre email
Vous arrivez sur le dashboard Figma. Bienvenue ! 🎨
Étape 2 : Créer votre premier fichier (1 minute)
- Cliquez sur le bouton "New design file"
- Nommez-le "Ma première landing page"
- Vous êtes maintenant dans l'éditeur Figma
Comprendre l'interface Figma
L'interface se découpe en 4 zones principales :
1. Barre d'outils (en haut)
- Move (V) : déplacer des éléments
- Frame (F) : créer un cadre/artboard
- Rectangle (R) : dessiner des formes
- Text (T) : ajouter du texte
- Hand (H) : naviguer dans le canvas
2. Canvas (centre)
C'est votre zone de travail infinie où vous dessinez.
3. Panneau de gauche (Layers)
Liste de tous vos éléments, comme dans Photoshop.
4. Panneau de droite (Properties)
Propriétés de l'élément sélectionné : couleur, taille, position, etc.
Étape 3 : Créer votre Frame (artboard)
Un Frame, c'est comme un plan de travail. On va créer une frame pour desktop.
- Appuyez sur F (ou cliquez sur l'icône Frame)
- Dans le panneau de droite, sous "Design", choisissez Desktop
- Sélectionnez le preset "Desktop (1440 × 1024)"
Un rectangle blanc apparaît : c'est votre page web !
Étape 4 : Créer le header de la landing page
1. Ajouter un fond au header
- Appuyez sur R pour créer un rectangle
- Dessinez-le en haut de votre Frame (toute la largeur, hauteur ~80px)
- Dans le panneau de droite, section Fill, cliquez sur le carré de couleur
- Choisissez une couleur (ex: #667EEA pour un joli bleu)
2. Ajouter le logo (texte simple)
- Appuyez sur T (Text)
- Cliquez dans le header à gauche
- Tapez "CODAURA" (ou le nom de votre projet)
- Sélectionnez le texte
- Dans le panneau de droite :
- Police : Inter (ou Montserrat)
- Taille : 24px
- Poids : Bold
- Couleur : Blanc (#FFFFFF)
3. Ajouter le menu de navigation
- Créez un texte T à droite du header
- Tapez "Accueil Services Contact"
- Style : Inter, 16px, Regular, Blanc
Ajustez l'espacement pour que ce soit harmonieux.
Étape 5 : Créer la section Hero
Le Hero, c'est la grosse section avec le titre accrocheur et le call-to-action.
1. Fond de la section
- Créez un rectangle R sous le header (hauteur ~600px)
- Couleur de fond : gradient
- Cliquez sur Fill > Type > Linear gradient
- Couleur 1 : #667EEA (en haut)
- Couleur 2 : #764BA2 (en bas)
2. Titre principal (H1)
- Texte T au centre de la section Hero
- Tapez : "Créez des designs incroyables avec Figma"
- Style :
- Police : Inter Bold
- Taille : 64px
- Couleur : Blanc
- Alignement : Centré (Ctrl+T ou icône dans la barre d'outils)
3. Sous-titre (description)
- Nouveau texte sous le titre
- Tapez : "L'outil de design collaboratif n°1 au monde"
- Style : Inter Regular, 20px, Blanc avec 80% d'opacité
4. Bouton Call-to-Action
Créons un beau bouton :
- Rectangle R : 200px × 60px
- Fill : Blanc
- Coins arrondis : 8px (ajustez dans Corner radius)
- Texte T sur le bouton : "Commencer gratuitement"
- Style texte : Inter Bold, 18px, Couleur #667EEA
Centrez le bouton sous le sous-titre.
Étape 6 : Utiliser Auto Layout (game changer)
Auto Layout est LA fonctionnalité qui rend Figma génial. Ça permet de créer des composants qui s'adaptent automatiquement.
Transformons notre bouton en Auto Layout :
- Sélectionnez le bouton (rectangle + texte)
- Appuyez sur Shift+A (ou clic droit > Add auto layout)
- Dans le panneau de droite, ajustez :
- Padding : 20px horizontal, 16px vertical
- Gap : 0px (si vous aviez plusieurs éléments)
Maintenant, si vous modifiez le texte, le bouton s'adapte automatiquement. Magique !
Étape 7 : Créer une section "Features" (cartes)
Créons 3 cartes pour présenter les avantages.
Carte 1 (nous la dupliquerons ensuite)
- Rectangle blanc : 360px × 200px, coins arrondis 12px
- Ombre portée :
- Cliquez sur Effects > + > Drop shadow
- X: 0, Y: 4, Blur: 12, Spread: 0, Couleur: noir 10% opacité
- Icône (émoji ou forme) : ajoutez un cercle coloré en haut
- Titre : "Design collaboratif" (Inter Bold, 20px, noir)
- Description : "Travaillez en équipe en temps réel" (Inter Regular, 16px, gris #666)
Dupliquer les cartes
- Sélectionnez la carte
- Alt + Drag (ou Cmd+D / Ctrl+D)
- Dupliquez 2 fois pour avoir 3 cartes
- Modifiez le contenu de chaque carte
Alignez les 3 cartes horizontalement avec un espacement régulier.
Étape 8 : Exporter votre design
Votre landing page est terminée ! Exportons-la :
- Sélectionnez votre Frame principale
- Panneau de droite > Export
- Choisissez le format :
- PNG : pour une image (2x pour retina)
- JPG : plus léger mais sans transparence
- SVG : pour des éléments vectoriels
- PDF : pour partager avec des clients
- Cliquez sur Export
Fonctionnalités bonus à découvrir
1. Créer des composants réutilisables
- Sélectionnez un élément (ex: votre bouton)
- Clic droit > Create component (ou Ctrl+Alt+K)
- Vous pouvez maintenant le réutiliser partout
- Toute modification du composant maître se répercute sur toutes les instances
2. Créer un prototype interactif
- Onglet Prototype (à côté de Design en haut à droite)
- Cliquez sur un bouton, puis tracez une flèche vers une autre Frame
- Configurez l'interaction : On Click > Navigate to > Frame 2
- Cliquez sur le bouton Play ▶️ en haut à droite pour tester
3. Utiliser des plugins
Figma a des milliers de plugins gratuits :
- Unsplash : insérer des photos libres de droits
- Iconify : bibliothèque d'icônes gratuite
- Content Reel : générer du faux texte et images
- Stark : vérifier l'accessibilité des couleurs
Pour installer : Menu > Plugins > Browse plugins
Raccourcis clavier essentiels
| Action | Raccourci |
|---|---|
| Frame | F |
| Rectangle | R |
| Texte | T |
| Déplacer (Move) | V |
| Zoom +/- | Ctrl/Cmd + scroll |
| Dupliquer | Ctrl/Cmd + D |
| Auto Layout | Shift + A |
| Grouper | Ctrl/Cmd + G |
| Créer composant | Ctrl/Cmd + Alt + K |
Ressources pour progresser
- Figma Community : Explorez des milliers de templates gratuits (figma.com/community)
- YouTube "Figma for beginners" : Tutoriels vidéo gratuits
- Figma Design Tips : Newsletter officielle avec des tips
- Dribbble / Behance : Inspiration de designs Figma
Erreurs courantes de débutants
- ❌ Ne pas utiliser de Frame : Travaillez toujours dans des Frames, pas directement sur le canvas
- ❌ Ignorer Auto Layout : C'est LE super-pouvoir de Figma, apprenez-le dès le début
- ❌ Trop de couleurs différentes : Limitez-vous à 2-3 couleurs principales
- ❌ Textes non alignés : Utilisez les guides d'alignement (activés par défaut)
- ❌ Pixels non arrondis : Activez "Pixel Preview" pour voir le rendu réel
Conclusion
Félicitations ! En 30 minutes, vous avez créé votre première landing page dans Figma. Vous maîtrisez maintenant les bases : Frames, formes, textes, couleurs, Auto Layout et export.
Figma est un outil incroyablement puissant mais intuitif. Plus vous pratiquez, plus vous découvrirez des fonctionnalités avancées qui accéléreront votre workflow. N'hésitez pas à explorer la Figma Community pour trouver l'inspiration et des templates prêts à l'emploi.
Maintenant, à vous de jouer : créez, expérimentez, et amusez-vous ! 🎨