{"id":124716,"date":"2021-06-08T22:20:31","date_gmt":"2021-06-08T20:20:31","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/justinminds-integration-with-figma\/"},"modified":"2025-02-03T16:44:36","modified_gmt":"2025-02-03T15:44:36","slug":"justinminds-integration-with-figma","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/justinminds-integration-figma","title":{"rendered":"Int\u00e9gration de Justinmind avec Figma"},"content":{"rendered":"\n

Justinmind s’int\u00e8gre parfaitement \u00e0 la plupart des outils de design vectoriel et permet une transition transparente d’un outil \u00e0 l’autre. Notre int\u00e9gration Figma est une fonctionnalit\u00e9 puissante qui vous permet d’exporter l’ensemble de votre projet Figma ou seulement certains cadres de design vers Justinmind. <\/span><\/p>\n

<\/a>Comment utiliser le plugin Figma<\/h2>\n

Pour commencer \u00e0 utiliser le plugin Figma pour Justinmind<\/span>:<\/p>\n

    \n
  1. Recherchez et ouvrez le plugin Figma to Justinmind dans votre navigateur web. \"T\u00e9l\u00e9chargez<\/span><\/li>\n
  2. Dans Figma, recherchez le plugin Justinmind dans vos ressources Plugins. \"s\u00e9lectionnez Notez que vous aurez besoin d’un compte Figma fonctionnel et de Justinmind t\u00e9l\u00e9charg\u00e9 sur votre ordinateur pour utiliser cette int\u00e9gration.<\/span><\/li>\n
  3. S\u00e9lectionnez et lancez le plugin Figma to Justinmind. La bo\u00eete de dialogue suivante appara\u00eet :\"\"S\u00e9lectionnez les cadres et les sections que vous souhaitez exporter, ou cochez \u00ab\u00a0Select all\u00a0\u00bb pour les exporter tous (chaque cadre Figma sera export\u00e9 en tant qu’\u00e9cran s\u00e9par\u00e9). <\/span><\/li>\n
  4. Une fois votre s\u00e9lection effectu\u00e9e, cliquez sur \u00ab\u00a0Exporter\u00a0\u00bb pour exporter votre\/vos cadre(s) vers Justinmind.<\/br> La bo\u00eete de dialogue suivante appara\u00eet, vous informant que vos cadres sont en cours d’exportation :
    \"Dialogue<\/span><\/li>\n
  5. Une fois l’exportation termin\u00e9e, cliquez sur \u00ab\u00a0Enregistrer\u00a0\u00bb pour sauvegarder votre nouveau fichier Justinmind sur votre bureau.\"Enregistrer Choisissez un emplacement dans vos dossiers pour enregistrer le(s) cadre(s) export\u00e9(s). Le fichier sera enregistr\u00e9 sous la forme d’un fichier \u00ab\u00a0.vp\u00a0\u00bb de Justinmind. <\/span><\/li>\n
  6. Localisez votre fichier .vp et double-cliquez dessus pour l’ouvrir dans Justinmind.<\/span><\/li>\n<\/ol>\n

    <\/a>Copier et coller le code SVG<\/h2>\n

    Vous pouvez \u00e9galement transf\u00e9rer n’importe quel \u00e9l\u00e9ment, groupe d’\u00e9l\u00e9ments ou artboards de Figma \u00e0 Justinmind. Il vous suffit de faire la s\u00e9lection dans Figma, puis de cliquer avec le bouton droit de la souris et de s\u00e9lectionner \u00ab\u00a0Copier le code SVG\u00a0\u00bb. Ouvrez ensuite Justinmind et s\u00e9lectionnez l’option du menu principal \u00ab\u00a0\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 Figma. Vous pouvez ensuite s\u00e9lectionner chaque \u00e9l\u00e9ment vectoriel et le modifier comme vous le souhaitez. <\/p>\n

    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 Figma 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 Figma et collez. La structure des couches de l’\u00e9l\u00e9ment vectoriel cr\u00e9\u00e9 dans Justinmind est conserv\u00e9e dans Figma. <\/p>\n

    Vous pouvez utiliser les fonctions Copier et Coller autant de fois que vous le souhaitez.<\/p>\n

    <\/a>Ajouter des interactions aux designs Figma<\/h2>\n

    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 de Figma \u00e0 Justinmind \u00e0 l’aide de la fonction \u00ab\u00a0Copier le code SVG\u00a0\u00bb, vous pouvez imm\u00e9diatement s\u00e9lectionner n’importe quel calque et y ajouter des \u00e9v\u00e9nements.<\/a> <\/p>\n

    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 d’abord \u00ab\u00a0Chemin – Transformer en 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 Figma interactifs<\/h2>\n

    Une fa\u00e7on simple de profiter de l’int\u00e9gration entre Justinmind et Figma est de l’utiliser pour ajouter des interactions \u00e0 vos designs de formulaires de saisie existants et de les pr\u00e9parer pour les tests utilisateurs. Pour transf\u00e9rer votre formulaire de saisie de Figma, utilisez l’option \u00ab\u00a0Copier le code SVG\u00a0\u00bb, puis collez-le dans Justinmind, faites un clic droit sur un champ de saisie et s\u00e9lectionnez l’option \u00ab\u00a0Trajectoire – Transformer en – Champ de texte de saisie\u00a0\u00bb. Lancez la simulation et voyez comment ce design fonctionne d\u00e9sormais comme un v\u00e9ritable champ de saisie interactif, tout en conservant son aspect et sa convivialit\u00e9 d’origine. Vous pouvez transformer n’importe quel \u00e9l\u00e9ment vectoriel en n’importe quel champ de saisie pr\u00e9d\u00e9fini dans Justinmind. <\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Justinmind s’int\u00e8gre parfaitement \u00e0 la plupart des outils de design vectoriel et permet une transition transparente d’un outil \u00e0 l’autre. Notre int\u00e9gration Figma est une fonctionnalit\u00e9…<\/p>\n","protected":false},"author":5,"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-124716","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\/124716"}],"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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124716"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124716\/revisions"}],"predecessor-version":[{"id":126169,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124716\/revisions\/126169"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}