Vérifié par Justyn Newman

Adobe XD (Adobe Experience Design) est une application de conception d’interface utilisateur et d’expérience utilisateur intuitive et supérieure créée par Adobe pour permettre aux créatifs comme vous de concevoir, prototyper et partager des conceptions d’expérience utilisateur et d’interaction pour les sites web, les applications et les médias sociaux.

Cela signifie que vous pouvez passer rapidement de la conceptualisation au prototypage et au partage lors de la conception de sites Web, d’applications mobiles, d’interfaces de jeux, de modèles d’e-mails et d’interfaces vocales. L’application est dotée de nombreuses fonctionnalités qui vous permettent d’atteindre ces objectifs en toute simplicité. Et le meilleur de tout ceci – vous pouvez l’obtenir gratuitement.

Suivez les instructions de téléchargement ci-dessous pour utiliser gratuitement durant 7 jours l’abonnement de démarrage d’Adobe XD.

Téléchargez Adobe XD gratuitement !

Comment télécharger et installer gratuitement Adobe XD sur votre PC

  1. Cliquez ici pour ouvrir la page de téléchargement d’Adobe XD dans un nouvel onglet.
  2. Faites défiler la page jusqu’en bas, puis cliquez sur le bouton Essai gratuit
    Essai gratuit d'Adobe XD
  3. Adobe vous offre deux options :
    • Téléchargez Adobe XD, qui comprend des prototypes partagés illimités et des spécifications de conception, Adobe Portfolio, Adobe Fonts et 100 Go de stockage.
    • Téléchargez l’ensemble de la collection d’applications Creative Cloud, qui comprend plus de 20 programmes, tels que Photoshop, InDesign, Premiere Pro et bien plus encore. Choisissez votre package préféré et cliquez sur le bouton Démarrer l’essai gratuit. Pour cet exemple, je télécharge uniquement Illustrator, mais les instructions sont les mêmes dans les deux cas
      Essai gratuit XD
  4. Entrez une adresse e-mail valide, et la page de paiement s’ouvrira. Bien que ce soit un essai gratuit, vous devrez quand même entrer vos informations de paiement pour activer l’essai. Vous ne serez pas facturé avant la fin de l’essai gratuit.
    Essai gratuit d'Adobe XD
  5. Si vous avez déjà un compte Adobe, vous pouvez vous connecter maintenant. Sinon, créez un mot de passe sécurisé et appuyez sur le bouton Continuer.
  6. Adobe confirmera la validité de votre mode de paiement, puis l’application Creative Cloud se téléchargera sur votre ordinateur.
  7. Lorsque le téléchargement du fichier est terminé, ouvrez-le et entrez votre mot de passe.
  8. Creative Cloud s’installera sur votre ordinateur.
  9. Une fois que Creative Cloud est terminé, l’installation d’Adobe XD commencera automatiquement. Si vous choisissez de télécharger l’ensemble de la collection d’applications Creative Cloud, elles commenceront à s’installer une par une.

Téléchargez Adobe XD gratuitement !

Présentation d’Adobe XD

Depuis quelque temps, de nombreux utilisateurs de la suite Adobe espéraient une application de développement proposant des outils intuitifs pour créer des graphiques mieux adaptés aux sites web, aux applications web et aux applications mobiles modernes. Adobe XD vous apporte cette expérience. L’application fait partie des nouvelles vagues d’applications d’Adobe Inc. Elle combine de nombreuses années d’expérience, des outils et des fonctionnalités issus des précédents logiciels Adobe pour offrir la meilleure expérience de conception UI et UX.

En tant que partie de Creative Cloud, il est facile de partager votre travail et d’importer des fichiers depuis d’autres logiciels Adobe, tels que Photoshop, Premiere Pro et Illustrator.

Adobe XD est un logiciel idéal si vous recherchez des outils graphiques qui vous permettent de créer sans effort les meilleures interfaces utilisateur pour les sites Web, les applications, les jeux et plus encore. En plus de développer des concepts et des designs, l’application vous permet de créer des prototypes et de partager vos idées avec d’autres personnes en déplacement.

Bien que XD soit généralement un logiciel premium, vous pouvez vous abonner à un plan de démarrage gratuit. Ce plan a ses limites, comme le nombre de documents que vous pouvez partager ou le nombre de prototypes et de sorties que vous pouvez produire.

La meilleure chose à faire est de commencer par l’essai gratuit de 7 jours qui vous donne un accès complet, sans aucune limitation. Ensuite, vous pourrez décider si vous voulez continuer avec le plan Starter ou vous abonner à la version complète à la fin de la semaine.

Caractéristiques d’Adobe XD

L’un des grands avantages de l’utilisation de XD est que si vous avez besoin d’un outil spécifique, vous pouvez toujours le télécharger à partir de n’importe quelle autre application Creative Cloud. Il y a également la possibilité d’importer des fichiers d’images tels que jpg, svg, png et gif. Cependant, XD ne dispose pas de la capacité de télécharger des fichiers vidéo ou des gifs animés.

Composants

Les composants sont des éléments réutilisables que vous pouvez créer et utiliser dans votre conception. Cela vous permet de gagner du temps et de l’énergie, et de garantir la cohérence de votre conception. Vous pouvez par exemple créer un composant pour un bouton qui comprend du texte, un style et la couleur du bouton, de sorte que vous puissiez facilement ajouter le même bouton à différentes parties de votre conception.

Pour créer un composant, sélectionnez l’objet ou le groupe d’objets que vous souhaitez transformer en composant, puis cliquez sur le bouton « Créer un composant » dans la barre d’outils. Vous pouvez ensuite donner un nom à votre composant et l’enregistrer. Pour utiliser un composant dans votre dessin, il vous suffit de le faire glisser du panneau Composants vers votre plan de travail (« Artboard »).

Mise en page consciente du contenu

Le layout Content Aware intelligent vous permet de travailler sans avoir à vous soucier de l’alignement parfait des différents composants. Adobe XD les déplacera automatiquement pour créer des espaces égaux lorsque vous ajoutez, supprimez ou redimensionnez des objets. Pour activer le layout Content Aware, utilisez l’outil de sélection pour choisir deux couches ou plus, puis cliquez sur Créer un composant. Ensuite, activez le Layout Content Aware et la taille du rembourrage s’ajustera en fonction des couches environnantes sans déformer les images ou les zones de texte.

Redimensionnement réactif et contraintes

Le redimensionnement réactif et les contraintes vous permettent de créer des conceptions réactives qui s’affichent correctement sur différents appareils et tailles d’écran. Cela signifie que vous n’avez pas à vous soucier de créer des prototypes distincts pour différents appareils, vos conceptions seront donc toujours optimales.

Pour utiliser le redimensionnement réactif et les contraintes, vous devez d’abord créer un composant maître. Un composant maître est un composant que vous pouvez utiliser pour créer plusieurs instances du même composant. Pour créer un composant maître, sélectionnez l’objet ou le groupe d’objets que vous souhaitez transformer en composant maître, puis cliquez sur le bouton Créer un composant maître dans la barre d’outils.

Une fois que vous avez créé un composant maître, vous pouvez lui ajouter un redimensionnement réactif et des contraintes. Pour ce faire, sélectionnez le composant maître et cliquez sur le bouton Redimensionnement réactif dans la barre d’outils. Vous pouvez alors choisir le type de redimensionnement réactif que vous souhaitez appliquer. Vous pouvez également spécifier les marges et le rembourrage du composant maître.

Transitions temporisées

Les transitions temporisées vous permettent de créer des animations qui se produisent à des moments précis. Cela peut s’avérer utile pour créer des prototypes qui montrent comment les utilisateurs interagiront avec une conception au fil du temps. Pour créer une transition temporisée, sélectionnez l’objet ou le groupe d’objets que vous souhaitez animer, puis cliquez sur le bouton Transition dans la barre d’outils. Une fois que vous avez sélectionné le bouton Transition, vous pouvez choisir le type de transition que vous souhaitez appliquer. Vous pouvez également spécifier la durée de la transition et l’heure à laquelle elle doit commencer.

Les transitions temporisées peuvent être utilisées à des fins très diverses, par exemple pour créer des animations d’accueil, des didacticiels interactifs et des démonstrations de produits.

Liens d’ancrage

Les liens d’ancrage vous permettent de relier différentes parties de votre prototype. Cela peut être utile pour créer des flux d’utilisateurs complexes ou pour permettre aux utilisateurs de naviguer entre différents écrans. Par exemple, vous pouvez utiliser des liens d’ancrage pour créer un prototype de site web comportant plusieurs pages, ou pour créer un prototype d’application mobile comportant plusieurs écrans.

Pour créer un lien d’ancrage, sélectionnez l’objet ou le groupe d’objets vers lequel vous souhaitez établir un lien, puis cliquez sur le bouton Lien d’ancrage dans la barre d’outils. Une fois que vous avez créé un lien d’ancrage, vous pouvez le lier à un autre objet ou groupe d’objets de votre prototype. Pour ce faire, il vous suffit de faire glisser le lien d’ancrage du panneau Liens d’ancrage sur l’objet ou le groupe d’objets que vous souhaitez relier.

Transformations 3D

Faites passer vos designs UX au niveau supérieur avec la fonctionnalité de transformation 3D. Elle vous permet de faire tourner les objets, d’ajouter de la profondeur et de changer la perspective de votre design. Les outils 3D intuitifs sont assez faciles à utiliser et vous donnent la possibilité d’afficher votre design avec une réalité impossible à obtenir avec d’autres logiciels Adobe. La transformation 3D est extrêmement utile pour les designs AR/VR.

Incrustations

Les incrustations vous permettent d’ajouter des informations supplémentaires à votre prototype sans avoir à créer un nouvel écran. Cela peut être utile pour fournir un retour d’information aux utilisateurs ou pour les aider à comprendre comment utiliser votre conception, par exemple en créant des infobulles, des messages d’erreur ou des boîtes de dialogue modales.

Pour créer une incrustation, cliquez sur le bouton Incrustation dans la barre d’outils. Une fois que vous avez cliqué sur le bouton Incrustation, vous pouvez ajouter le contenu que vous souhaitez voir apparaître dans l’incrustation. Vous pouvez également spécifier la position de l’incrustation et l’heure à laquelle elle doit apparaître.

Masquage et effets

Le masquage et les effets vous permettent de créer des dessins plus complexes et plus attrayants. Le masquage vous permet de cacher des parties d’un objet et les effets vous permettent d’ajouter des ombres, des lueurs et d’autres améliorations visuelles.

Pour masquer un objet, sélectionnez l’objet à masquer, puis l’outil Forme. Dessinez une forme sur la partie de l’objet que vous souhaitez masquer. Pour appliquer un effet à un objet, sélectionnez l’objet, puis cliquez sur le bouton Effets dans la barre d’outils. Choisissez l’effet que vous souhaitez appliquer, puis réglez les paramètres à votre convenance.

Ces outils permettent de créer une grande variété d’effets, tels que des boutons de forme personnalisée, des effets de survol et des transitions animées.

Créez et partagez des prototypes

L’un des meilleurs avantages d’Adobe XD est la possibilité de créer un prototype de votre design. Non seulement cela vous donne l’occasion de le tester et de vous assurer que tout fonctionne et a l’air génial, mais vous pouvez facilement le partager avec des clients, des collègues ou des professeurs.

La création de prototypes est une fonctionnalité clé pour la conception d’interfaces interactives, telles que des formulaires ou des boutons, et pour tester la manière dont les différents écrans se connectent et réagissent entre eux.

Adobe XD dispose de plusieurs outils spécialement conçus pour lui, comme Auto Animate. Vous pouvez utiliser cet outil pour concevoir des animations, des transitions, des designs qui s’adaptent à la taille de l’écran ou à l’appareil sur lequel ils sont visualisés en redimensionnant différents objets ou en sélectionnant un objet à verrouiller en place lors du défilement.

Créer un suivi pour différents types d’engagement utilisateur

En dehors de la conception, comprendre comment un utilisateur interagit avec votre conception est l’un des aspects les plus importants du projet. Adobe XD dispose des outils qui peuvent vous aider à voir exactement comment les utilisateurs réagissent grâce à plusieurs déclencheurs et entrées différents. Selon le projet fini, vous pouvez utiliser des déclencheurs de base tels que Tap ou Drag, jusqu’à des options plus avancées comme la voix, l’utilisation d’un contrôleur de jeu Bluetooth ou différentes frappes de clavier.

Conception de prototypes vocaux

Le prototypage vocal vous permet de créer des prototypes qui peuvent être contrôlés avec votre voix. Il s’agit d’un nouveau moyen puissant de tester et de valider des interfaces utilisateur basées sur la voix sans avoir à écrire de code. Vous économiserez du temps et des efforts, et vous pourrez obtenir rapidement et souvent des réactions de la part des utilisateurs.

Pour utiliser le prototypage vocal, vous devez d’abord créer un prototype dans XD. Une fois votre prototype créé, vous pouvez y ajouter des commandes vocales. Pour ce faire, cliquez sur le bouton Prototypage vocal dans la barre d’outils, puis sélectionnez l’objet ou le groupe d’objets auquel vous souhaitez ajouter une commande vocale. Une fois l’objet ou le groupe d’objets sélectionné, vous pouvez enregistrer votre commande vocale.

Une fois que vous avez enregistré votre commande vocale, vous pouvez la tester en cliquant sur le bouton Prévisualiser. Pour prévisualiser votre prototype sur un appareil mobile, vous pouvez utiliser l’application mobile XD.

Exporter Adobe XD vers HTML

La fonction d’exportation vers HTML vous permet d’exporter vos conceptions XD directement vers HTML. Vous pouvez ainsi gagner du temps et de l’énergie, car vous n’avez pas à convertir manuellement vos dessins ou vos prototypes.

Pour exporter vers HTML, il suffit de sélectionner le plan de travail que vous souhaitez exporter, puis d’aller dans Fichier > Exporter. Dans la boîte de dialogue Exporter, sélectionnez HTML dans le menu déroulant Format et cliquez sur Exporter. XD génère un fichier HTML et un fichier CSS pour votre conception. Vous pouvez ensuite ouvrir le fichier HTML dans un navigateur Web pour visualiser votre dessin.

La fonction d’exportation vers HTML est particulièrement utile pour la création de pages web et d’applications. Elle est également utile pour partager vos créations avec les développeurs, car ils peuvent utiliser les fichiers HTML et CSS pour créer le site web ou l’application.

Pour exporter votre dessin ou modèle, procédez comme suit :

  1. Créez votre page web en XD.
  2. Une fois votre dessin terminé, sélectionnez le plan de travail que vous souhaitez exporter, puis allez dans Fichier > Exporter.
  3. Dans la boîte de dialogue Exporter, sélectionnez HTML dans le menu déroulant Format et cliquez sur Exporter. XD génère un fichier HTML et un fichier CSS pour votre conception.
  4. Téléchargez les fichiers HTML et CSS sur votre serveur web.
  5. Ouvrez votre page web dans un navigateur pour visualiser votre conception.

La fonction d’exportation vers HTML est un outil puissant qui vous permet de gagner du temps et de l’énergie lors de la création de pages web et d’applications. C’est également un excellent moyen de partager vos créations avec les développeurs.

Étendez la puissance d’XD avec des plugins

Adobe XD dispose d’une gamme assez puissante de fonctionnalités, mais même Adobe ne peut pas tout inclure dans un seul package. C’est pourquoi il est compatible avec des plugins tiers. Vous pouvez étendre les capacités d’un point de vue technique ou ajouter différentes combinaisons de couleurs qui ne sont pas disponibles dans les schémas de couleurs intégrés. Il existe des centaines de plugins gratuits et payants qui peuvent être facilement téléchargés sur XD sans avoir de connaissances techniques ou d’expertise.

Facilité d’utilisation

Pour une expérience optimale, il est nécessaire d’avoir une certaine expérience en développement ou en design. Toutefois, pour les designers et les développeurs ayant une expérience préalable avec d’autres produits Adobe, l’utilisation de XD est assez facile.

Si vous souhaitez apprendre à utiliser XD correctement, vous pouvez accéder à une section « Apprendre » complète via l’application ou le site web d’Adobe.
Apprendre Adobe XD

Guides pas-à-pas pour apprendre XD

Ces guides étape par étape vous guideront à travers le processus de développement et de conception. Vous apprendrez comment configurer votre poste de travail, à quoi servent les différents outils, comment créer des objets en 3D, concevoir des prototypes activés par la voix, des prototypes classiques, comment collaborer avec d’autres personnes, et bien plus encore.

Une fois que vous commencez à utiliser XD, vous verrez que c’est un programme assez facile à maîtriser car il a un objectif unique. Avec les mises à jour apportées à la dernière version de XD, telles que Auto Animate et l’amélioration de Content Aware Layout, de nombreux ajustements mineurs sur la planche à dessin se font automatiquement, ce qui rend son utilisation encore plus facile.

Interface utilisateur

Lorsque vous commencez un nouveau projet dans XD, vous pouvez choisir la taille de votre espace de travail pour qu’il soit similaire à celle d’un iPhone, d’un ordinateur de bureau, d’une story Instagram ou d’une taille personnalisée.
Taille du document pour les nouveaux projets XD

Choisissez la taille de votre document

Après avoir choisi la taille de votre projet préférée, une station de travail s’ouvrira avec des outils à gauche et des éléments de style à droite.
Interface Adobe XD

Avec les éléments situés à droite, vous pouvez ajuster:

  • Style: Ajoutez du CSS et d’autres options de style pour créer le design parfait
  • Design: Sélectionnez parmi différents modèles, grilles et modes pris en charge par les API de l’interface utilisateur.

Avec ces paramètres, vous pouvez ajuster tout ce qui concerne l’apparence des objets dans votre espace de travail. Vous pouvez arrondir les coins, changer les couleurs, définir différents types de polices, afficher à quoi ressemblerait la page avec une conception responsive et bien plus encore.

La barre d’outils sur la gauche est l’endroit où vous trouverez tous les outils principaux, tels que l’ajout de formes, de lignes, de textes et de zoom. Chaque outil a un raccourci clavier et une fois que vous les connaissez, vous verrez à quel point vous pouvez travailler plus rapidement.

Compatibilité

La version complète d’Adobe XD est uniquement disponible sur PC et Mac, à condition qu’ils respectent les exigences minimales du système détaillées ci-dessous.

Il existe des applications XD pour Android et iOS, mais elles ne permettent que de prévisualiser la conception et de tester le prototype. Vous aurez toujours accès à la dernière version du projet via votre bibliothèque Creative Cloud. Cependant, il n’y a pas d’outils d’édition, et toutes les modifications doivent être apportées sur le bureau.

Il existe deux façons de prévisualiser vos projets XD :

  1. La prévisualisation en temps réel avec une connexion USB : connectez vos appareils mobiles à l’ordinateur exécutant Adobe XD. Vous obtiendrez un aperçu en temps réel des prototypes et des designs, et toutes les modifications pourront être consultées sur l’appareil mobile en temps réel.
  2. Le chargement de documents cloud : accédez instantanément à tous les documents XD enregistrés sous forme de document cloud dans votre compte Creative Cloud.

Exigences système

En plus d’avoir les spécifications requises sur votre ordinateur, XD ne fonctionne qu’avec les dernières versions des navigateurs suivants :

  • Chrome: Windows 7+ et macOS 10.13+
  • Firefox: Windows 7+ et macOS 10.13+
  • Edge: Windows 10+
  • Safari: macOS 10.13+

XD ne prend pas en charge la visualisation des spécifications de conception partagées sur les navigateurs mobiles.

Windows

Système d’exploitation Windows 10 (64 bits) et supérieur
Affichage Résolution de 1280×800 et un écran d’au moins 13 pouces
RAM 4 Go
Stylo et fonction tactile Fonctionne avec les fonctionnalités de stylo et de toucher natives de Windows
Stockage
Il est préférable d’utiliser des documents cloud de Creative Cloud plutôt que des fichiers synchronisés depuis Creative Cloud ou d’autres serveurs de stockage.

Mac

Système d’exploitation 10.15 (Catalina) ou ultérieur
Affichage Résolution de 1400×900 pixels et au moins un écran de 13 pouces. Il est recommandé d’avoir un écran Retina, mais ce n’est pas obligatoire.
RAM 4 Go
Stockage Il est préférable d’utiliser des documents cloud depuis Creative Cloud et non des fichiers synchronisés depuis Creative Cloud ou d’autres serveurs de stockage

L’accès à Internet est requis à la fois pour Windows et Mac lors de l’installation et de l’enregistrement et pour accéder à certaines bibliothèques et fonctionnalités. Vous ne pouvez voir les prototypes avec des capacités vocales que lorsque vous êtes connecté à Internet.

iOS: Compatible avec tous les iPads et iPhones 64 bits fonctionnant sous iOS 14.0 et ultérieur.

Android: Adobe a testé XD sur les appareils Samsung Galaxy S10 et S20 ainsi que Google Pixel 2 et 4. Selon ces tests, il devrait être compatible avec tout appareil Android 9.0 et ultérieur avec Open GL ES 2.0.

Outils de montage supplémentaires d’Adobe

  • Adobe Photoshop: Photoshop est le meilleur logiciel d’édition d’images et de photos numériques. Il comprend une excellente collection d’outils qui permettent de modifier facilement les traits du visage d’une personne, de supprimer les éléments indésirables d’une image, de créer des options de typographie, et encore bien plus.
  • Adobe Illustrator: Adobe Illustrator fonctionne sur les ordinateurs Windows et Mac. Il s’agit d’un éditeur de graphiques vectoriels de premier plan et d’un programme de conception utilisé par de nombreux concepteurs pour créer des graphiques, des logos, des icônes, des clip arts, etc pour le web et les mobiles.
  • InDesign: Cet outil de publication de niveau expert est idéal pour créer du contenu pour des journaux, des livres, des magazines et d’autres documents imprimés. Il dispose de diverses fonctionnalités, allant de la stylisation du texte et de l’ajustement des images à la typographie avancée. Sa compatibilité transparente avec d’autres outils Adobe Creative Cloud tels que Photoshop et Illustrator améliore le processus de conception.
  • Premiere Pro: La plateforme de montage vidéo de premier plan d’Adobe est conçue pour la production de films, de productions télévisées et de divers segments vidéo. Elle est dotée de nombreuses fonctionnalités permettant d’affiner les séquences, d’optimiser les couleurs et d’introduire des effets spéciaux. De plus, son intégration avec les suites Creative Cloud d’Adobe, telles qu’After Effects et Audition, simplifie la création de vidéos complexes et de qualité professionnelle.

Comment désinstaller Adobe XD

Si votre période d’essai gratuite est terminée et que vous ne souhaitez pas continuer à utiliser Adobe XD ou passer au plan de démarrage, vous pouvez le supprimer de votre ordinateur en suivant ces étapes simples :

  1. Tapez Ajouter ou supprimer des programmes dans la barre de recherche de Windows et validez par Entrée.
    Capture d'écran de la désinstallation d'Adobe XD sur Windows
  2. Localisez Adobe XD dans la liste des programmes installés et cliquez sur le bouton Désinstaller.
  3. L’assistant de désinstallation s’ouvre. Confirmez que vous voulez supprimer le logiciel, et il sera supprimé de votre ordinateur.

Vous pouvez également vous rendre sur votre compte Creative Cloud Desktop, cliquer sur les trois points horizontaux dans le coin supérieur droit à côté d’Adobe XD, puis cliquer sur Désinstaller.
Capture d'écran du bureau Creative Cloud

Comment désinstaller Adobe XD de Creative Cloud Desktop

Cela supprimera le logiciel de votre PC.

FAQs

Adobe XD est-il gratuit ?

Bien qu’il n’existe pas de version entièrement gratuite d’Adobe XD, si vous suivez le guide étape par étape ci-dessus, je vous montrerai comment obtenir une version d’essai gratuite pendant 7 jours. Vous aurez ainsi le temps de réaliser quelques projets ou de tester le logiciel pour voir s’il répond à vos besoins, avant de vous engager dans l’une des formules payantes.

Comment exporter des fichiers Adobe XD vers HTML ?

Adobe XD propose une fonction « Export to HTML » facile à utiliser qui permet aux concepteurs de convertir leurs créations directement en HTML. Pour commencer, sélectionnez le plan de travail que vous souhaitez exporter, puis accédez à Fichier > Exporter. Choisissez « HTML » comme format souhaité dans la boîte de dialogue d’exportation. Après l’exportation, XD génère un fichier HTML et un fichier CSS de votre conception. Consultez mon guide étape par étape pour l’exportation de XD vers HTML ici.

Comment recadrer des images dans Adobe XD ?

Le recadrage des images est l’une des fonctions les plus faciles à utiliser d’Adobe XD. Pour recadrer une image, sélectionnez-la et cliquez sur le bouton Recadrer dans la barre d’outils. Faites ensuite glisser les poignées situées dans les coins du rectangle de recadrage pour sélectionner la zone de l’image que vous souhaitez conserver. Vous pouvez également maintenir enfoncée la touche Majuscule afin de conserver le rapport hauteur/largeur de l’image pendant le recadrage. Lorsque vous êtes satisfait du recadrage, appuyez sur Entrée pour l’appliquer.

Puis-je exporter un fichier XD vers WordPress ?

Pour convertir un design Adobe XD en WordPress, vous pouvez soit l’exporter en HTML et CSS, soit utiliser un plugin.

Pour exporter vers HTML et CSS, ouvrez votre conception XD et sélectionnez le plan de travail que vous souhaitez exporter. Ensuite, allez dans Fichier > Exporter et sélectionnez HTML dans le menu déroulant Format. Cliquez sur Exporter pour générer les fichiers HTML et CSS. Vous pouvez ensuite télécharger ces fichiers sur votre site web WordPress.

Pour utiliser un plugin, installez et activez un plugin tel que XD to WordPress ou Xporter. Ouvrez ensuite la page de configuration du plugin et sélectionnez le fichier XD que vous souhaitez convertir. Cliquez sur Convertir pour générer une nouvelle page ou un nouvel article WordPress avec votre design.

Téléchargez Adobe XD maintenant !