# Éditeur Studio : Exporter vos designs depuis Figma Source: https://support.wix.com/fr/article/%C3%A9diteur-studio-exporter-vos-designs-depuis-figma (updated 2026-05-24) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt Vous utilisez Figma pour concevoir des sections et des éléments ? Le plug-in Wix Studio vous permet de transformer vos designs statiques en un site en ligne responsive, avec un processus simplifié. Vous pouvez importer des cadres Figma complets, des composants et des sections spécifiques, ou utiliser nos wireframe (kits d'interface utilisateur). Une fois dans Studio, vous pouvez améliorer vos designs avec des animations sans code, des CSS personnalisés, une connexion à des solutions commerciales telles que Wix Boutique, et bien plus encore. [Video](https://www.youtube.com/watch?v=Afpd8iJjyuY) > * Nous vous recommandons de garder Figma et l'Éditeur Studio ouverts, dans des onglets de navigateur distincts, car vous aurez besoin des deux pour ce processus. > * Vous êtes au milieu du processus et vous avez besoin d'aide ? Lisez notre [FAQ](https://support.wix.com/fr/article/éditeur-studio-exporter-vos-designs-depuis-figma#faqs) et nos informations [de dépannage](https://support.wix.com/fr/article/éditeur-studio-exporter-vos-designs-depuis-figma#troubleshooting) ci-dessous. --- ## Étape 1 | Se préparer à l'exportation Avant d'essayer d'importer des designs de Figma, il y a quelques éléments que nous vous recommandons de vérifier. Cela permettra d'assurer une transition transparente de Figma à Wix Studio. ## a | Importer des polices personnalisées dans Wix Studio Assurez-vous que toutes les polices que vous utilisez sur Figma sont également disponibles sur votre compte Wix. Il est préférable d' [importer les polices](https://support.wix.com/fr/article/éditeur-studio-utiliser-différentes-polices-de-texte) sur Wix à l'avance – sinon, les polices système remplacent les polices que vous aviez l'intention d'afficher. ![Le panneau Gérer vos polices dans Wix Studio, où vous pouvez importer les polices personnalisées utilisées sur Figma](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/09/265563b0-f43e-4b40-b00b-402cb85e0e17/64eee5d9-c981-4269-b9e7-2261b7979279.png) ## b | Comparer la largeur du cadre à la taille de modification La largeur du cadre Figma doit correspondre à la [taille de modification](https://support.wix.com/fr/article/éditeur-studio-paramétrer-votre-taille-dédition) de la page correspondante sur le site de votre client. En cas de non-concordance, votre design ne sera pas exporté dans le même ratio, ce qui signifie qu'il n'apparaîtra pas dans les bonnes proportions dans Wix Studio. > **Exporter des éléments ?** Vous devez toujours vérifier la largeur du cadre qui les contient pour vous assurer d'un résultat 1:1. ![GIF montrant comment modifier la taille d'édition d'une page dans l'Éditeur Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/09/9ed470d3-2b23-4f46-9099-888d264e23d9/9b45d63c-c629-4295-8ede-2d95ceeaf097.gif) --- ## Étape 2 | Installer le plug-in Si vous ne l'avez pas déjà fait, installez le plug-in Wix Studio à partir du fichier que vous souhaitez exporter. Une fois installé, vous pouvez facilement accéder au plug-in à partir de tous les autres designs de votre compte. Ensuite, ouvrez le panneau du plug-in depuis l'Éditeur Studio. ## a | Installer le plug-in sur Figma 1. Ouvrez le fichier que vous souhaitez exporter dans votre compte Figma. 2. Appuyez sur **Ctrl** + **P** sur votre clavier (**Cmd** + **V** sur Mac). 3. Cliquez sur l'onglet **Plug-ins et widgets** . 4. Recherchez « Wix Studio » et sélectionnez **Figma dans Wix Studio** dans les résultats. 5. Cliquez sur **Exécuter**. 6. Connectez-vous à votre compte Wix sur le plug-in. ## b | Ouvrir l'outil sur le site de votre client 1. Accédez au site de votre client [dans l'Éditeur](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Cliquez sur l'icône **Wix Studio** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/14/2e772e80-6766-4ae9-ae5a-4d1d4ac760b0/acaaf527-2311-4f34-aeea-c3d3bca89b09.png) en haut à gauche. 3. Survolez **Outils**. 4. Cliquez sur **Importer de Figma**. **Suggestion :** Cela ajoute une nouvelle icône ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/09/e401bdb0-0a8a-4c93-ad91-f8a421d3fbb3/269dca2a-43fc-4bed-883e-dfcee54c13df.png) à gauche de l'Éditeur. ![Une capture d'écran du panneau Importer de Figma dans l'Éditeur Studio ayant été ouvert à partir des outils.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/d62eee7f-9aa7-419a-93ea-bedee2656a13/a7652104-6ece-43a8-a153-4f2232dc3337.png) --- ## Étape 3 | Choisir ce que vous souhaitez exporter de Figma Après avoir installé le plug-in, retournez sur le fichier dans votre compte Figma. Le plug-in vous permet de choisir ce que vous souhaitez exporter : un cadre ou vos styles. Nous vous recommandons d'abord d'exporter vos styles (c'est-à-dire typographie et couleurs), ils sont donc déjà configurés dans l'Éditeur Studio au moment où vous commencez à exporter des images. **Quels éléments le plugin reconnaît-il automatiquement ?** Lorsque vous sélectionnez un cadre sur Figma, notre plugin est en mesure d'identifier les éléments suivants : * Page * Section * Empilé * Conteneur * Bouton * Texte * Image * GIF * SVG **Remarque :** Assurez-vous que votre fichier est inférieur à 250 kb. Le plugin ne reconnaît pas automatiquement les menus, les formulaires, les galeries, les vidéos et les éléments de saisie. Une fois que vous aurez importé le cadre dans l'Éditeur Studio, ces éléments spécifiques ne seront pas fonctionnels. Cependant, vous pouvez rapidement les remplacer par les éléments disponibles dans l'éditeur. ### Pour exporter depuis Figma : 1. (S'il n'est pas déjà ouvert) Ouvrez le fichier Figma correspondant. 2. Accéder au plug-in Studio : 1. Cliquez sur l'icône **Figma** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/09/1e293eb1-ddae-47c9-a041-c1baa7916035/0b3fde8f-3398-4378-8123-f7ece6848b93.png) pour ouvrir le menu principal. 2. Survolez **plug-ins** et cliquez sur **Figma vers Wix Studio**. 3. Cliquez sur **Configurer l'exportation**. 4. Cliquez sur **Suivant**. 5. Vérifiez que la taille d'édition dans Wix Studio correspond à la largeur du cadre Figma. Lorsque vous êtes prêt, cliquez sur **Commencer l'exportation**. 6. Choisissez ce que vous souhaitez exporter et suivez les étapes : **Styles** Sélectionnez les cadres qui incluent toutes les couleurs et les polices qui doivent être exportées. Il peut s'agir d'un ou de plusieurs cadres, y compris des cadres de niveau supérieur. Dans le panneau, vous remarquerez que le plug-in reconnaît automatiquement les couleurs et la typographie dans le ou les cadres que vous sélectionnez. Cela inclut tous les éléments de texte et leurs styles, tels que la police, la taille, la couleur et le formatage, ainsi que les couleurs présentes dans le texte, les boutons, les formes et les arrière-plans de la zone sélectionnée. Vérifiez les styles avant d'exporter et une fois satisfait, cliquez sur **Exporter les styles**. Une fois l'exportation terminée, retournez dans l'Éditeur. ![Capture d'écran du plug-in Studio dans Figma, affichant les styles à exporter.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/69c0f1dd-a5ad-4d34-967b-fe5145d5974d/663cdc7f-83c3-445f-b499-066e04bddfe1.png) **Cadre** Cliquez sur le cadre que vous souhaitez exporter. Le plug-in vous montrera un aperçu du cadre et de sa largeur – à ce stade, nous vous recommandons de vérifier à nouveau qu'il correspond à la taille de modification dans l'Éditeur. Lorsque vous êtes prêt, cliquez sur **Exporter le cadre**. Une fois l'exportation terminée, retournez dans l'Éditeur. ![Capture d'écran du plug-in Studio dans Figma, montrant le cadre à exporter.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/3fa52d96-4289-42c1-bd92-fc8bf86316bf/287ea070-d1a4-4319-b8c4-ee798fb728e4.png) --- ## Étape 4 | Terminer l'importation dans l'Éditeur Une fois l'exportation terminée dans Figma, retournez à votre Éditeur et assurez-vous qu'il n'y a pas de polices manquantes ou de non-concordance de taille. Vous travaillez avec un cadre ? Vous pouvez choisir si vous l'importez en tant que conteneur, section, etc. ### Pour terminer l'importation : 1. Accédez au site de votre client [dans l'Éditeur](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. (Si ce n'est pas déjà fait) Cliquez sur l'icône **Importer de Figma** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/06/09/e401bdb0-0a8a-4c93-ad91-f8a421d3fbb3/269dca2a-43fc-4bed-883e-dfcee54c13df.png) à gauche. 3. Selon que vous avez déjà importé des données de Figma dans le compte Wix actuel, actualisez le panneau : * **Première importation :** Cliquez sur **Actualiser**. * **Ont déjà importés :** Cliquez sur l'icône **Actualiser l'importation** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/2f41f45c-a358-403e-985c-bff0ff6a48e8/569e549a-6a8b-4dd9-a58d-b0bf622ffcdc.png). 4. En fonction de ce que vous importez, suivez les étapes ci-dessous : **Styles** 1. Vérifiez les couleurs et les polices que vous êtes sur le point d'importer. 2. (Si des polices sont manquantes) Cliquez sur **Importer les polices** et importez celles qui manquent à votre compte. 3. Cliquez sur **Appliquer les styles au site**. 4. (Facultatif) Retournez sur Figma pour exporter le cadre concerné. ![Le panneau Importer de Figma dans l'Éditeur Studio lors de l'importation de styles, mettant en évidence une erreur de polices manquantes](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/57d536da-eed8-4c3a-ad19-fd5b63e9c401/acc55b0b-5b45-4c01-8257-1c2aeee6604b.png) **Cadre** 1. Examinez l'image que vous allez importer : * Si la taille d'édition ne correspond pas à la largeur du cadre Figma, cliquez sur Faire correspondre la **taille d'édition**. **Suggestion :** Vous pouvez également redimensionner le cadre sur Figma, puis l'exporter à nouveau. Consultez notre section FAQ pour plus d'instructions. * S'il manque des polices, cliquez sur **Importer Polices**. 2. Sélectionnez l'option correspondante à côté de **Ajouter un cadre comme** : **Conteneur**, **Section**, **Page** ou **pile**. 3. Cliquez sur **Ajouter**. 4. Améliorez votre design Figma : * Ajustez la réactivité de votre design à l'aide de l' [outil IA responsive](https://support.wix.com/fr/article/éditeur-de-studio-utiliser-lia-pour-rendre-les-sections-responsive) ou en configurant manuellement le [comportement](https://support.wix.com/fr/article/éditeur-studio-paramétrer-la-taille-de-vos-éléments#choosing-an-elements-responsive-behavior) exact que vous souhaitez. * Ajoutez un mouvement adapté à vos spécifications exactes avec [des animations et des effets sans code](https://support.wix.com/fr/article/éditeur-studio-à-propos-des-animations) . * Connectez nos [solutions professionnelles](https://www.wix.com/studio/business-solut target=) pour le eCommerce, les réservations, les restaurants, les hôtels et plus encore * Connecter des éléments avec le [CMS](https://www.wix.com/studio/cms) pour afficher du contenu dynamique. ![Le panneau Importer de Figma dans l'Éditeur Studio lors de l'importation d'un cadre, mettant en évidence une erreur de polices manquantes](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/02/16/0fa93f82-cf64-423f-846b-0ea736667b19/d28b7308-4843-4d9c-9eca-36be3f0efaa6.png) --- ## FAQs Cliquez sur une question ci-dessous pour en savoir plus sur l'importation de designs à partir de Figma. **Puis-je importer des designs de Figma sur un site existant ?** Oui, vous pouvez importer vos designs Figma sur un site existant ou sur un tout nouveau site. **Puis-je importer plusieurs pages à la fois ?** Non. Pour le moment, cette option n'est pas prise en charge. **Mes designs Figma se connectent-ils automatiquement aux applis Wix (ex. Wix Boutique) ?** Non. Vous devrez installer manuellement la ou les applis Wix correspondantes sur le site de votre client. **Que se passe-t-il lors de l'importation de menus, de formulaires et de boutons ? Fonctionneront-ils sur le site de mon client ?** **Les boutons** sont importés en tant qu'éléments de bouton fonctionnels s'ils ont uniquement du texte (plus précisément, un symbole/cadre avec 1 élément de texte et une couleur de remplissage). Si votre bouton sur Figma est une forme ou une icône, le plug-in ne l'identifie pas comme un bouton. **Les menus et les formulaires** sont importés en tant qu'éléments de texte normaux, ils ne fonctionneront donc pas comme les menus et les formulaires proposés par Wix Studio. Après avoir importé votre design, nous vous recommandons de remplacer ces éléments par les éléments de menu et de formulaire disponibles dans l'Éditeur Studio. **À quoi ressemblera mon design importé à travers les points de rupture ?** Tant que la largeur du cadre Figma de l'ordinateur correspond à la taille de modification sur la page spécifique du site, le résultat sera précis et les designs seront mis à l'échelle proportionnellement aux points de rupture. Si vous souhaitez effectuer d'autres ajustements pour ordinateur, tablette ou mobile, vous pouvez [le faire manuellement](https://support.wix.com/fr/article/éditeur-studio-concevoir-le-design-à-travers-les-points-de-rupture) ou [utiliser l'IA responsive](https://support.wix.com/fr/article/éditeur-de-studio-utiliser-lia-pour-rendre-les-sections-responsive) pour optimiser vos designs pour tous les points de rupture. **Si j'apporte d'autres modifications à mon design Figma après l'avoir importé dans Studio, seront-ils automatiquement synchronisés ?** Non, vos modifications ne seront pas automatiquement mises à jour. Toute modification doit être exportée et importée à nouveau. **Puis-je exporter des designs dans l'autre sens, de Wix Studio vers Figma ?** Non. Pour le moment, cette option n'est pas prise en charge. --- ## Dépannage Vous rencontrez des problèmes lors de l'exportation de vos designs Figma vers Wix Studio ? Cliquez sur un problème ci-dessous pour en connaître la cause et voir comment le résoudre. > **Avant de résoudre le problème :** Si vous ne parvenez pas à exporter votre design, nous vous recommandons de vérifier si vous avez atteint la [limite de tarif sur votre compte Figma](https://developers.figma.com/docs/rest-api/rate-limits/). **(Sur Figma) Aucun style n'apparaît dans le panneau lors de la tentative d'exportation** Assurez-vous que le ou les cadres correspondants ont été sélectionnés. Vous pouvez voir s'il est sélectionné ou non sur la toile, ainsi que dans le panneau Calques. Pour des conseils plus spécifiques, lisez ci-dessous. **Styles de typographie :** Si vous ne voyez pas de style de typographie spécifique, vérifiez que : * Des éléments de texte en ligne ont été utilisés. * Toutes les polices pertinentes sont installées sur votre ordinateur. **Couleurs :** Les couleurs apparaissant dans les images ne peuvent pas être automatiquement reconnues. Si nécessaire, vous pouvez les ajouter plus tard comme couleurs personnalisées dans l'Éditeur Studio (en utilisant leurs codes HEX, RGB ou RSB). **(Dans l'Éditeur) Je ne vois pas l'option pour ajouter un cadre en tant que page/section** Les options que vous voyez à côté de **Ajouter un cadre** dépendent du cadre spécifique que vous avez exporté : * **Page :** Cadres de niveau supérieur uniquement * **Section :** Cadres imbriquées d'une largeur supérieure à 1001px * **Conteneur :** Toutes les tailles de cadre * **Empilé :** Images avec mise en page automatique Si vous ne voyez pas l'option que vous recherchez, vous avez peut-être exporté un cadre qui ne répond pas à l'exigence ci-dessus. **(Dans l'éditeur) Le design ne semble pas proportionnellement après l'avoir importé** Lorsque la largeur du cadre Figma ne correspond pas à la [taille de modification](https://support.wix.com/fr/article/éditeur-studio-paramétrer-votre-taille-dédition) dans l'Éditeur, le design est automatiquement mis à l'échelle ou réduit. Si votre design n'est pas dans les mêmes proportions que sur Figma, il peut y avoir une non-concordance. **Remarque :** La taille d'édition est définie par page dans l'Éditeur Studio. Si vous préférez redimensionner le cadre sur Figma pour qu'il corresponde à votre taille d'édition, vous pouvez [utiliser l'outil Mettre à l'échelle](https://help.figma.com/hc/en-us/ articles/360040451453-Resize-layers-with-the-scale-tool). Ensuite, exportez à nouveau le cadre. ### Vous avez toujours besoin d'aide ? **Quelles informations dois-je inclure si j'ai besoin de demander de l'aide ?** Afin que nous puissions vous aider au mieux, il est utile de disposer des informations suivantes : * L'URL Figma du projet concerné **Remarque :** Assurez-vous de [le rendre public](https://help.figma.com/hc/fr/articles/360040531773-Partager-des-fichiers-et-des-prototypes) pour que notre équipe puisse la voir. * Vidéo ou capture d’écran du problème spécifique * (Si le problème concerne un cadre spécifique) Le nom du cadre tel qu'il apparaît dans le panneau Calques sur Figma.