Pour transf\u00e9rer un \u00e9l\u00e9ment, un groupe d’\u00e9l\u00e9ments ou une planche \u00e0 dessin d’Adobe XD vers Justinmind, il suffit de les s\u00e9lectionner dans Adobe XD et de cliquer avec le bouton droit de la souris sur l’option \u00ab\u00a0Copier le code SVG\u00a0\u00bb. Ouvrez ensuite Justinmind et s\u00e9lectionnez l’option du menu principal \u00a0\u00bb \u00c9dition – Coller \u00a0\u00bb pour ramener tous les \u00e9l\u00e9ments vectoriels avec la m\u00eame structure et les m\u00eames noms de calques que dans sketch. Vous pouvez ensuite s\u00e9lectionner chaque \u00e9l\u00e9ment vectoriel et le modifier comme vous le souhaitez. De la m\u00eame mani\u00e8re, si vous avez un \u00e9l\u00e9ment vectoriel dans Justinmind cr\u00e9\u00e9 avec l’outil \u00ab\u00a0Stylo\u00a0\u00bb, vous pouvez le transf\u00e9rer dans Adobe XD pour l’\u00e9diter. Faites un clic droit sur l’\u00e9l\u00e9ment vectoriel dans Justinmind et s\u00e9lectionnez \u00ab\u00a0Copier le code SVG\u00a0\u00bb, puis ouvrez Adobe XD et collez. La structure des couches de l’\u00e9l\u00e9ment vectoriel cr\u00e9\u00e9 dans Justinmind est conserv\u00e9e dans Sketch. Vous pouvez faire des allers-retours en utilisant Copier et Coller autant de fois que vous le souhaitez. <\/p>\n
<\/a>Configurer votre plugin Justinmind pour Adobe XD<\/h2>\nUne autre fa\u00e7on d’int\u00e9grer des designs Adobe XD dans Justinmind est d’utiliser le plugin Justinmind pour XD :<\/p>\n
\n- Ouvrez Adobe XD, allez dans le menu principal jusqu’\u00e0 Plugins, puis s\u00e9lectionnez \u00ab\u00a0Parcourir les plugins\u00a0\u00bb.<\/li>\n
- Dans la fen\u00eatre qui s’affiche, allez dans \u00ab\u00a0All Plugins\u00a0\u00bb -> \u00ab\u00a0Search all plugins\u00a0\u00bb, recherchez \u00ab\u00a0Justinmind\u00a0\u00bb et installez le plugin Justinmind pour XD.
![\"XD](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XdPlugin.png\")
<\/li>\n<\/ol>\nUne fois le plugin install\u00e9, ouvrez le fichier que vous souhaitez exporter. Ensuite, naviguez dans le menu Plugins et s\u00e9lectionnez \u00ab\u00a0XD to Justinmind\u00a0\u00bb. Vous verrez une bo\u00eete de dialogue dans laquelle vous pourrez sp\u00e9cifier le nom et la destination de l’exportation. Le plugin g\u00e9n\u00e8re ensuite un fichier .vp compatible avec Justinmind. <\/p>\n
![\"Dialogue](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/ExportDialog.png\")
\nLe fichier .vp g\u00e9n\u00e9r\u00e9 convertira toutes les couches de votre fichier Adobe XD en \u00e9l\u00e9ments et composants individuels dans Justinmind. Tout le texte de votre design sera conserv\u00e9 en tant que texte modifiable, et les rectangles et ellipses resteront des formes dans votre prototype Justinmind. Tous les autres \u00e9l\u00e9ments seront convertis en images .svg.<\/p>\n
<\/a>Comment travailler avec votre fichier Adobe XD dans Justinmind ?<\/h2>\nOuvrez le fichier .vp dans Justinmind et commencez \u00e0 travailler. Vous verrez tous les calques de votre fichier list\u00e9s dans la palette Calques<\/span> et sur le canevas. Cliquez sur un \u00e9l\u00e9ment et consultez la palette Propri\u00e9t\u00e9s pour voir les diff\u00e9rentes fa\u00e7ons de personnaliser votre design.<\/p>\n![\"Fichier](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XDinJustinmind.png\")
\nVous pouvez maintenant commencer \u00e0 ajouter des fonctionnalit\u00e9s \u00e0 votre prototype, comme des liens vers d’autres \u00e9crans. Cliquez ici<\/a> pour en savoir plus sur la mani\u00e8re de d\u00e9marrer avec votre nouveau prototype Justinmind. <\/p>\nRemarque :<\/strong> le plugin g\u00e9n\u00e8re un prototype d’appareil Web. Si vous souhaitez travailler avec un autre type d’appareil, vous devrez le modifier manuellement dans Justinmind. Vous pouvez changer le type d’appareil en s\u00e9lectionnant l’\u00e9cran de base dans la palette Calques<\/span>, puis dans la palette Propri\u00e9t\u00e9s, sous G\u00e9n\u00e9ral, choisissez un autre appareil dans la liste d\u00e9roulante. <\/div>\n<\/a>Ajouter des interactions aux designs Adobe XD<\/h2>\nJustinmind est sp\u00e9cialement puissant pour rendre les designs interactifs et simuler des applications web et mobiles aussi r\u00e9alistes que l’utilisateur le souhaite. Une fois que vous avez transf\u00e9r\u00e9 un design d’Adobe XD \u00e0 Justinmind, vous pouvez imm\u00e9diatement s\u00e9lectionner n’importe quel calque et y ajouter des \u00e9v\u00e9nements.<\/a> Si vous souhaitez simuler des \u00e9l\u00e9ments r\u00e9actifs, c’est-\u00e0-dire faire en sorte que l’un des \u00e9l\u00e9ments vectoriels s’adapte \u00e0 la largeur de l’\u00e9cran entier, par exemple, vous devrez faire un clic droit sur l’\u00e9l\u00e9ment vectoriel et s\u00e9lectionner \u00ab\u00a0Path – Turn into – image\u00a0\u00bb. Ensuite, dans la palette Propri\u00e9t\u00e9s, vous pourrez d\u00e9finir les propri\u00e9t\u00e9s de taille en pourcentage. <\/p>\n<\/a>Rendre les formulaires de saisie Adobe XD interactifs<\/h2>\nUne fa\u00e7on simple de tirer parti de l’int\u00e9gration entre Justinmind et Adobe XD est de rendre interactifs des formulaires de saisie d\u00e9j\u00e0 con\u00e7us \u00e0 des fins de test. Transf\u00e9rez votre formulaire de saisie con\u00e7u dans Adobe XD \u00e0 l’aide de la fonction \u00ab\u00a0Copier le code SVG\u00a0\u00bb. Collez-le ensuite dans Justinmind et faites un clic droit sur le design d’un champ de saisie. S\u00e9lectionnez l’option ‘Path – Turn into – Input Text field’. Lancez la simulation et voyez comment ce design fonctionne d\u00e9sormais comme un v\u00e9ritable champ de saisie tout en conservant son aspect et sa convivialit\u00e9. Vous pouvez transformer n’importe quel \u00e9l\u00e9ment vectoriel en n’importe quel champ de saisie pr\u00e9d\u00e9fini dans Justinmind. <\/p>\n","protected":false},"excerpt":{"rendered":"
Il existe deux fa\u00e7ons d’importer votre travail d’Adobe XD vers Justinmind. Copier et coller le code SVG Pour transf\u00e9rer un \u00e9l\u00e9ment, un groupe d’\u00e9l\u00e9ments ou une…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8436,8457],"tags":[],"class_list":["post-124717","post","type-post","status-publish","format-standard","hentry","category-guide-de-lutilisateur","category-integrations"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124717"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions"}],"predecessor-version":[{"id":125127,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions\/125127"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/li>\n<\/ol>\nUne fois le plugin install\u00e9, ouvrez le fichier que vous souhaitez exporter. Ensuite, naviguez dans le menu Plugins et s\u00e9lectionnez \u00ab\u00a0XD to Justinmind\u00a0\u00bb. Vous verrez une bo\u00eete de dialogue dans laquelle vous pourrez sp\u00e9cifier le nom et la destination de l’exportation. Le plugin g\u00e9n\u00e8re ensuite un fichier .vp compatible avec Justinmind. <\/p>\n
\nLe fichier .vp g\u00e9n\u00e9r\u00e9 convertira toutes les couches de votre fichier Adobe XD en \u00e9l\u00e9ments et composants individuels dans Justinmind. Tout le texte de votre design sera conserv\u00e9 en tant que texte modifiable, et les rectangles et ellipses resteront des formes dans votre prototype Justinmind. Tous les autres \u00e9l\u00e9ments seront convertis en images .svg.<\/p>\n
<\/a>Comment travailler avec votre fichier Adobe XD dans Justinmind ?<\/h2>\nOuvrez le fichier .vp dans Justinmind et commencez \u00e0 travailler. Vous verrez tous les calques de votre fichier list\u00e9s dans la palette Calques<\/span> et sur le canevas. Cliquez sur un \u00e9l\u00e9ment et consultez la palette Propri\u00e9t\u00e9s pour voir les diff\u00e9rentes fa\u00e7ons de personnaliser votre design.<\/p>\n
\nVous pouvez maintenant commencer \u00e0 ajouter des fonctionnalit\u00e9s \u00e0 votre prototype, comme des liens vers d’autres \u00e9crans. Cliquez ici<\/a> pour en savoir plus sur la mani\u00e8re de d\u00e9marrer avec votre nouveau prototype Justinmind. <\/p>\nRemarque :<\/strong> le plugin g\u00e9n\u00e8re un prototype d’appareil Web. Si vous souhaitez travailler avec un autre type d’appareil, vous devrez le modifier manuellement dans Justinmind. Vous pouvez changer le type d’appareil en s\u00e9lectionnant l’\u00e9cran de base dans la palette Calques<\/span>, puis dans la palette Propri\u00e9t\u00e9s, sous G\u00e9n\u00e9ral, choisissez un autre appareil dans la liste d\u00e9roulante. <\/div>\n<\/a>Ajouter des interactions aux designs Adobe XD<\/h2>\nJustinmind est sp\u00e9cialement puissant pour rendre les designs interactifs et simuler des applications web et mobiles aussi r\u00e9alistes que l’utilisateur le souhaite. Une fois que vous avez transf\u00e9r\u00e9 un design d’Adobe XD \u00e0 Justinmind, vous pouvez imm\u00e9diatement s\u00e9lectionner n’importe quel calque et y ajouter des \u00e9v\u00e9nements.<\/a> Si vous souhaitez simuler des \u00e9l\u00e9ments r\u00e9actifs, c’est-\u00e0-dire faire en sorte que l’un des \u00e9l\u00e9ments vectoriels s’adapte \u00e0 la largeur de l’\u00e9cran entier, par exemple, vous devrez faire un clic droit sur l’\u00e9l\u00e9ment vectoriel et s\u00e9lectionner \u00ab\u00a0Path – Turn into – image\u00a0\u00bb. Ensuite, dans la palette Propri\u00e9t\u00e9s, vous pourrez d\u00e9finir les propri\u00e9t\u00e9s de taille en pourcentage. <\/p>\n<\/a>Rendre les formulaires de saisie Adobe XD interactifs<\/h2>\nUne fa\u00e7on simple de tirer parti de l’int\u00e9gration entre Justinmind et Adobe XD est de rendre interactifs des formulaires de saisie d\u00e9j\u00e0 con\u00e7us \u00e0 des fins de test. Transf\u00e9rez votre formulaire de saisie con\u00e7u dans Adobe XD \u00e0 l’aide de la fonction \u00ab\u00a0Copier le code SVG\u00a0\u00bb. Collez-le ensuite dans Justinmind et faites un clic droit sur le design d’un champ de saisie. S\u00e9lectionnez l’option ‘Path – Turn into – Input Text field’. Lancez la simulation et voyez comment ce design fonctionne d\u00e9sormais comme un v\u00e9ritable champ de saisie tout en conservant son aspect et sa convivialit\u00e9. Vous pouvez transformer n’importe quel \u00e9l\u00e9ment vectoriel en n’importe quel champ de saisie pr\u00e9d\u00e9fini dans Justinmind. <\/p>\n","protected":false},"excerpt":{"rendered":"
Il existe deux fa\u00e7ons d’importer votre travail d’Adobe XD vers Justinmind. Copier et coller le code SVG Pour transf\u00e9rer un \u00e9l\u00e9ment, un groupe d’\u00e9l\u00e9ments ou une…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8436,8457],"tags":[],"class_list":["post-124717","post","type-post","status-publish","format-standard","hentry","category-guide-de-lutilisateur","category-integrations"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124717"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions"}],"predecessor-version":[{"id":125127,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions\/125127"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Justinmind est sp\u00e9cialement puissant pour rendre les designs interactifs et simuler des applications web et mobiles aussi r\u00e9alistes que l’utilisateur le souhaite. Une fois que vous avez transf\u00e9r\u00e9 un design d’Adobe XD \u00e0 Justinmind, vous pouvez imm\u00e9diatement s\u00e9lectionner n’importe quel calque et y ajouter des \u00e9v\u00e9nements.<\/a> Si vous souhaitez simuler des \u00e9l\u00e9ments r\u00e9actifs, c’est-\u00e0-dire faire en sorte que l’un des \u00e9l\u00e9ments vectoriels s’adapte \u00e0 la largeur de l’\u00e9cran entier, par exemple, vous devrez faire un clic droit sur l’\u00e9l\u00e9ment vectoriel et s\u00e9lectionner \u00ab\u00a0Path – Turn into – image\u00a0\u00bb. Ensuite, dans la palette Propri\u00e9t\u00e9s, vous pourrez d\u00e9finir les propri\u00e9t\u00e9s de taille en pourcentage. <\/p>\n Une fa\u00e7on simple de tirer parti de l’int\u00e9gration entre Justinmind et Adobe XD est de rendre interactifs des formulaires de saisie d\u00e9j\u00e0 con\u00e7us \u00e0 des fins de test. Transf\u00e9rez votre formulaire de saisie con\u00e7u dans Adobe XD \u00e0 l’aide de la fonction \u00ab\u00a0Copier le code SVG\u00a0\u00bb. Collez-le ensuite dans Justinmind et faites un clic droit sur le design d’un champ de saisie. S\u00e9lectionnez l’option ‘Path – Turn into – Input Text field’. Lancez la simulation et voyez comment ce design fonctionne d\u00e9sormais comme un v\u00e9ritable champ de saisie tout en conservant son aspect et sa convivialit\u00e9. Vous pouvez transformer n’importe quel \u00e9l\u00e9ment vectoriel en n’importe quel champ de saisie pr\u00e9d\u00e9fini dans Justinmind. <\/p>\n","protected":false},"excerpt":{"rendered":" Il existe deux fa\u00e7ons d’importer votre travail d’Adobe XD vers Justinmind. Copier et coller le code SVG Pour transf\u00e9rer un \u00e9l\u00e9ment, un groupe d’\u00e9l\u00e9ments ou une…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8436,8457],"tags":[],"class_list":["post-124717","post","type-post","status-publish","format-standard","hentry","category-guide-de-lutilisateur","category-integrations"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124717"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions"}],"predecessor-version":[{"id":125127,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124717\/revisions\/125127"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nVous pouvez maintenant commencer \u00e0 ajouter des fonctionnalit\u00e9s \u00e0 votre prototype, comme des liens vers d’autres \u00e9crans. Cliquez ici<\/a> pour en savoir plus sur la mani\u00e8re de d\u00e9marrer avec votre nouveau prototype Justinmind. <\/p>\n<\/a>Ajouter des interactions aux designs Adobe XD<\/h2>\n
<\/a>Rendre les formulaires de saisie Adobe XD interactifs<\/h2>\n