Comment convertir Figma Design en Elementor avec Fignell

Rifat Élémentaire Oct 5, 2023

Dans la poursuite de l'optimisation des flux de travail, Fignel, une entreprise à la pointe de l'innovation en matière de conception, apparaît comme une solution qui convertit sans effort les fichiers Figma en sites Web Elementor fonctionnels.

Cet outil unique trouve un écho auprès des professionnels cherchant à fusionner les capacités de conception de Figma avec les prouesses en matière de création de sites Web d'Elementor. Fignel comprend Figma et Elementor, et cet outil fonctionne parfaitement pour rendre l'expérience de votre site Web WordPress un jeu d'enfant. Dans cet article, nous en verrons plus sur Fignell et comment l'utiliser.

Introduction à Fignell

Fignel est un premier outil bêta que les concepteurs peuvent utiliser pour convertir automatiquement une conception Figma en un site Web WordPress basé sur Elementor . Il est disponible sous forme de plugin pour Figma via le site Web de Fignel et sur la page de la communauté des plugins Fignel sur Figma.

Il inclut des propriétés de mise en page automatique pour les composants, permettant de convertir des pages ou des composants individuels en un seul clic. Fignel propose actuellement plusieurs widgets, notamment les sections, les colonnes, le texte, les titres, les images (ne pas télécharger d'images pour le moment), la vidéo (coller n'importe quel lien depuis YouTube ou ailleurs) et les formulaires. Un forfait gratuit est disponible pour les utilisateurs qui souhaitent gagner du temps lorsqu'ils travaillent avec Elementor.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Fignel aide les développeurs et les concepteurs à gagner du temps en convertissant les conceptions vers Elementor. Il prévoit de permettre aux utilisateurs de convertir plus de 60 widgets puissants, des capacités de création illimitées, des modèles créés par des concepteurs à télécharger, une prise en charge de contenu dynamique et des options de service client VIP.

Selon leur site Web, « Fignel vous aide à convertir votre conception Figma en un site Web Elementor en direct en quelques clics. Utilisez simplement les propriétés de mise en page automatique pour vos composants et convertissez-les en un clic en un site Web WordPress en direct. Vous pouvez convertir une page complète ou des composants uniques avec notre plugin.

Utilisez Fignell pour convertir Figma en Elementor

Configuration et installation du plugin

Avant tout, accéder au compte Figma et naviguer vers la section plugins est essentiel. Ici, Fignel apparaît comme un outil central.

Le lancement du processus implique de fournir une adresse e-mail et un code de licence.

Il est intéressant de noter que Fignel propose une option gratuite, permettant aux utilisateurs de convertir jusqu'à cinq conceptions sans aucune implication financière.

Sélection du canevas

Après l'installation, sélectionnez le cadre que vous souhaitez convertir. Vous pouvez même sélectionner l’ensemble du plan de travail.

Ensuite, vous verrez un segment nommé « Crypto Website Version 4 » qui subit une confirmation avant de procéder au téléchargement.

Vous verrez un bouton «Télécharger le modèle Elementor», cliquez dessus pour lancer le téléchargement.

Un réglage fin pour des résultats optimaux

Une compréhension plus approfondie de certaines nuances de conception devient essentielle à ce stade. La maîtrise de la mise en page automatique au sein de Figma s'avère indispensable. Cette fonctionnalité reflète étroitement la structure de conteneur et de mise en page d'Elementor, facilitant une conversion transparente.

Une comparaison minutieuse entre les paramètres de conception et de mise en page automatique apparaît comme une étape cruciale, garantissant l’efficacité du processus.

Interprétations des widgets

La façon dont Fignel interprète les widgets est un aspect fondamental. Pour garantir une traduction précise, un travail préparatoire au sein de Figma est impératif.

Par exemple, étiqueter un bouton comme « [Bouton] » entre crochets fournit le contexte nécessaire au plugin. Des conventions similaires guident l'interprétation de divers widgets, rationalisant ainsi le processus de conversion.

Processus de conversion et résultats

Lors du lancement de la conversion, Fignel génère un fichier JSON.

Ce fichier sert de canal pour importer de manière transparente la conception dans Elementor, où elle prend forme. Cependant, il est pertinent de noter que le processus comporte certains défis.

Importer dans Elementor

Accédez à votre site Web et ajoutez une nouvelle page. Et ouvrez-le avec Elementor.

Cliquez maintenant sur le bouton de la bibliothèque et sélectionnez télécharger.

Importez maintenant le fichier JSON.

Maintenant, vous verrez ici plusieurs options en attente d’importation. Sélectionnez la section attendue et cliquez sur importer et appliquer.

Faire des changements

Une fois le fichier importé, vous verrez que diverses sections y sont perturbées. C'est parce que Fignel ne prend en charge que plus de 60 widgets et que celui que nous avons importé contient des éléments qui nécessitent plus que ce que propose cet outil. Alors ne vous inquiétez pas. Vous pouvez ajouter ces éléments manuellement.

Présentation de Fignel

Bien que le concept sous-jacent de Fignel soit révolutionnaire, sa mise en œuvre présente actuellement des limites. Malgré des efforts méticuleux pour adhérer aux principes de mise en page automatique et aux configurations précises des conteneurs, des divergences apparaissent dans l'interprétation de Fignel. La tendance du plugin à effectuer des ajustements basés sur les pixels entraîne des variations, notamment concernant le remplissage et l'alignement. Dans le domaine du design mobile, l'efficacité de Fignel diminue, entraînant des disparités en matière de typographie et de formatage. Des conceptions remarquablement complexes impliquant des images d’arrière-plan et des éléments avancés se heurtent à des obstacles lors de la transition.

Conclusion

Du point de vue d'un designer chevronné attaché au potentiel synergique d' Elementor et Figma, Fignel offre une proposition de valeur unique. Bien que des améliorations soient justifiées, l'anticipation de la croissance et de la maturation de Fignel est palpable. À l’heure actuelle, les flux de travail éprouvés conservent leur place forte. Cependant, la trajectoire de Fignel pourrait remodeler le paysage des outils de conception, ouvrant la voie à une conversion transparente de Figma vers Elementor. Le chemin vers cet objectif se poursuit, Fignel représentant un pas important dans la bonne direction.

Divi WordPress Theme