{"id":124705,"date":"2018-03-15T09:36:33","date_gmt":"2018-03-15T08:36:33","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/sketch-and-justinmind-integration\/"},"modified":"2025-02-03T16:43:00","modified_gmt":"2025-02-03T15:43:00","slug":"sketch-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/sketch-justinmind-integration","title":{"rendered":"Int\u00e9gration de Justinmind avec Sketch"},"content":{"rendered":"<p>Justinmind est int\u00e9gr\u00e9 \u00e0 l&rsquo;\u00e9diteur de graphiques vectoriels et \u00e0 l&rsquo;outil de design Sketch. Il existe deux fa\u00e7ons de transf\u00e9rer des designs de Sketch \u00e0 Justinmind : l&rsquo;une consiste \u00e0 utiliser l&rsquo;option \u00ab\u00a0Copier en SVG\u00a0\u00bb et l&rsquo;autre \u00e0 utiliser le plugin Justinmind pour Sketch. <\/p>\n<h2><a id=\"copy-and-paste-svg-sketch\"><\/a>Copier et coller le code SVG<\/h2>\n<p>Pour transf\u00e9rer un \u00e9l\u00e9ment, un groupe d&rsquo;\u00e9l\u00e9ments ou une planche \u00e0 dessin de Sketch \u00e0 Justinmind, il suffit de les s\u00e9lectionner dans Sketch et de cliquer avec le bouton droit de la souris sur l&rsquo;option \u00a0\u00bb Copier le code SVG \u00ab\u00a0. Ouvrez ensuite Justinmind et s\u00e9lectionnez l&rsquo;option du menu principal \u00a0\u00bb \u00c9dition &#8211; 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 cr\u00e9\u00e9 un \u00e9l\u00e9ment vectoriel dans Justinmind \u00e0 l&rsquo;aide de l&rsquo;outil \u00ab\u00a0Stylo\u00a0\u00bb, vous pouvez le transf\u00e9rer dans Sketch pour l&rsquo;\u00e9diter. Faites un clic droit sur l&rsquo;\u00e9l\u00e9ment vectoriel dans Justinmind et s\u00e9lectionnez \u00ab\u00a0Copier le code SVG\u00a0\u00bb, puis ouvrez Sketch et collez. La structure des couches de l&rsquo;\u00e9l\u00e9ment vectoriel cr\u00e9\u00e9 dans Justinmind est conserv\u00e9e dans Sketch.  <\/p>\n<p>Vous pouvez utiliser les fonctions Copier et Coller autant de fois que vous le souhaitez.<\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-sketch\"><\/a>Configurer votre plugin Justinmind pour Sketch<\/h2>\n<p>Vous pouvez \u00e9galement utiliser le plugin Justinmind pour Sketch. Pour commencer \u00e0 utiliser le plugin Justinmind pour Sketch : <\/p>\n<ol>\n<li><a href=\"https:\/\/download.justinmind.com\/prototyper-plugins\/justinmind_sketch_plugin.zip\" target=\"_blank\" rel=\"noopener noreferrer\">T\u00e9l\u00e9chargez le plugin<\/a><\/li>\n<li>Une fois t\u00e9l\u00e9charg\u00e9, d\u00e9compressez et double-cliquez sur le fichier \u00ab\u00a0.sketchplugin\u00a0\u00bb pour l&rsquo;installer. Notez que vous aurez besoin d&rsquo;un compte Sketch fonctionnel et de Sketch t\u00e9l\u00e9charg\u00e9 sur votre ordinateur pour utiliser cette int\u00e9gration.<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" width=\"100%\" height=\"100%\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" alt=\"Installation du plug-in sketch\">Installation du plug-in sketch<\/source><\/video><\/li>\n<li>Pour commencer \u00e0 utiliser le plugin Justinmind dans Sketch, ouvrez le programme Sketch et acc\u00e9dez \u00e0 l&rsquo;option de menu Plugins dans la barre d&rsquo;outils principale. S\u00e9lectionnez l&rsquo;option \u00ab\u00a0Justinmind\u00a0\u00bb et choisissez parmi les options suivantes :\n<ul>\n<li><strong>Exporter les calques des planches d&rsquo;art<\/strong>: s\u00e9lectionnez cette option pour travailler sur des planches d&rsquo;art avec des calques s\u00e9par\u00e9s (chaque planche d&rsquo;art du sketch sera export\u00e9e en tant qu&rsquo;\u00e9cran s\u00e9par\u00e9, et chaque calque sera \u00e9galement export\u00e9 individuellement). Vous pouvez choisir d&rsquo;exporter tous les tableaux ou de les s\u00e9lectionner individuellement. <\/li>\n<li><strong>Exporter les artboards en tant qu&rsquo;images<\/strong> &#8211; s\u00e9lectionnez cette option pour travailler sur vos artboards dans Justinmind en tant que couche unique. Cette option fonctionne mieux lorsque vous avez termin\u00e9 l&rsquo;\u00e9tape de conception visuelle et que vous souhaitez uniquement ajouter des fonctionnalit\u00e9s \u00e0 votre design dans Justinmind <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13107\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards.png\" alt=\"exporter des artboards\" width=\"755\" height=\"425\"><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>Exporter les calques d&rsquo;artboards<\/h4>\n<p>Si vous souhaitez exporter des planches d&rsquo;art sous forme de calques :<\/p>\n<ol>\n<li>Cliquez sur l&rsquo;option \u00ab\u00a0Exporter les calques des artboards\u00a0\u00bb :<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers.png\" alt=\"exporter les calques des artboards\" width=\"755\" height=\"425\"><\/li>\n<li>La bo\u00eete de dialogue suivante appara\u00eet :<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers-dialog.png\" alt=\"export artboards layers dialog\" width=\"755\" height=\"425\">\n<ol class=\"image-bullet\">\n<li>S\u00e9lectionnez un artboard individuel \u00e0 exporter<\/li>\n<li>Cochez \u00ab\u00a0Exporter tout\u00a0\u00bb pour exporter tous les artboards.<\/li>\n<li>Choisissez un prototype d&rsquo;appareil vers lequel exporter vos artboards. Les options portrait et paysage sont \u00e9galement disponibles pour les appareils mobiles et les tablettes. <\/li>\n<\/ol>\n<\/li>\n<li>Une fois votre s\u00e9lection effectu\u00e9e, cliquez sur \u00ab\u00a0Exporter\u00a0\u00bb pour exporter votre ou vos artboards vers Justinmind.<\/li>\n<li>Choisissez un emplacement dans vos dossiers pour enregistrer vos planches d&rsquo;art export\u00e9es. Le type de fichier sera \u00ab\u00a0.vp\u00a0\u00bb &#8211; un fichier Justinmind. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13110\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-folder.png\" alt=\"exporter le dossier artboards\" width=\"755\" height=\"425\"><\/li>\n<li>La bo\u00eete de dialogue suivante s&rsquo;affiche, vous informant que votre ou vos planches d&rsquo;art sont en cours d&rsquo;exportation :<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13111\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-being-exported-dialog.png\" alt=\"dialogue d'exportation des artboards\" width=\"755\" height=\"425\"><\/li>\n<li>Enfin, la bo\u00eete de dialogue suivante s&rsquo;affiche lorsque l&rsquo;exportation de votre (vos) tableau(x) d&rsquo;art a r\u00e9ussi :<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13112\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-exported-successfully.png\" alt=\"artboards export\u00e9s avec succ\u00e8s\" width=\"755\" height=\"425\"><\/li>\n<li>Localisez votre fichier .vp et double-cliquez dessus pour l&rsquo;ouvrir dans Justinmind.<\/li>\n<\/ol>\n<h2><a id=\"adding-interaction-sketch\"><\/a>Ajouter des interactions aux designs de sketchs<\/h2>\n<p>Justinmind est sp\u00e9cialement puissant pour rendre les designs interactifs et simuler des applications web et mobiles aussi r\u00e9alistes que l&rsquo;utilisateur le souhaite. Une fois que vous avez transf\u00e9r\u00e9 un design de Sketch \u00e0 Justinmind, vous pouvez imm\u00e9diatement s\u00e9lectionner n&rsquo;importe quel calque et <a href=\"\">y ajouter des \u00e9v\u00e9nements.<\/a> Si vous souhaitez simuler des \u00e9l\u00e9ments r\u00e9actifs, c&rsquo;est-\u00e0-dire faire en sorte que l&rsquo;un des \u00e9l\u00e9ments vectoriels s&rsquo;adapte \u00e0 la largeur de l&rsquo;\u00e9cran entier, par exemple, vous devrez faire un clic droit sur l&rsquo;\u00e9l\u00e9ment vectoriel et s\u00e9lectionner \u00ab\u00a0Path &#8211; Turn into &#8211; image\u00a0\u00bb. Ensuite, dans la palette Propri\u00e9t\u00e9s, vous pourrez d\u00e9finir les propri\u00e9t\u00e9s de taille en pourcentage. <\/p>\n<h2><a id=\"interactive-forms-sketch\"><\/a>Rendre les formulaires de saisie de sketchs interactifs<\/h2>\n<p>Une fa\u00e7on simple de tirer parti de l&rsquo;int\u00e9gration entre Justinmind et Sketch 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 Sketch \u00e0 l&rsquo;aide de la fonction \u00ab\u00a0Copier le code SVG\u00a0\u00bb ou du plugin Justinmind pour Sketch. Collez-le ensuite dans Justinmind et faites un clic droit sur le design d&rsquo;un champ de saisie. S\u00e9lectionnez l&rsquo;option \u00ab\u00a0Path &#8211; Turn into &#8211; Input Text field\u00a0\u00bb. 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&rsquo;importe quel \u00e9l\u00e9ment vectoriel en n&rsquo;importe quel champ de saisie pr\u00e9d\u00e9fini dans Justinmind.     <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Justinmind est int\u00e9gr\u00e9 \u00e0 l&rsquo;\u00e9diteur de graphiques vectoriels et \u00e0 l&rsquo;outil de design Sketch. Il existe deux fa\u00e7ons de transf\u00e9rer des designs de Sketch \u00e0 Justinmind&#8230;<\/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-124705","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\/124705"}],"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=124705"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124705\/revisions"}],"predecessor-version":[{"id":126115,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124705\/revisions\/126115"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}