Comment convertir Figma en WordPress (4 méthodes faciles, y compris l'IA)

Notre équipe de conception planifie les mises en page dans Figma avant de les construire dans WordPress. Concevoir d'abord vous permet de décider de la mise en page exacte, puis de la recréer sur votre site.

Dans ce guide, nous vous montrerons quatre méthodes pour convertir Figma en WordPress, en commençant par la méthode d'IA que nous avons testée nous-mêmes.

Avant de commencer : préparez votre image Figma

Un cadre est une zone de taille fixe unique dans Figma qui contient un écran ou une page de votre conception.

Les plugins de méthode et de convertisseur IA lisent directement votre cadre. Un cadre propre vous évite une série de corrections plus tard.

Le plan Starter gratuit de Figma est suffisant pour tout ce qui est abordé dans ce guide, vous n'avez donc pas besoin d'un compte Figma payant pour suivre.

Tout d'abord, sélectionnez votre cadre et appuyez sur Maj + A, ou cliquez sur le bouton Disposition automatique dans le panneau de droite.

La Disposition automatique indique à Figma d'espacer et d'empiler les éléments selon des règles plutôt que par des positions fixes. Cela aide votre conception à être convertie pour les appareils mobiles plus tard.

Ensuite, renommez vos calques pour décrire leur contenu, par exemple « Image principale » ou « Bouton CTA » au lieu de « Rectangle 47 ».

Les outils IA et les plugins de convertisseur utilisent ces noms pour comprendre chaque calque. Des noms clairs signifient moins de corrections par la suite.

Si vous avez le temps, concevez un cadre mobile à côté de votre cadre de bureau. Cela donne à tout outil une référence réelle sur la façon dont la page doit s'empiler sur un téléphone au lieu de le laisser deviner.

Enfin, vous avez besoin du lien vers ce cadre spécifique. Faites un clic droit sur le cadre, allez dans « Copier/Coller sous », et choisissez « Copier le lien vers la sélection ».

Le lien que vous obtenez contient node-id=, qui indique à l'outil quel cadre lire. Un simple lien de fichier sans node-id= pointe vers le fichier entier au lieu de votre cadre sélectionné et ne fonctionnera pas avec les plugins IA ou de convertisseur présentés ci-dessous.

Méthode 1 : Convertir Figma en WordPress avec l'IA

Le moyen le plus rapide de transformer une conception Figma en une page WordPress est de laisser l'IA lire votre cadre et de le reconstruire pour vous. Vous avez besoin de trois choses, et les trois ont des plans gratuits.

Le premier est Claude, l'assistant IA qui fait le travail. Le second est le connecteur officiel de Figma, qui est la pièce qui donne à Claude la permission de lire votre fichier Figma.

Le troisième est WPVibe, un plugin gratuit qui connecte votre site WordPress à Claude et crée la page directement sur votre site.

Sur le plan Starter gratuit de Figma, vous bénéficiez jusqu'à 20 lectures IA par mois. C'est suffisant pour une poignée de pages. Les plans payants donnent aux sièges Dev et Full jusqu'à 200 lectures par jour, tandis que les sièges View et Collab restent à 20 par mois.

Pour commencer, vous devrez d'abord connecter Figma. Dans l'application Claude, allez dans Paramètres » Connecteurs, trouvez Figma, et connectez-vous avec votre compte Figma.

Si vous utilisez Claude Code, exécutez la commande /mcp et choisissez Figma dans la liste.

Ensuite, installez et activez WPVibe sur votre site WordPress de la même manière que vous installez n'importe quel plugin. Pour des instructions étape par étape, consultez notre guide sur comment installer un plugin WordPress.

Une fois actif, l'écran WPVibe vous guide à travers trois courtes étapes. Copiez l'URL du serveur MCP qu'il affiche, ajoutez-la à Claude en tant que connecteur, et vérifiez votre e-mail en utilisant le code à six chiffres que le plugin vous envoie.

Ensuite, demandez à Claude de connecter votre site et approuvez-le en un clic depuis wp-admin. Vous ne copiez jamais de mot de passe nulle part dans ce processus.

Une fois que vous avez connecté avec succès WPVibe à Claude, collez votre lien de frame dans Claude avec cette invite.

Read this Figma frame: [paste your link]. Rebuild it as a new DRAFT page using native WordPress blocks only (group, columns, heading, paragraph, buttons, image). Upload the images to the media library. Match the colors, fonts and spacing. Do not publish.

L'expression « Blocs natifs » dans l'invite signifie les blocs standard fournis avec WordPress, de sorte que la page que vous obtenez reste modifiable dans l'éditeur de blocs normal et n'a pas besoin de plugin supplémentaire pour s'afficher.

Le mot BROUILLON est également important, car il maintient la page hors de votre site en direct jusqu'à ce que vous l'ayez examinée.

Lorsque nous avons exécuté cela sur notre site de test, une seule lecture de la frame a donné à Claude les couleurs hexadécimales exactes, les tailles de police, les hauteurs de ligne, les valeurs de remplissage et les rayons de coin de la conception.

Le premier brouillon est arrivé en 3 minutes et 20 secondes, et ces valeurs ont été transmises dans des blocs natifs.

La mise en page était ce qui nécessitait une correction avant que la page ne ressemble à notre frame Figma. Claude a également téléchargé nos images en utilisant l'outil de téléchargement de médias de WPVibe.

Cela ne fonctionne que lorsque votre conception contient de vraies images. Un rectangle de substitution dans Figma ne produit aucune image, et vous n'en recevez aucun avertissement.

Quatre problèmes sont survenus lors de notre test. Deux blocs de boutons enregistrés dans un état que WordPress considérait comme invalide, et l'éditeur a affiché une notification « Tenter de récupérer le bloc » à leur sujet.

Cliquer sur cette notification a corrigé les deux boutons, mais cela semble alarmant si vous ne vous y attendez pas.

Le deuxième problème est apparu sur ordinateur. Claude a construit nos sections à la largeur de contenu normale du thème.

La conception était dans une colonne étroite au milieu de l'écran, et les trois cartes de fonctionnalités se sont rompues un mot par ligne. Cela ne ressemblait en rien à la frame Figma.

Nous avons demandé à Claude de corriger la section et cela a fonctionné. Cependant, changer la largeur totale seule n'a pas suffi et la largeur du contenu intérieur a également dû être augmentée.

Vous pouvez également prendre une capture d'écran de la zone qui nécessite une correction et demander à Claude d'ajuster la largeur.

Le troisième problème était cosmétique. Les coins arrondis des images n'ont pas été reportés lors de notre test. Vous devrez les définir vous-même par la suite.

Le quatrième problème était la vue mobile, où Claude avait copié le remplissage latéral fixe de 120px de la conception sans le modifier.

Sur un téléphone de 390px de large, cela laissait seulement 150px d'espace pour le contenu.

Un message de suivi a corrigé la vue du téléphone. Nous avons demandé que le remplissage latéral et le titre principal s'adaptent à l'écran au lieu de rester à des tailles fixes, et cela a fonctionné.

Avant de publier, ouvrez le brouillon sur un ordinateur et sur votre téléphone. Si quelque chose semble incorrect, décrivez la correction à Claude en mots simples, puis vérifiez à nouveau les deux vues.

Lorsque tout semble correct, publiez la page depuis l'éditeur WordPress.

Si votre conception comporte plusieurs pages ou des mises en page complexes, vous devrez peut-être répéter ces étapes plusieurs fois pour tout mettre au point.

Méthode 2 : Construire dans SeedProd

Si vous préférez ne pas confier votre fichier Figma à un outil, vous pouvez reconstruire la conception directement dans WordPress avec SeedProd, le meilleur constructeur de thèmes et de pages de destination WordPress du marché.

La version gratuite contient le constructeur par glisser-déposer dont cette méthode a besoin, et elle fonctionne sur plus de 600 000 sites.

SeedProd n'a pas d'importation Figma. Cela signifie que vous recréez le design vous-même et contrôlez chaque élément dès le départ.

Ouvrez votre cadre Figma d'un côté de votre écran et le constructeur SeedProd de l'autre, puis faites glisser des blocs sur la toile pour correspondre à ce que vous voyez.

Vous pouvez faire glisser des images, des titres, des vidéos, des boutons, des formulaires d'inscription et des blocs de paragraphes depuis la colonne de gauche.

Cliquer sur n'importe quel bloc que vous avez ajouté ouvre ses paramètres, où vous pouvez faire correspondre la taille de la police, la couleur, l'alignement et l'espacement à votre design.

Nous avons reconstruit notre page de destination de test de cette manière dans la version gratuite de SeedProd, et la capture d'écran ci-dessus montre le résultat.

Pour le processus complet, consultez notre tutoriel sur comment créer une page de destination dans WordPress.

Si votre design est assez standard, SeedProd propose également un constructeur de sites web par IA qui peut générer un site web entier à partir d'une courte description de votre entreprise, ce qui vous donne un point de départ à faire correspondre à votre design Figma.

Vous pouvez générer jusqu'à trois sites gratuitement et télécharger chacun d'eux sous forme de fichier de thème. Pour modifier le résultat dans WordPress, vous avez besoin d'un plan SeedProd Pro.

Vous ajustez ensuite ce résultat pour qu'il corresponde à votre design Figma au lieu de partir d'une toile vierge. Pour plus de détails, consultez notre guide sur comment créer un site web avec l'IA.

Méthode 3 : Utiliser un plugin de conversion Figma vers WordPress

Si vous souhaitez rester dans Figma et convertir votre design sans que l'IA ne fasse la construction, un plugin de conversion est la meilleure option.

UiChemy est le meilleur plugin de conversion Figma vers WordPress que nous ayons trouvé, et il est actif sur plus de 8 000 sites.

Ce que nous aimons le plus chez UiChemy, c'est qu'il fonctionne avec des constructeurs de pages comme Elementor et Bricks, pas seulement avec l'éditeur de blocs. La plupart des plugins Figma conçus pour WordPress ne génèrent que du code pour l'éditeur de blocs.

Pour l'utiliser, vous installez deux éléments, le plugin UiChemy sur votre site WordPress et le plugin UiChemy dans Figma. Il nécessite WordPress 6.9 ou plus récent, alors vérifiez que votre site répond à cette exigence avant de commencer.

Dans votre tableau de bord WordPress, ouvrez UiChemy et allez dans l'onglet « Plugin Figma ».

Sous « Constructeur de pages », choisissez Elementor, Gutenberg ou Bricks. Trouvez ensuite « Lien de connexion » en dessous et cliquez sur « Copier ».

Ce lien contient vos identifiants et un mot de passe d'application sécurisé intégré. Traitez-le comme un mot de passe et gardez-le pour vous.

UiChemy a un plugin Figma distinct pour chaque constructeur qu'il prend en charge, un pour Elementor, un pour Gutenberg et un pour Bricks. Dans Figma, ouvrez le menu « Outils », recherchez UiChemy et exécutez le plugin qui correspond au constructeur que vous avez choisi dans WordPress. Les étapes sont les mêmes pour les trois.

Si c'est la première fois que vous utilisez UiChemy, créez un compte et suivez l'assistant de configuration.

Ensuite, choisissez « Conversion rapide » et sélectionnez votre bibliothèque cible, telle que Kadence, WordPress Core ou Nexter.

Ceux-ci fournissent des blocs que vous pouvez utiliser pour construire des pages dans l'éditeur WordPress plutôt que des constructeurs de pages séparés. Choisissez WordPress Core pour une sortie standard de l'éditeur de blocs, ou sélectionnez la bibliothèque que votre site utilise déjà.

Ensuite, sélectionnez votre cadre Figma et cliquez sur « Importer ».

Lorsque vous êtes invité à choisir une méthode pour exporter votre conception vers WordPress, sélectionnez « Ajouter un autre site » sous « Connexion au site ».

Collez le lien de connexion que vous avez copié depuis votre tableau de bord WordPress et cliquez sur « Connecter ». Votre site apparaîtra alors dans la liste « Sélectionner un site » chaque fois que vous convertirez une conception.

UiChemy vous propose désormais deux options d'importation.

« Importation directe » envoie l'intégralité de la conception sur votre site WordPress sous forme de brouillon de page, tandis que « Copier dans le presse-papiers » vous permet de copier une section à la fois et de la coller dans une page existante.

Le plan gratuit couvre un petit projet confortablement, vous donnant 1 000 crédits par mois, un siège Figma, un projet de site et cinq pages par site.

Les plans payants commencent à 8 $ par mois facturés annuellement lorsque vous en avez besoin de plus.

UiChemy a besoin que votre conception utilise « l'agencement automatique » et suive certaines règles pour fonctionner correctement. La conversion d'une conception plus ancienne peut nécessiter des ajustements préalables.

Figma to WordPress Block fait une version plus ciblée du même travail. Ce plugin Figma convertit une seule image en code d'éditeur de blocs. La version gratuite limite le nombre d'images que vous pouvez exporter, et une licence payante supprime cette limite.

Vous sélectionnez votre image, ouvrez le menu « Outils » dans la colonne de gauche et recherchez le plugin. Lorsque vous le trouvez, cliquez sur le bouton « Exécuter ».

Cela ouvrira une fenêtre contextuelle où vous pourrez cliquer sur « Convertir vers WordPress » et copier le résultat. Ensuite, collez-le dans l'éditeur de blocs sur n'importe quelle page pour obtenir votre conception sous forme de blocs.

Méthode 4 : Engager une agence WordPress

Pour un site Web complet ou une conception avec des fonctionnalités complexes, engager un développeur est généralement le meilleur choix.

Figma ne gère que la partie conception, ce qui signifie qu'un développeur doit construire tout ce qui doit fonctionner sur votre site, comme le contenu dynamique, les types de publication personnalisés ou un flux de paiement.

Une bonne agence rend également la conception fonctionnelle sur les téléphones et les tablettes. Vous devriez toujours vérifier les pages terminées sur votre propre téléphone avant d'approuver le travail.

Consultez notre liste des meilleures agences de développement WordPress pour en trouver une qui corresponde à votre projet.

Foire aux questions : Figma vers WordPress

Puis-je transformer ma conception Figma en site Web ?

Oui, vous pouvez transformer une conception Figma en un site Web WordPress fonctionnel, et il existe quatre façons de le faire. Vous pouvez laisser l'IA le reconstruire pour vous, le recréer dans un constructeur de pages comme SeedProd, le faire passer par un plugin de conversion, ou engager une agence. Les trois premières ne nécessitent aucun codage.

Existe-t-il un plugin Figma pour WordPress ?

Il en existe plusieurs, et UiChemy et Figma to WordPress Block sont les deux que nous vous indiquerions en premier. Figma lui-même n'a pas d'exportation WordPress intégrée, vous avez donc toujours besoin de l'un de ces outils ou d'une méthode comme celle de l'IA ci-dessus pour transférer une conception.

L'IA peut-elle convertir des conceptions Figma en WordPress ?

Oui, et nous l'avons testé pour ce guide en utilisant Claude avec le connecteur de Figma et le plugin WPVibe.

Il a fait correspondre les couleurs, les tailles de police et l'espacement d'une seule lecture de la conception, mais il a cassé la vue mobile en copiant le rembourrage latéral fixe de la conception sans modification.

La méthode 1 ci-dessus contient le compte complet, y compris le message qui l'a corrigé.

Comment convertir des conceptions Figma en Elementor ?

UiChemy est l’outil pour cela, car il convertit une maquette Figma en une mise en page Elementor modifiable plutôt qu’en code brut. Il fonctionne également avec Bricks et l’éditeur de blocs, vous n’êtes donc pas limité à un seul constructeur.

WordPress est-il meilleur que Figma ?

Aucun des deux n’est meilleur, car ils remplissent des fonctions différentes. Figma est l’endroit où vous concevez l’apparence d’une page, et WordPress est ce qui fait fonctionner votre site Web et le sert aux visiteurs.

La plupart des sites utilisent les deux, la conception étant d’abord finalisée dans Figma, puis construite dans WordPress.

La conversion de Figma en WordPress nuit-elle au référencement ?

La conversion d’une conception Figma en WordPress n’endommagera généralement pas votre contenu ou vos backlinks.

Les outils de conversion automatisés peuvent parfois ajouter du code supplémentaire que les développeurs appellent du « bloat », et ce code plus lourd peut ralentir votre page par rapport à un thème codé à la main.

Nous vous recommandons d’effectuer un test de vitesse après toute conversion pour voir où vous en êtes.

Nous espérons que cet article vous a aidé à apprendre comment convertir Figma en WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer facilement un thème WordPress personnalisé sans aucun code.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.