Adobe XD est mort — utilisez Figma à la place
Adobe a officiellement arrêté le développement de XD en janvier 2024. Le logiciel n’est plus disponible au téléchargement et ne recevra plus de mises à jour. Si vous utilisez encore XD, migrez vers Figma — c’est l’outil standard de l’industrie, il est gratuit pour un usage personnel, et il fonctionne dans le navigateur (pas d’installation nécessaire).
Ce tutoriel vous apprend à créer des prototypes interactifs avec Figma, qui reprend toutes les fonctionnalités de XD en les améliorant.
Créer un compte Figma et comprendre l’interface
Rendez-vous sur figma.com et créez un compte gratuit. Le plan Starter est suffisant pour débuter : fichiers illimités, prototypage complet, et collaboration en temps réel.
L’interface Figma se divise en 4 zones :
- Panneau de gauche : la liste des calques (layers) et des pages de votre fichier
- Canvas central : votre espace de travail — c’est ici que vous dessinez
- Panneau de droite : les propriétés de l’élément sélectionné (taille, couleurs, effets, prototype)
- Barre d’outils en haut : les outils de dessin (rectangle, ellipse, texte, plume, frame)
Concevoir les écrans de votre prototype
Créer des frames (artboards)
Appuyez sur F ou cliquez sur l’outil Frame dans la barre d’outils. Dans le panneau de droite, choisissez un preset de taille :
- iPhone 14 Pro (393×852) pour un prototype mobile
- Desktop (1440×900) pour un prototype web
- Android Large (360×800) pour Android
Créez une frame pour chaque écran de votre application : page d’accueil, page produit, panier, checkout, confirmation. Organisez-les de gauche à droite pour visualiser le flux.
Utiliser les composants (components)
Les composants sont des éléments réutilisables — boutons, cartes, en-têtes, barres de navigation. Créez un composant une fois, utilisez-le partout. Si vous modifiez le composant principal, toutes les instances se mettent à jour automatiquement.
Pour créer un composant : sélectionnez un groupe d’éléments, puis Ctrl+Alt+K (ou clic droit > Create Component). Le composant apparaît avec une icône losange violet dans le panneau de gauche.
Appliquer un style cohérent
Définissez vos styles globaux avant de commencer le design détaillé :
- Couleurs : créez 4-5 styles de couleur (primaire, secondaire, texte, fond, erreur). Sélectionnez un élément, cliquez sur le « + » à côté de la couleur dans le panneau de droite pour créer un Color Style
- Typographie : créez des styles de texte (Titre H1, H2, corps, légende). Un style de texte inclut la police, la taille, le poids et l’interligne
- Effets : définissez une ombre standard pour vos cartes (ex: 0px 4px 12px rgba(0,0,0,0.1))
Ajouter les interactions de prototype
Passer en mode Prototype
Cliquez sur l’onglet Prototype dans le panneau de droite (à côté de Design). C’est ici que vous définissez les connexions entre les écrans et les animations.
Créer une navigation entre écrans
- Sélectionnez l’élément qui déclenche la navigation (ex: un bouton « Voir le produit »)
- En mode Prototype, un cercle bleu apparaît sur le bord droit de l’élément
- Cliquez et glissez ce cercle vers la frame de destination (la page produit)
- Configurez l’interaction dans le panneau de droite :
- Trigger : On Tap (mobile) ou On Click (desktop)
- Action : Navigate To
- Animation : Smart Animate (transition fluide), Slide In, ou Dissolve
- Duration : 300ms (standard pour la plupart des transitions)
Smart Animate : la fonctionnalité magique
Smart Animate est la fonctionnalité la plus puissante de Figma pour le prototypage. Elle anime automatiquement les différences entre deux frames. Si un bouton change de position, de taille ou de couleur entre l’écran A et l’écran B, Smart Animate crée une transition fluide entre les deux états.
Condition requise : les éléments qui doivent être animés doivent avoir le même nom de calque dans les deux frames. Figma les fait correspondre par nom.
Exemple pratique : créez un menu hamburger. Frame 1 = menu fermé (icône ☰). Frame 2 = menu ouvert (panneau latéral visible). Si les éléments partagent les mêmes noms, Smart Animate fera glisser le menu depuis le côté de manière fluide.
Créer un overlay (popup/modal)
- Créez une frame séparée pour votre popup (ex: « Confirmer la suppression ? »)
- Connectez le bouton déclencheur à cette frame
- Action : Open Overlay (au lieu de Navigate To)
- Position : Center (centré) ou Manual (positionnement libre)
- Cochez Close when clicking outside pour que l’overlay se ferme au clic en dehors
- Ajoutez un fond semi-transparent en cochant Add background behind overlay
Scroll et contenu qui dépasse l’écran
Pour un écran qui défile (page d’accueil longue, liste de produits) :
- Rendez le contenu de votre frame plus grand que la frame elle-même
- Sélectionnez la frame, dans le panneau de droite, changez Overflow de « Visible » à « Vertical Scrolling »
- Pour fixer un élément (header, barre de navigation du bas), sélectionnez-le et cochez « Fix position when scrolling » dans le panneau de droite
Tester et partager votre prototype
Prévisualiser
Appuyez sur le bouton ▶ Play en haut à droite ou utilisez le raccourci Ctrl+Alt+Enter. Figma ouvre votre prototype dans un nouvel onglet. Naviguez comme un vrai utilisateur pour vérifier que toutes les interactions fonctionnent.
Partager avec un client ou un collaborateur
Cliquez sur Share Prototype dans la prévisualisation. Copiez le lien — n’importe qui avec le lien peut tester le prototype dans son navigateur, sans compte Figma, sur mobile ou desktop. Ce lien est votre livrable pour le client.
Collecter les commentaires
Les personnes qui ouvrent le lien peuvent cliquer n’importe où sur le prototype et laisser un commentaire (icône bulle 💬). Les commentaires apparaissent dans votre fichier Figma, positionnés exactement là où la personne a cliqué. C’est la manière la plus efficace de recueillir du feedback client.
Raccourcis Figma essentiels
- R : Rectangle
- O : Ellipse
- T : Texte
- F : Frame
- V : Sélection (Move)
- Ctrl+D : Dupliquer
- Ctrl+G : Grouper
- Ctrl+Alt+K : Créer un composant
- Ctrl+Alt+Enter : Prévisualiser le prototype
- Shift+A : Auto Layout (arrangement automatique)
Ressources gratuites pour accélérer votre travail
- Figma Community (figma.com/community) : des milliers de templates, kits UI et icons gratuits publiés par la communauté. Cherchez « mobile app UI kit » ou « e-commerce template »
- Untitled UI : le plus grand kit de design system gratuit pour Figma — 10 000+ composants
- Iconify (plugin Figma) : accès à 200 000+ icônes directement dans Figma
- Unsplash (plugin Figma) : photos libres de droits insérées directement dans vos designs
- Content Reel (plugin Figma) : remplissage automatique de textes et avatars réalistes pour vos mockups
