Liens de périphérique
L'une des meilleures fonctionnalités de Figma est qu'il vous permet de transférer rapidement les conceptions que vous créez avec lui dans le code. Si vous êtes un développeur d'applications ou travaillez avec des concepteurs, il s'agit d'une compétence précieuse à acquérir. À l'aide d'outils intégrés et de nombreux plugins, Figma vous permet d'exporter votre conception vers différentes plates-formes.
Si vous souhaitez en savoir plus sur la conversion de votre conception Figma en code, vous êtes au bon endroit. Dans cet article, nous verrons comment exporter du code dans Figma et quels outils vous devrez utiliser.
Comment exporter du code dans Figma sur un PC Windows
Si vous êtes un utilisateur Windows et que vous souhaitez exporter du code dans Figma, vous serez heureux de savoir que vous pouvez utiliser de nombreuses options.
Figma Inspecter
L'une des méthodes que vous pouvez utiliser pour exporter du code dans Figma est Figma Inspect. Cette fonctionnalité vous permet de convertir facilement vos conceptions en code Android, iOS ou Web. Comme il est intégré, vous n'avez pas besoin d'installer de plugins ou d'applications tierces.
Voici comment l'utiliser :
- Sélectionnez les éléments qui vous intéressent et accédez à l'onglet Inspecter.
- Sous la section Code, sélectionnez le code que vous souhaitez exporter (CSS pour le Web, Swift pour iOS ou XML pour Android).
L'outil générera le code en fonction de l'option que vous avez choisie, puis vous pourrez l'exporter. Bien qu'il s'agisse d'un excellent outil, il a certaines limites. À savoir, vous ne pouvez pas exporter SVG vers HTML. Pour cela, vous devrez utiliser un plugin.
Extensions Figma
Figma propose des centaines de plugins utiles. Nous en mentionnerons quelques-uns que vous pouvez utiliser pour exporter votre conception au format HTML.
Figma en HTML
le brancher vous permet de convertir votre design en HTML ou CSS, selon vos besoins. Suivez les étapes ci-dessous pour installer le plug-in et exporter le code :
- Accédez au menu principal en appuyant sur l'icône dans le coin supérieur gauche.
- Appuyez sur Plugins.
- Appuyez sur Parcourir les plugins dans la communauté.
- Tapez Figma en HTML et sélectionnez Plugins en haut.
- Appuyez sur Installer.
- Revenez à votre conception et sélectionnez les éléments souhaités.
- Revenez au menu principal, sélectionnez Plugins, puis sélectionnez Figma vers HTML.
- Choisissez HTML ou CSS.
- Appuyez sur Copier ou Télécharger, selon vos besoins.
Anima pour Figma
Un autre plugin utile est Anima pour Figma. Avec ce plugin, vous pouvez convertir votre conception en HTML, CSS, React et Vue. Suivez ces étapes pour utiliser le plugin :
- Ouvrez le menu principal en sélectionnant l'icône en haut à gauche.
- Appuyez sur Plugins.
- Sélectionnez Parcourir les plugins dans la communauté.
- Tapez Anima pour Figma.
- Appuyez sur Installer.
- Sélectionnez les éléments que vous souhaitez exporter.
- Ouvrez le menu principal, appuyez sur Plugins et sélectionnez Anima pour Figma. Inscrivez-vous si vous n'avez pas de compte.
- Choisissez le type de code et appuyez sur Exporter le code.
Comment exporter du code dans Figma sur un Mac
L'exportation de votre conception vers le code sur un appareil Mac peut être effectuée de plusieurs manières.
Figma Inspecter
Cet outil intégré vous permet d'inspecter et d'exporter le code et d'autres valeurs pour vos conceptions. Avec Figma Inspect, vous pouvez choisir parmi trois options de code : Android, iOS ou Web (CSS uniquement).
Suivez les étapes ci-dessous pour utiliser Figma Inspect sur un Mac :
- Sélectionnez les éléments que vous souhaitez exporter.
- Ouvrez l'onglet Inspecter à droite.
- Choisissez entre CSS, iOS ou Android.
- Copiez votre code.
Si vous n'êtes intéressé que par CSS, iOS et Android, c'est un excellent outil à utiliser. Cependant, si vous souhaitez exporter votre conception au format HTML, vous devrez utiliser une méthode différente.
Extensions Figma
Si vous souhaitez convertir vos conceptions en HTML, Figma propose des dizaines de plugins qui servent à cette fin. Le processus d'installation est simple. Nous énumérerons quelques-uns des plus populaires.
Figma en HTML
Cette brancher vous permet de convertir votre design en CSS ou HTML. Voici comment l'installer :
- Sélectionnez l'icône en haut à gauche pour ouvrir le menu principal.
- Appuyez sur Plugins.
- Sélectionnez Parcourir les plugins dans la communauté.
- Tapez Figma to HTML dans la barre de recherche et sélectionnez Plugins en haut.
- Appuyez sur Installer.
- Revenez à votre conception et sélectionnez les éléments que vous souhaitez exporter.
- Ouvrez le menu principal, sélectionnez Plugins, puis sélectionnez Figma vers HTML.
- Sélectionnez HTML ou CSS.
- Appuyez sur Copier ou Télécharger.
Figma à coder
Avec ça brancher , vous pouvez convertir votre conception Figma en HTML, Tailwind, Flutter ou Swift UI. Suivez les étapes ci-dessous pour l'installer et l'utiliser :
- Appuyez sur l'icône en haut à gauche pour accéder au menu principal.
- Sélectionnez Plugins.
- Appuyez sur Parcourir les plugins dans la communauté.
- Tapez Figma to Code dans la barre de recherche et choisissez Plugins en haut pour obtenir des résultats pertinents.
- Appuyez sur Installer.
- Accédez à votre conception et sélectionnez les éléments souhaités.
- Accédez à nouveau au menu principal, sélectionnez Plugins, puis sélectionnez Figma to Code.
- Sélectionnez le code souhaité.
- Appuyez sur Copier dans le presse-papiers.
Puis-je exporter du code dans Figma sur iPhone ?
La nouvelle application iPhone Figma n'était disponible qu'en version bêta via vol d'essai pour les 10 000 premiers iPhones, mais la société déclare que le déploiement complet est pour bientôt. L'application vous permet de parcourir et d'accéder à vos conceptions et de suivre les modifications en direct sur votre iPhone tout en modifiant la conception sur votre ordinateur.
À l'heure actuelle, il n'est pas possible de modifier des conceptions via l'application iPhone, ce qui signifie qu'il n'y a aucun moyen d'exporter du code via celle-ci.
Figma propose également le Miroir Figma application sur l'App Store. Cette application vous permet de refléter vos conceptions sur n'importe quel appareil iOS sans être connecté au même réseau. De cette façon, vous pouvez vérifier l'apparence de votre conception sur un appareil particulier (dans ce cas, l'iPhone) et suivre les modifications. Bien qu'utile, l'application ne vous permet pas d'exporter du code sur votre iPhone. Pour cela, vous devrez saisir votre ordinateur.
Vous pouvez également accéder à vos conceptions via votre navigateur. Cependant, vous ne pourrez toujours que visualiser votre conception et suivre les modifications en direct.
Puis-je exporter du code dans Figma sur un iPad ?
Malheureusement, il n'est pas possible d'exporter du code dans Figma si vous utilisez un iPad. Figma travaille sur l'application mobile, et il existe une version bêta, mais elle n'était pas disponible pour les tablettes, uniquement pour les iPhones et les Androids.
L'application Figma Mirror est disponible sur iPad. L'application vous permet de suivre les modifications que vous apportez à votre conception sur l'ordinateur et de vérifier leur apparence sur l'écran de l'iPad. Malheureusement, l'option d'exportation de code dans l'application n'est pas disponible.
Si vous ne souhaitez pas installer l'application, vous pouvez accéder à Figma via votre navigateur et suivre les modifications apportées à la conception. Mais exporter du code dans Figma n'est possible que sur un ordinateur.
Puis-je exporter du code dans Figma sur un Android
Figma travaille actuellement sur l'application Android et propose une version bêta pour 10 000 téléphones Android. Vous pouvez devenir testeur en téléchargeant l'application depuis le Jouer au magasin et accéder à ce lien . Vous pouvez parcourir, afficher et partager vos conceptions et suivre les modifications dans l'application même lorsque vous n'êtes pas à proximité de votre ordinateur.
Bien que l'application soit utile à de nombreuses fins, elle ne vous permet pas d'exporter du code pour le moment.
le Miroir Figma L'application est également disponible pour Android. Son objectif principal est de suivre les modifications que vous apportez à vos conceptions sur votre ordinateur et de vous assurer qu'elles s'affichent correctement sur tous les appareils Android. L'option d'exportation de code n'est pas disponible.
Vous pouvez également utiliser Figma dans votre navigateur si vous ne souhaitez pas installer l'application. Cependant, vous ne pourrez toujours pas exporter le code. Pour cela, vous devrez utiliser votre ordinateur.
¿Puedo jugar juegos de Wii U en Nintendo Switch?
FAQ supplémentaires
Comment exporter des couleurs de Figma vers Xcode ?
Malheureusement, il n'est pas possible d'exporter des couleurs de Figma vers Xcode car Figma ne le prend pas en charge. Mais, il existe une solution de contournement que vous pouvez utiliser appelée Exportation Figma . Suivez les étapes ci-dessous pour l'utiliser :
1. Si vous ne l'avez pas déjà fait, installez Exportation Figma .
2. Ouvrez Terminal.app.
3. Ouvrez le dossier avec le fichier figma-export.
4. Lancez figma-export.
5. Exportez les couleurs en utilisant ./figma-export colors -i figma-export.yaml.
Comment exporter du code HTML depuis Figma ?
Comme mentionné précédemment, l'outil intégré appelé Figma Inspect vous permet d'obtenir du CSS, mais pas du HTML. Si vous avez besoin du code HTML, vous devrez installer un plugin.
Figma propose des dizaines de plugins qui servent à cette fin. Notre recommandation est Figma en HTML . Voici comment l'utiliser :
1. Ouvrez le menu principal. C'est l'icône en haut à gauche.
2. Appuyez sur Plugins.
3. Sélectionnez Parcourir les plugins dans la communauté.
4. Tapez Figma to HTML dans la barre de recherche et assurez-vous que Plugins est sélectionné en haut.
5. Sélectionnez Installer.
6. Revenez à votre conception et sélectionnez les éléments que vous souhaitez convertir en HTML.
7. Allez dans le menu principal, sélectionnez Plugins et ouvrez Figma en HTML.
8. Appuyez sur HTML.
9. Choisissez entre Copier ou Télécharger.
Obtenez le code dont vous avez besoin
Figma vous permet d'exporter différents types de codes en utilisant plusieurs méthodes. Vous pouvez utiliser des outils intégrés ou télécharger différents plugins, selon vos besoins. Pour l'instant, l'exportation de codes n'est possible que via des ordinateurs. Figma a publié la version bêta de l'application mobile (limitée à 10 000 appareils iPhone ou Android), mais elle ne propose pas cette option. Heureusement, exporter du code sur des ordinateurs est simple et rapide.
Comment exporter du code dans Figma ? Utilisez-vous l'une des méthodes que nous avons mentionnées dans cet article ? Dites-nous dans la section commentaires ci-dessous.
