Éditeur Studio : Exporter vos designs depuis Figma
10 min
Dans cet article
- Étape 1 | Se préparer à l'exportation
- a | Importer des polices personnalisées dans Wix Studio
- b | Comparer la largeur du cadre à la taille de modification
- Étape 2 | Installer le plug-in
- a | Installer le plug-in sur Figma
- b | Ouvrir l'outil sur le site de votre client
- Étape 3 | Choisir ce que vous souhaitez exporter de Figma
- Étape 4 | Terminer l'importation dans l'Éditeur
- FAQs
- Dépannage
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.
- 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 et nos informations de dépannage 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 sur Wix à l'avance – sinon, les polices système remplacent les polices que vous aviez l'intention d'afficher.
b | Comparer la largeur du cadre à la taille de modification
La largeur du cadre Figma doit correspondre à la taille de modification 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.
É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
- Ouvrez le fichier que vous souhaitez exporter dans votre compte Figma.
- Appuyez sur Ctrl + P sur votre clavier (Cmd + V sur Mac).
- Cliquez sur l'onglet Plug-ins et widgets .
- Recherchez « Wix Studio » et sélectionnez Figma dans Wix Studio dans les résultats.
- Cliquez sur Exécuter.
- Connectez-vous à votre compte Wix sur le plug-in.
b | Ouvrir l'outil sur le site de votre client
- Accédez au site de votre client dans l'Éditeur.
- Cliquez sur l'icône Wix Studio
en haut à gauche. - Survolez Outils.
- Cliquez sur Importer de Figma.
Suggestion : Cela ajoute une nouvelle icône
à gauche de l'Éditeur.
É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 ?
Pour exporter depuis Figma :
- (S'il n'est pas déjà ouvert) Ouvrez le fichier Figma correspondant.
- Accéder au plug-in Studio :
- Cliquez sur l'icône Figma
pour ouvrir le menu principal. - Survolez plug-ins et cliquez sur Figma vers Wix Studio.
- Cliquez sur l'icône Figma
- Cliquez sur Configurer l'exportation.
- Cliquez sur Suivant.
- 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.
- Choisissez ce que vous souhaitez exporter et suivez les étapes :
Styles
Cadre
É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 :
- Accédez au site de votre client dans l'Éditeur.
- (Si ce n'est pas déjà fait) Cliquez sur l'icône Importer de Figma à gauche.
- 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
.
- En fonction de ce que vous importez, suivez les étapes ci-dessous :
Styles
Cadre
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 ?
Puis-je importer plusieurs pages à la fois ?
Mes designs Figma se connectent-ils automatiquement aux applis Wix (ex. Wix Boutique) ?
Que se passe-t-il lors de l'importation de menus, de formulaires et de boutons ? Fonctionneront-ils sur le site de mon client ?
À quoi ressemblera mon design importé à travers 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 ?
Puis-je exporter des designs dans l'autre sens, de Wix Studio vers Figma ?
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.
(Sur Figma) Aucun style n'apparaît dans le panneau lors de la tentative d'exportation
(Dans l'Éditeur) Je ne vois pas l'option pour ajouter un cadre en tant que page/section
(Dans l'éditeur) Le design ne semble pas proportionnellement après l'avoir importé
Vous avez toujours besoin d'aide ?
Quelles informations dois-je inclure si j'ai besoin de demander de l'aide ?