Comment exporter Adobe XD en HTML

Adobe XD est un outil de conception incroyable qui vous permet de créer facilement des conceptions de sites Web fantastiques sans expérience préalable en développement Web. Vous pouvez simplement importer des fichiers PSD de votre conception à partir de Photoshop et créer une interface utilisateur Web accrocheuse.

Ces conceptions aident énormément les développeurs à comprendre comment vous voulez que votre site Web ressemble et facilitent un peu le processus de développement. Toutefois, il existe un nombre limité de moyens d’exporter les dessins à partir du logiciel.

Vous pouvez choisir de les enregistrer sous forme de fichier XD et espérer que le développeur a déjà installé le logiciel sur son système ou exporter chaque planche graphique sous forme de fichier PNG individuel, ce qui peut être un peu gênant.

Aussi sur Tech de guidage

Les 3 meilleurs outils de conception pour la création de maquettes et de structures filaires

Heureusement, il existe un plugin tiers pratique qui vous permet d'exporter les planches sous forme de fichiers HTML. C'est ce dont je vais parler. Mais avant d'y arriver, il y a quelque chose que vous devez savoir.

Remarque: le fichier HTML généré à l'aide de cette méthode ne doit en aucun cas être traité comme une base pour une page Web complète. Cette méthode n’est qu’un moyen de partager facilement vos conceptions avec un développeur et non un processus de développement de site Web fonctionnel.

Exporter des fichiers Adobe XD au format HTML à l'aide de plug-ins

Maintenant que nous avons résolu le problème, il suffit de suivre ces étapes simples pour télécharger le plug-in requis, puis exporter les fichiers Adobe XD au format HTML:

Étape 1: Cliquez sur le bouton de menu hamburger dans le coin supérieur gauche du logiciel.

Étape 2: Faites défiler l'écran jusqu'en bas, puis cliquez sur l'option Plug-ins. Cela ouvrira un nouveau panneau Plugins à la droite du menu principal.

Étape 3: Sélectionnez l’option Discover Plugins dans le panneau Plugins.

Étape 4: Dans la page suivante, recherchez HTML, puis cliquez sur le bouton Installer en regard du plug-in d'exportation Web.

Une fois que vous avez installé le plug-in requis, ouvrez le projet que vous souhaitez exporter au format HTML, puis poursuivez avec les étapes suivantes. Pour cet article, je vais utiliser un tableau gratuit Adobe XD que j'ai trouvé en ligne.

Étape 5: Sélectionnez le plan de travail que vous souhaitez exporter en cliquant dessus.

Étape 6: Maintenant, cliquez sur le bouton de menu, accédez au panneau Plug-ins, puis choisissez l'option Exporter Artboard dans les nouveaux paramètres du plug-in d'exportation Web.

Dans la même fenêtre, vous pouvez également choisir d'exporter plusieurs planches ou la dernière planche que vous avez modifiée.

Étape 7: Dans la fenêtre contextuelle Exporter Artboard, attribuez un nom au fichier, puis sélectionnez le dossier dans lequel vous souhaitez enregistrer le fichier en cliquant sur la petite icône du dossier en regard de l'option Dossier d'exportation.

Étape 8: Maintenant, si vous souhaitez ajouter un script externe, une feuille de style ou des polices de remplacement au fichier exporté, vous pouvez les ajouter dans la même fenêtre.

Étape 9: Ensuite, vous pouvez choisir les dimensions du fichier HTML de sortie en saisissant les valeurs dans l'espace vide en regard de l'option Taille.

Étape 10: Pour vous assurer que le projet est correctement mis à l'échelle, vous pouvez également sélectionner divers paramètres de mise à l'échelle dans la même fenêtre en cochant la case en regard de chaque option.

Étape 11: De plus, vous pouvez choisir des paramètres supplémentaires tels que la navigation au clavier, l'actualisation automatique, etc. en cochant les cases en regard des options.

Étape 12: Une fois que vous avez finalisé tous les paramètres, cliquez simplement sur le bouton bleu Exporter et vous avez terminé. Votre planche graphique apparaîtra sous forme de fichier HTML dans le dossier de destination que vous avez précédemment sélectionné.

À partir de la même fenêtre, vous pourrez également copier le CSS et le balisage de votre planche graphique si vous souhaitez également partager ces informations avec votre développeur.

Encore une fois, notez que le code HTML exporté ne peut en aucun cas être utilisé pour développer un site Web entièrement fonctionnel. À l'heure actuelle, vous n'avez aucun moyen de publier directement un projet Adobe XD sur le Web et, selon plusieurs discussions tenues sur les forums Adobe, il n'y en aura pas de si tôt.

Adobe XD est simplement un outil de prototypage qui vous permet de créer une conception initiale sans code. Une fois la conception prête, vous pouvez utiliser une plateforme telle que Dreamweaver pour convertir votre conception en site Web. Mais pour cela, vous aurez besoin d’une expérience préalable en développement Web ou d’embaucher quelqu'un qui le fera.

Aussi sur Tech de guidage

#conception

Cliquez ici pour voir notre page d'articles de design

Exportez votre fichier Adobe XD au format HTML

Alors, maintenant que vous savez exporter votre fichier Adobe XD au format HTML, je suis sûr que vous pourrez facilement partager vos planches d’art avec un développeur ou un client. Et vous n'aurez pas à vous soucier de problèmes de compatibilité. Installez le plugin immédiatement et commencez à exporter vos planches facilement.

Prochaine étape: Consultez l’article suivant pour quelques sites Web interactifs gratuits sur lesquels vous pouvez apprendre à coder et à écrire votre propre site Web HTML.