À propos de ce cours
Cette leçon présente Adobe XD et sa situation actuelle : en mode maintenance depuis 2023, il ne reçoit plus de nouvelles fonctions et n'est disponible que dans l'abonnement Creative Cloud toutes applications. Elle décrit ses trois modes (Design, Prototype, Partager), la grille de répétition, les composants et leurs états, l'Auto-Animate, compare XD et Figma, et explique comment reprendre un projet XD (inventorier, exporter, reconstruire, vérifier). Deux activités, et une variante facultative dans XD.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 45 minutes (cours et 2 activités) | Débutant, chapitre « Digitaliser le produit avec les outils d'UI » | Créer un prototype interactif avec Figma | Vous connaissez la situation d'Adobe XD, ses principales notions et la façon de reprendre un projet XD |
-
Objectifs
- Connaître la situation actuelle d'Adobe XD.
- Comprendre ses trois modes: Design, Prototype, Partager.
- Reconnaître ses notions clés : plans de travail, grille de répétition, composants et états, Auto-Animate.
- Comparer Adobe XD et Figma.
- Savoir reprendre un projet conçu dans XD.
-
Adobe XD aujourd'hui
- Adobe XD est l'outil de conception d'interfaces d'Adobe, lancé en 2016. Il a été très utilisé, notamment par les équipes déjà équipées de Photoshop et d'Illustrator.
- Depuis 2023, Adobe XD est en mode maintenance: Adobe corrige les bugs et les failles de sécurité, mais ne développe plus de nouvelles fonctions.
- Il n'est plus vendu seul : il reste accessible uniquement dans l'abonnement Creative Cloud toutes applications.
- Conséquence : on ne démarre pas un nouveau projet sur XD. Mais des entreprises ont encore des maquettes XD : un développeur ou un designer doit savoir les lire et les reprendre.
- Les notions d'XD sont les mêmes que celles de Figma, sous d'autres noms : ce que vous avez appris s'applique.
⚠ Piège : ne vous fiez pas à un ancien tutoriel ou à une ancienne offre : vérifiez toujours la situation d'un outil (développement, prix, accès) avant de commencer un projet. Cette leçon décrit la situation à la date de sa rédaction (novembre 2026).
-
Les trois modes d'Adobe XD
- Mode Design: on dessine les plans de travail (artboards, l'équivalent des cadres de Figma), les formes, les textes, les composants.
- Mode Prototype: on relie les plans de travail. Les déclencheurs sont l'appui, le glissement, le délai, le clavier, et même la voix ; les transitions incluent l'Auto-Animate.
- Mode Partager: on crée un lien de revue (le prototype avec des commentaires) ou un lien de développement (spécifications et ressources à télécharger).
-
La grille de répétition
- La grille de répétition (Repeat Grid) est une fonction emblématique d'XD : on sélectionne un élément (une carte de plat), on tire une poignée, et l'élément se répète en lignes et en colonnes, avec un espacement réglable.
- En glissant un fichier texte sur la grille, on remplit les noms ; en glissant un dossier d'images, on remplit les photos.
- Dans Figma, on obtient le même résultat avec un composant et l'auto layout avec retour à la ligne, et des extensions pour remplir les contenus.
-
Composants, états et Auto-Animate
- Les composants d'XD ont des états (par défaut, survol, appuyé, et des états personnalisés) : c'est l'équivalent des variantes de Figma.
- La mise en page adaptée au contenu (piles, marges internes) correspond à l'auto layout.
- L'Auto-Animate anime la différence entre deux plans de travail dont les calques portent les mêmes noms : c'est le Smart Animate de Figma.
- Les ressources du document (couleurs, styles de caractères, composants) jouent le rôle des variables et des styles.
-
Comparer Adobe XD et Figma
- Les deux outils partagent les mêmes concepts : plans de travail ou cadres, composants et états ou variantes, prototype, partage.
- Les différences tiennent surtout à leur situation: Figma est mis à jour régulièrement, fonctionne dans le navigateur, propose le travail à plusieurs en temps réel, le Dev Mode et un plan gratuit pour l'éducation.
- C'est pourquoi les exercices de ce cours se font dans Figma. D'autres outils existent aussi : Penpot (libre et gratuit, dans le navigateur), Sketch (sur Mac).
-
Reprendre un projet Adobe XD
- Inventorier: ouvrez le fichier XD (ou le lien de développement) et listez les écrans, les composants, les couleurs, les styles de texte.
- Exporter: depuis XD, exportez les ressources utiles (icônes en SVG, images) et relevez les valeurs (couleurs, tailles, espacements).
- Reconstruire dans Figma : recréez d'abord les variables, les styles et les composants, puis les écrans. Des outils de conversion existent, souvent payants, mais le résultat est rarement propre : prévoyez de le reprendre.
- Vérifier: comparez les écrans côte à côte et faites valider la nouvelle version avant d'abandonner l'ancienne.
🍽 Exemple : CantineCampus
- Imaginons que le service communication du restaurant ait réalisé une première affiche interactive dans XD en 2022.
- Plutôt que de convertir le fichier, l'équipe a relevé ses couleurs et ses polices, exporté le logo en SVG et reconstruit les écrans dans Figma avec les composants de la charte.
-
Aide-mémoire
-
Activités
Activité 1Traduire XD en Figma · ⏱ 15 min
- Pour chaque notion d'Adobe XD (plan de travail, grille de répétition, état de composant, Auto-Animate, lien de revue, lien de développement), donnez son équivalent dans Figma.
- Pour deux d'entre elles, montrez l'équivalent dans votre fichier Figma (capture).
📁 Résultat attendu : le tableau des équivalences et les deux captures.
Activité 2Vérifier la situation d'un outil · ⏱ 15 min
- Choisissez un outil de conception (Adobe XD, Sketch, Penpot ou un autre).
- Sur le site de l'éditeur, relevez : la date de la dernière mise à jour, le prix, l'offre pour l'éducation, les systèmes pris en charge.
- Concluez en deux phrases : peut-on démarrer un projet avec cet outil aujourd'hui ?
📁 Résultat attendu : la fiche de l'outil, avec les liens des sources.
Activité 3Variante facultative : un écran dans XD · ⏱ 20 min
- Si votre établissement dispose de Creative Cloud toutes applications, reproduisez l'écran « Menu du jour » dans Adobe XD avec une grille de répétition.
- Comparez le temps passé et les difficultés avec Figma.
📁 Résultat attendu : l'écran XD et une comparaison en cinq lignes.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Nouveau projet démarré dans XD | Situation de l'outil non vérifiée | Vérifier le statut ; choisir un outil maintenu |
| Fichier converti « tel quel », plein de défauts | Confiance dans la conversion automatique | Reconstruire variables, styles et composants |
| Ressources perdues | Projet abandonné sans export | Exporter SVG, images et valeurs avant de migrer |
| « XD et Figma, c'est différent » | Vocabulaire différent | Mêmes concepts, autres noms |
-
Bilan
- Adobe XD est en mode maintenance: on ne démarre plus de projet avec, mais on peut avoir à en reprendre.
- Ses trois modes (Design, Prototype, Partager) suivent la même logique que Figma.
- Grille de répétition, états et Auto-Animate ont leurs équivalents dans Figma.
- Reprendre un projet XD : inventorier, exporter, reconstruire, vérifier.
- Avant tout projet, on vérifie la situation de l'outil choisi.
Les outils passent, les principes restent : un composant, un état, une transition se pensent de la même façon partout.