Figma est un outil de conception basé sur le cloud permettant de créer une interface utilisateur attrayante pour votre site. Il vous permet de tester rapidement des idées grâce au prototypage et prend en charge la collaboration en temps réel.
La conversion de ces designs vers WordPress peut rendre votre site plus attrayant visuellement pour les utilisateurs. Cependant, gardez à l’esprit que ce processus peut être un peu difficile.
Chez WPBeginner, notre équipe de conception utilise Figma pour toutes sortes de graphiques de sites, y compris des pages entières et des sites Web. En cours de route, nous avons appris les forces et les faiblesses de l’utilisation de cette approche pour concevoir un site WordPress.
Dans cet article, nous allons vous montrer comment convertir facilement Figma en WordPress, étape par étape.
Vous êtes à la recherche d’un site WordPress personnalisé sans tous les tracas ? Notre équipe d’experts chez WPBeginner Web Design Services peut s’occuper de tout, de la conception proprement dite jusqu’à l’optimisation du référencement et des performances. Contactez notre équipe pour une consultation gratuite dès aujourd’hui !
Pourquoi convertir Figma en WordPress ?
Figma vous permet de créer de magnifiques mises en page pour votre site web et offre des outils étonnants tels que des effets d’animation, le prototypage, l’édition vectorielle, et bien plus encore.
Si vous avez un site WordPress, l’utilisation de cet outil pour créer une mise en page pour votre site permettra à plusieurs concepteurs et développeurs de travailler sur le même fichier Figma. Cela peut améliorer la collaboration et réduire la nécessité de faire des allers-retours par e-mail.
En outre, vous pouvez créer des maquettes interactives de votre blog afin de tester les flux d’utilisateurs et d’obtenir un retour d’information avant que votre site ne soit développé.
Vous pouvez également utiliser les outils avancés de Figma tels que les grilles, les guides, les calques et les mises en page automatiques pour créer des pages et des modèles visuellement attrayants, notamment :
- Pages d’atterrissage
- Page d’accueil, page de blog ou pages de produits
- Un thème entier
- Mises en page de sites web mobiles
- Tableaux de bord et interfaces utilisateurs
- Modèles d’e-mails et lettres d’information
Cependant, gardez à l’esprit que Figma ne s’intègre pas à WordPress par défaut, vous devrez donc utiliser un outil de conversion. Ceci étant dit, nous allons voir comment créer facilement un design Figma et le convertir sur WordPress, étape par étape :
Étape 1 : Créer un compte Figma
Pour concevoir une page avec Figma, vous devez d’abord créer un compte sur le site web.
Pour ce faire, visitez le site web de Figma et cliquez sur le bouton « Get started for free » dans le coin supérieur droit de l’écran.
Un nouvel onglet s’ouvrira dans votre fenêtre, dans lequel vous devrez indiquer votre adresse électronique et votre mot de passe.
Cliquez ensuite sur le bouton « Créer un compte ».
Vous recevrez alors un courriel de vérification.
Il vous suffit d’ouvrir cet e-mail depuis votre boîte de réception et de cliquer sur le bouton « Vérifier l’e-mail ».
Vous allez maintenant accéder au site web de Figma, où l’on vous demandera votre nom.
Ensuite, vous devez fournir quelques détails sur la manière dont vous comptez utiliser l’outil, puis cliquer sur le bouton « Continuer » en bas de page.
Il vous sera alors demandé de choisir un plan tarifaire. Vous pouvez sélectionner le plan « Starter », qui est gratuit, et cliquer sur le bouton « Continuer ».
Étape 2 : Conception d’une page sur Figma
Vous êtes maintenant dirigé vers votre tableau de bord Figma.
Une fois que vous y êtes, allez-y et ouvrez le menu déroulant « + Créer une nouvelle » dans le coin supérieur droit. Sélectionnez ensuite le bouton « Fichier de conception » pour créer une page Figma.
Le constructeur Figma s’ouvre alors sur votre écran. Vous devez sélectionner l’option « Cadre » dans la barre d’outils située en bas de l’écran.
Une liste de cadres de conception s’affiche alors dans la colonne de droite, où vous devez choisir l’option « Bureau ». Vous pouvez également choisir un autre cadre si cela vous convient mieux.
Ensuite, vous pouvez ajouter des images à la toile en cliquant sur l’icône carrée en bas et en choisissant l’option « Placer une image/vidéo ».
Cela ouvrira le dossier de votre ordinateur, dans lequel vous pourrez télécharger une image ou une vidéo de votre choix.
Vous pouvez également ajouter du texte à votre page en cliquant sur l’icône « T » de la barre d’outils.
Vous pouvez ensuite ajuster la taille du texte, l’alignement, la police et l’espacement à partir des paramètres de la colonne de droite.
Vous pouvez utiliser des outils de style gratuits tels que « Stylo » et « Crayon » depuis le bas, ajouter des questions de rétroaction, créer davantage de calques et de pages, modifier la couleur d’arrière-plan, et bien plus encore.
Si vous êtes un développeur et que vous souhaitez ajouter du code CSS à la page, vous pouvez également le faire en passant en « Dev Mode » à l’aide du commutateur situé en bas de la page. Cependant, vous aurez besoin du plan professionnel pour cela.
Étape par étape : Conversion de la page Figma vers WordPress
Une fois que vous êtes satisfait de la personnalisation de votre page Figma, il est temps de l’ajouter à WordPress. Pour ce faire, vous utiliserez l’extension Figma to WordPress Block.
Gardez à l’esprit qu’il s’agit d’une extension Figma intégrée, vous n’avez donc pas besoin de l’ajouter à votre site WordPress.
Cela dit, pour commencer votre conversion Figma, cliquez sur la page que vous venez de créer pour sélectionner le cadre. Si vous ne le faites pas, l’extension ne pourra pas la convertir en page WordPress.
Ensuite, cliquez sur le bouton » Actions » dans la barre d’outils pour ouvrir une invite où vous devez passer à la section » Plugins & Widgets « . Une fois dans cette section, trouvez et cliquez sur l’extension« Figma to WordPress Block« .
Une nouvelle fenêtre s’ouvre alors sur votre écran.
Ici, vous pouvez cliquer sur le bouton « Convert to WordPress » pour lancer le processus.
Une fois le travail de l’extension terminé, vous verrez l’aperçu de votre page Figma dans l’invite.
Si vous êtes satisfait, cliquez simplement sur le bouton « Copier » pour copier la page convertie.
Maintenant, rendez-vous dans votre tableau de bord WordPress et ouvrez la page ou la publication où vous souhaitez afficher la page Figma.
Une fois sur place, il suffit de cliquer sur l’option « Coller » pour ajouter la page Figma dans votre Éditeur de blocs.
Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut de la page pour stocker vos paramètres.
Vous pouvez maintenant visiter votre page WordPress pour voir le design Figma en action.
Alternative : Utiliser Seahawk Media Services pour convertir Figma en WordPress
Si vous avez créé l’intégralité de votre site à l’aide de Figma, la méthode ci-dessus ne conviendra pas car elle prendra beaucoup de temps.
De plus, l’extension peut avoir des difficultés à transférer des conceptions complexes avec précision, parce que Figma se concentre uniquement sur la conception, tandis que WordPress nécessite un codage pour le contenu dynamique et les fonctionnalités. Cela signifie que certains des éléments que vous avez ajoutés dans Figma peuvent ne pas fonctionner dans WordPress.
C’est pourquoi nous recommandons d’utiliser les services de Seahawk Media pour convertir Figma en WordPress car ils prennent en compte tous ces facteurs lors de la conversion.
Seahawk Media est une société de services WordPress de premier plan qui propose de nombreux services, notamment le développement, la conception, la maintenance, la migration, l’assistance et bien plus encore.
Plus de 1000 entreprises leur font confiance et ils réaliseront pour vous une conversion Figma vers WordPress entièrement responsive, proprement codée, prête pour l’optimisation des moteurs de recherche et parfaite au niveau des pixels.
Il vous suffit d’envoyer vos fichiers Figma à l’entreprise.
Après avoir compris vos besoins, Seahawk établira un calendrier approximatif et convertira vos fichiers Figma en un site WordPress en quelques jours seulement.
Vous pouvez également faire appel aux services de l’entreprise pour un audit SEO, des services de rédaction de contenu, des services en marque blanche, une assistance et la réparation de sites piratés.
Bonus : Utiliser SeedProd pour créer un site web visuellement attrayant
Si vous avez l’impression que c’est trop de travail de construire des pages avec Figma et de les convertir ensuite en WordPress, vous pouvez utiliser SeedProd à la place.
C’est le meilleur constructeur de thèmes et de pages WordPress sur le marché. Lorsque vous l’utilisez, vous pouvez facilement construire des thèmes personnalisés et des pages d’atterrissage avec une technologie simple de glisser-déposer.
SeedProd est livré avec un constructeur drag-and-drop convivial, plus de 300 modèles préfabriqués, des blocs WooCommerce avancés et des intégrations avec des services de marketing par e-mail.
Vous pouvez facilement glisser et déposer des images, des titres, des vidéos, des CTA, des formulaires d’optin, des cadeaux ou des blocs de paragraphes dans la colonne de gauche du constructeur pour créer une page attrayante.
Une fois cela fait, il vous suffit de cliquer sur le bloc que vous avez ajouté pour ouvrir ses paramètres dans la colonne de gauche. À partir de là, vous pouvez insérer du texte dynamique et modifier la taille de la police, l’alignement, la couleur, etc.
Enfin, cliquez sur les boutons « Enregistrer » et « Publier » en haut de la page pour enregistrer vos paramètres et mettre en œuvre vos modifications. Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur la création d’une page d’atterrissage dans WordPress.
Pour plus d’informations sur le plugin en général, voir notre revue SeedProd.
Questions fréquemment posées sur la conversion de Figma vers WordPress
Voici quelques questions fréquemment posées par nos lecteurs sur Figma et WordPress.
Figma et WordPress fonctionnent-ils ensemble ?
Par défaut, Figma et WordPress ne peuvent pas s’intégrer directement. Cependant, vous pouvez utiliser des extensions et des outils Figma comme pxCode, UiChemy ou Animation and Design Converter for Gutenberg Block pour convertir un design Figma sur WordPress.
Si cette méthode est trop complexe pour vous, vous pouvez simplement faire appel à un développeur ou à une société spécialisée comme Seahawk Media pour cette conversion.
Dois-je savoir coder pour convertir Figma en WordPress ?
Vous n’avez pas besoin de savoir coder pour créer et convertir des dessins Figma sur WordPress, car vous pouvez facilement le faire à l’aide d’un plugin ou en faisant appel à un développeur.
Toutefois, si vous souhaitez le faire vous-même sans plugin, vous devez connaître le HTML, le CSS et éventuellement le PHP pour coder votre site web à la main. En effet, certains des éléments de conception de Figma devront être codés pour assurer leur fonctionnalité dans WordPress.
Pour plus de détails, voir notre guide sur le codage d’un site web.
La conversion de Figma à WordPress nuit-elle au SEO (Search Engine Optimization) ?
Si vous convertissez un design Figma en WordPress, votre contenu ou vos backlinks ne seront pas affectés. Cependant, les designs Figma peuvent avoir un impact négatif sur la structure de votre site web, la vitesse des pages et les images.
C’est pourquoi nous recommandons d’utiliser les services de Seahawk Media pour une conversion Figma vers WordPress, car ils s’assureront que votre site Web est entièrement réactif, codé proprement et prêt pour le référencement après la conversion.
Nous espérons que cet article vous a aidé à apprendre comment convertir Figma en WordPress. Vous pouvez également consulter notre guide du débutant sur la façon d’externaliser le développement de WordPress et notre top des meilleurs endroits pour obtenir un logo personnalisé pour votre site web.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Vous avez une question ou une suggestion ? Laissez un commentaire pour lancer la discussion.