Comment exporter des dessins Adobe XD au format HTML

Adobe XD est un outil de conception incroyable qui vous permet de créer facilement Grands sites Web Sans aucune expérience préalable en développement web. Vous ne pouvez importer des fichiers PSD que de votre propre conception Photoshop Un site Web accrocheur.

Ces conceptions aident beaucoup les développeurs à comprendre comment vous voulez que leur site Web apparaisse et facilitent un peu le développement de leur part. Toutefois, il existe un nombre limité de moyens d’exporter des dessins à partir du programme.

Vous pouvez choisir de l'enregistrer en tant que fichier XD et j'espère que le développeur a déjà installé le programme sur son système ou d'exporter chaque planche à dessin en tant que fichier PNG individuel qui peut être un peu gênant.

Heureusement, il existe un plug-in tiers utile qui vous permet d'exporter vos illustrations sous forme de fichiers HTML. C'est ce dont je vais parler dans cet article. Mais avant d'y arriver, il y a quelque chose que vous devez savoir.

REMARQUE: le fichier HTML créé à l'aide de cette méthode ne doit pas être traité comme une règle 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 le processus de développement d'un site Web fonctionnel.

Exporter des fichiers ADOBE XD au format HTML à l'aide de PLUGINS

Maintenant que nous sommes sortis de cette voie, il suffit de suivre ces étapes simples pour télécharger le plug-in requis, puis l'exporter. Fichiers Adobe XD à HTML:

Lisez aussi: Le Samsung Galaxy Watch n'est pas connecté au téléphone: 4 est un moyen simple de le réparer.

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

Étape 2: Faites défiler tout le chemin et cliquez sur l'option Extensions. 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: Sur la page suivante, recherchez HTML et cliquez sur le bouton Installer en regard du plug-in Exportation Web.

Une fois le plug-in requis installé, ouvrez le projet que vous souhaitez exporter au format HTML, puis poursuivez avec les étapes suivantes. Dans cet article, je vais utiliser une planche à dessin gratuite Adobe XD et la trouver 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, allez au panneau Add-ons et 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 plans de travail ou un autre plan de travail que vous avez modifié.

Étape 7: Dans le menu contextuel Exporter Artboard, attribuez un nom au fichier et sélectionnez le dossier dans lequel vous souhaitez enregistrer le fichier en cliquant sur l'icône du dossier en regard de l'option Exporter le dossier.

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

Lisez aussi: Correction de l'erreur d'accès incorrecte de l'emplacement de la mémoire de Valorant

É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 votre projet change correctement, vous pouvez également sélectionner de nombreux paramètres de mesure 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, la mise à jour automatique, etc. en cochant les cases en regard des options.

Étape 12: Une fois tous les réglages terminés, il suffit de cliquer sur le bouton bleu "Exporter" pour terminer. La palette graphique apparaîtra sous forme de fichier HTML dans le dossier de destination que vous avez précédemment spécifié.

À partir de la même fenêtre, vous pourrez également copier le balisage CSS et du plan de travail 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, il n’ya aucun moyen pour vous de publier votre projet Adobe XD directement sur le Web et, selon de nombreuses discussions sur les forums Adobe, il n’y aura plus personne de si tôt.

Adobe XD est juste un outil prototype qui vous permet de créer une conception initiale sans code. Une fois la conception terminée, vous pouvez utiliser une plate-forme comme Dreamweaver pour convertir votre conception en site Web. Mais par conséquent, vous aurez besoin d’une expérience préalable dans le développement Web ou vous aurez besoin d’engager quelqu'un.

Lisez aussi: Comment désactiver les notifications de Google Chrome

Exportez votre fichier Adobe XD au format HTML

Maintenant que vous savez exporter votre fichier Adobe XD au format HTML, je suis certain que vous pourrez facilement partager vos propres planches d’art avec un développeur ou un client. Vous n'aurez pas à vous soucier de problèmes de compatibilité. Installez le plug-in immédiatement et commencez à exporter vos planches Facilement.