Comment convertir Figma en WordPress ? [Moyens gratuits et payants]

Figma est surtout connu comme outil de conception et de créativité, tandis que WordPress est réputé pour sa flexibilité, sa personnalisation et sa facilité d'utilisation. Et si vous pouviez combiner le meilleur de ces plateformes pour créer un site Web époustouflant ?

Oui c'est possible. Vous pouvez concevoir votre site Web à l'aide de Figma, puis le convertir en WordPress. Bien qu'il s'agisse autrefois d'une tâche ardue impliquant un traitement HTML et des thèmes préinstallés, les choses sont devenues beaucoup plus faciles aujourd'hui.

Si vous recherchez la même chose, vous êtes au bon endroit.

Dans cet article, nous vous expliquerons comment convertir Figma en WordPress d'une manière très simple et conviviale pour les débutants, sans aucune expertise technique.

Option 1 : utilisez un plugin gratuit pour convertir Figma en WordPress

Bien qu'il existe plusieurs façons de convertir Figma en WordPress, vous pouvez soit choisir la méthode gratuite, utiliser le plugin de conversion premium, soit passer par la méthode manuelle. (Ils ont leurs avantages et leurs inconvénients)

Étape 1 : Tout d’abord, vous devez créer un design Figma que vous souhaitez ensuite convertir en WordPress. Mais vous ne devez jamais oublier de suivre toutes les meilleures pratiques et principes de conception de l’industrie.

Étape 2 : Une fois que vous avez créé et conçu avec succès la page Figma, il est temps de générer sa clé API. Cette clé API aidera à récupérer la page Figma via le plugin et à l'intégrer dans WordPress.

Pour cela, cliquez sur l'icône Figma située en haut à gauche de l'écran. Cela ouvrira les options de menu sur lesquelles vous devrez sélectionner Aide et Compte> Paramètres du compte.

Cela ouvrira une nouvelle invite dans laquelle vous devrez faire défiler jusqu'à la section « Jetons d'accès personnels » et cliquer sur le lien Générer un nouveau jeton .

Cela ouvrira en outre une nouvelle invite dans laquelle il vous sera demandé de fournir quelques détails de base sur le jeton que vous créez, tels que le nom et la date d'expiration.

Remarque : Dans la section Expiration, sélectionnez toujours « Pas d'expiration » afin que votre page Figma ne disparaisse pas de votre site Web après un délai précis.

En dessous, définissez toutes les étendues sur « Écrire » et cliquez sur le bouton « Générer un jeton ». Vous serez redirigé vers la section « Jeton d'accès personnel » à partir de laquelle vous pourrez facilement copier le jeton généré et l'enregistrer soit dans le Bloc-notes, soit sur n'importe quel éditeur.

Étape 3 : Maintenant que vous avez généré et enregistré avec succès le jeton, il est temps de convertir votre page Figma en WordPress.

Pour commencer le processus, vous devez installer et activer un plugin WordPress simple mais puissant nommé « Animation and Design Converter for Gutenberg Block – Advanced Addons » sur votre site WordPress.

Après une installation et une activation réussies, ouvrez la page ou la publication de votre site WordPress sur laquelle vous souhaitez intégrer votre page Figma conçue.

Sur cette page ou cette publication, cliquez sur le bouton « Importer depuis Figma » en haut à gauche de l'écran.

Une invite s'ouvrira vous demandant de fournir le « jeton d'accès Figma » que vous avez généré et enregistré précédemment. Entrez l'URL du fichier Figma.

Pour l'URL du fichier Figma, revenez à votre fichier Figma, copiez l'URL dans l'onglet du navigateur ci-dessous et collez-la dans la zone URL du fichier Figma.

Pour le reste, le Plugin fera son travail et convertira le fichier Figma en blocs WordPress. Après cela, vous pouvez effectuer autant de personnalisations que vous le souhaitez à partir du panneau de blocage.

Une fois terminé, cliquez sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos paramètres.

Option 2 : Utilisez un plugin payant pour convertir Figma en WordPress (plus efficace et sans tracas)

Pour cette méthode, nous utiliserons un plugin de conversion plus populaire et plus efficace, « Uichemy ». Ce plugin offre un flux de travail très simple et simple, rendant le processus de conversion transparent. Il convient mieux aux débutants sans expertise en codage ainsi qu’aux développeurs qui souhaitent accélérer leur processus.

Actuellement, ce plugin ne peut convertir que les conceptions Figma en éditeurs de sites Web Elementor et Bricks, mais la société a promis de prendre en charge les blocs Gutenberg à l'avenir.

Étape 1 : Ouvrez votre conception Figma et installez le plugin Uichemy sur le tableau de bord Figma pour lancer le processus de conversion.

• Pour ce faire, recherchez « UiChemy » dans la barre de recherche et recherchez le plugin UiChemy.

Cliquez sur le bouton « Commençons » et suivez les instructions d'installation et d'activation.

• Entrez votre clé de série pour terminer l'activation. (Pour la clé de série, créez un compte gratuit en cliquant sur le bouton « Démarrer gratuitement ». Après avoir créé votre compte, vous trouverez votre clé de licence dans le tableau de bord de votre compte Posimyth Store.)

Étape 2 : Après une activation réussie, sélectionnez le design ou le cadre Figma que vous souhaitez convertir en WordPress et cliquez sur le bouton « Convertir en Elementor » dans la fenêtre contextuelle.

(Assurez-vous d'avoir installé et activé le plugin Elementor sur votre site WordPress avant le processus de conversion et lisez également toutes les conditions avant de convertir votre conception Figma).

Étape 3 : Vous pouvez maintenant prévisualiser votre conception en saisissant l'URL et la clé de jeton de votre site. Si vous ne le souhaitez pas, cliquez simplement directement sur le bouton « Convertir en Elemetor ». (Reportez-vous au didacticiel d'UiChemy sur « Qu'est-ce que l'aperçu en direct » pour obtenir des conseils sur la génération de votre clé de jeton et de l'URL de votre site Web.)

Étape 3 : Votre conception sera convertie et téléchargera le fichier JSON.

Maintenant, ouvrez votre tableau de bord d'administration WordPress > Accédez à Modèles > Modèles enregistrés.

Cliquez maintenant sur le bouton « Importer des modèles » en haut de la page et téléchargez le fichier JSON.

Étape 4 : Félicitations ! Votre conception Figma apparaîtra maintenant dans la section « Modèles enregistrés », où vous pourrez l'ouvrir et effectuer d'autres modifications ou personnalisations.

Étape 5 : Après avoir terminé la personnalisation ou les modifications, affichez votre conception sur le front-end. Assurez-vous que toutes les images et tous les boutons sont correctement alignés et fonctionnent correctement. Vérifiez également si la conception est réactive sur toutes les tailles d’écran.

Option 3 : Convertir manuellement Figma en WordPress (pour les développeurs)

Cette méthode est assez technique, nécessite donc une bonne connaissance du CMS WordPress et peu de patience, elle convient donc mieux à ceux qui aiment coder.

Étape 1 : La première étape consiste à exporter tous les éléments de conception tels que les icônes et les images depuis Figma. Pour cela, ouvrez votre Figma Design et choisissez ce que vous souhaitez exporter. Cliquez maintenant sur le bouton « Exporter » et sélectionnez le bon format et la bonne résolution.

Remarque : Il est fortement recommandé, lors de l'exportation d'images, de choisir PNG ou JPG, et pour les icônes et les vecteurs, de choisir SVG pour conserver la qualité. Soyez également prudent lorsque vous exportez vos fichiers, assurez-vous qu'ils sont dans le bon format, sinon cela affectera gravement l'apparence de votre site Web.

Étape 2 : Nous devons maintenant créer un thème WordPress personnalisé pour convertir toutes les conceptions Figma en un site WordPress. En effet, un thème WordPress contrôle l’apparence et le fonctionnement de votre site Web.

Un fichier de thème WordPress typique se compose de code PHP, de fichiers JavaScript et de fichiers de feuille de style CSS.

• Créez un nouveau dossier dans WordPress pour votre thème dans le répertoire wp-content/themes et nommez-le de votre choix. (Vous pouvez accéder à ces fichiers via Cpanel, WordPress Editor ou des clients FTP) Ou consultez notre blog dédié sur « Comment installer le thème WordPress ?

Si vous êtes un utilisateur WPOven, vous pouvez accéder au fichier WordPress en suivant ce tutoriel. "Nouveau gestionnaire de fichiers pour gérer facilement les fichiers et dossiers de votre site."

Maintenant, ajoutez-y des fichiers comme index.php, header.php, footer.php etfunctions.php. (Laissez ces fichiers vides pour l'instant). Ajoutez également le fichier style.css pour configurer la feuille de style CSS de votre thème dans le même dossier.

(Ce fichier style.css particulier est responsable de l’affichage de toutes les couleurs, polices, bordures, marges et autres éléments visuels du site Web.)

Ajoutez maintenant le commentaire d'en-tête suivant à votre fichier style.css comme indiqué ci-dessous :

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Ici, vous devez fournir le nom du thème de votre thème WordPress personnalisé et votre auteur. Cela aidera WordPress à identifier votre thème personnalisé.

N’oubliez pas non plus d’ajouter une image pour votre thème WordPress, afin qu’il soit facilement reconnaissable dans l’annuaire WordPress, au même titre qu’une vignette YouTube.

La taille préférable doit être de 800 × 600 pixels et doit être au format PNG. Nommez tout ce que vous voulez et ajoutez-le au dossier du thème.

Étape 3 : Nous devons maintenant ajouter tous vos actifs Figma exportés dans votre dossier de thème personnalisé.

Astuce : Si votre site est complexe, il est préférable de gérer tous vos actifs dans un sous-dossier spécifique, comme nous l'avons montré dans l'image ci-dessous :

Étape 4 : Pour rendre votre thème WordPress complètement fonctionnel, vous devez ajouter du HTML, CSS et JavaScript aux fichiers du thème.

Voyons comment vous pouvez procéder,

Tout d’abord, vous devez convertir vos maquettes Figma en code, et pour cela, vous devrez disposer d’un outil éditeur de code.

Commencez par configurer une structure HTML avec des éléments tels que des en-têtes, des pieds de page, des barres de navigation et des sections. Ajoutez vos codes aux fichiers PHP (index.php, header.php et footer.php).

Utilisez maintenant CSS pour styliser vos éléments HTML. Ajoutez vos styles dans le fichier « style.css », en définissant les couleurs, les polices, les tailles et d'autres aspects de conception.

• Pour un meilleur style, vous pouvez utiliser :
  • Préprocesseurs CSS comme SASS ou LESS
  • Des frameworks comme Bootstrap ou Tailwind
  • Un thème de démarrage WordPress
• Pour les conceptions complexes, vous n'avez pas besoin de mettre tous vos CSS dans un seul fichier, mais de manière plus organisée. Vous pouvez ajouter des fichiers CSS distincts pour différentes parties dans le dossier des ressources afin de faciliter la gestion et le dépannage à l'avenir.

Enfin, pour Javascript, déterminez les éléments qui doivent être interactifs (menus déroulants, curseurs, etc.)

Pensez à utiliser jQuery pour faciliter les tâches telles que les appels AJAX et la manipulation DOM et chargez correctement vos fichiers CSS (feuilles de style) et JavaScript (scripts) dans votre thème WordPress à l'aide du fichier functions.php .

Étape 5 : Voici maintenant la partie test, après avoir suivi avec succès toutes les étapes ci-dessus, enregistrez vos fichiers et vérifiez si tout fonctionne bien. Mais avant cela, il faut activer le plugin.

Pour activer le plugin, rendez-vous sur votre tableau de bord WordPress > Apparence > Thèmes . Votre thème personnalisé commencera à apparaître avec l'image que vous avez téléchargée précédemment dans le dossier du thème. Cliquez dessus pour l'activer et votre site WordPress est prêt à être testé.

Voici quelques-unes des suggestions de tests que vous pouvez suivre :

• Vérifiez l'apparence et le fonctionnement de votre site dans différents navigateurs et tailles d'écran.
• Utilisez des outils pour optimiser vos images pour un chargement plus rapide.
• Implémentez la mise en cache pour accélérer votre site.
• Faites une sauvegarde de votre site avant de le mettre en ligne.

Résumé

La conversion de Figma vers WordPress n'est pas aussi simple qu'il y paraît, selon la complexité du site Web. Plus la conception est complexe, plus le processus que vous devez suivre est complexe. Nous avons essayé de couvrir toutes les options pour tous les types d'utilisateurs.

Le faire manuellement peut vous donner plus de contrôle, mais cela vous prendra beaucoup de temps et d’efforts. Cependant, vous pouvez utiliser des plugins pour accélérer le processus de conversion, mais vous devrez peut-être apporter certaines modifications pour obtenir de meilleurs résultats.

Cela dépend entièrement de vos préférences et de la facilité de compréhension de la méthode que vous choisissez.

Rahul

Rahul Kumar est un passionné du Web et un stratège de contenu spécialisé dans WordPress et l'hébergement Web. Fort de plusieurs années d'expérience et d'un engagement à rester au courant des tendances du secteur, il crée des stratégies en ligne efficaces qui génèrent du trafic, stimulent l'engagement et augmentent les conversions. L'attention portée aux détails et la capacité de Rahul à créer un contenu convaincant font de lui un atout précieux pour toute marque cherchant à améliorer sa présence en ligne.