En quelques années, Figma s’est imposée comme la plateforme de référence pour la création graphique. Elle regorge de superbes modèles de pages et de sites web qui ne demandent qu’à être intégrés pour prendre vie en ligne.

Mais justement, cette étape de l’intégration, c’est-à-dire de la transformation d’une maquette en pages web interactives est encore assez complexe.

Pour vous simplifier la tâche, vous pouvez transformer un design Figma en site wordpress.
Pour que ce soit encore plus facile, vous pouvez utiliser un constructeur de thème. Ici, je vous parlerais de Divi que nous utilisons depuis plusieurs années.

Les avantages de WordPress et de Divi pour créer votre site

Utiliser WordPress et Divi pour intégrer un template Figma présente de nombreux avantages, notamment la possibilité de modifier votre site à volonté sans avoir besoin de coder, grâce à la réutilisation de blocs déjà prêts.

WordPress est un outil de gestion de contenu intuitif

WordPress est un système de gestion de contenu (on parle aussi de « CMS ») extrêmement populaire et intuitif. En y ajoutant Divi, qui est un thème et un constructeur de pages puissant, vous pouvez créer et modifier des sites web sans avoir besoin de compétences en codage. Cela rend l’intégration de templates Figma beaucoup plus accessible, même pour les utilisateurs non techniques.

Divi permet de tout personnaliser jusque dans les moindres détails

Divi offre une grande flexibilité en termes de personnalisation. Vous pouvez ajuster les couleurs, les polices, les marges, les paddings, et bien plus encore, directement depuis l’interface visuelle. Cela vous permet de reproduire fidèlement le design de votre template Figma sans avoir à toucher au code.

Plein de plugins pour faire évoluer son site

WordPress offre aussi une multitude de plugins et d’extensions. C’est même la raison de son succès. Cela signifie que vous pouvez facilement intégrer des fonctionnalités supplémentaires à votre site, telles que des formulaires de contact, une boutiques en ligne, un outil de gestion de newsletter etc.

N’oubliez pas le responsive design

Divi est aussi conçu pour être entièrement responsive, ce qui signifie que vos pages s’adapteront automatiquement à différentes tailles d’écran, notamment sur smartphone. Vous pouvez ainsi vous assurer que votre site est parfaitement accessible et fonctionnel sur tous les appareils, sans avoir à effectuer des ajustements manuels complexes.

Où trouver de beaux templates Figma ?

Pour trouver des templates Figma, plusieurs ressources sont à votre disposition.

La Figma Community est une excellente plateforme où les designers partagent gratuitement leurs créations. Vous y trouverez une variété de templates et de ressources utiles.

Envato Elements est une autre option populaire, offrant une vaste bibliothèque de templates premium de haute qualité.

En plus de ces deux sources, vous pouvez également explorer des sites comme Dribbble, Behance, et UI8, qui proposent également des templates Figma, souvent créés par des designers professionnels.

Bien sûr, vous pouvez aussi engager un graphiste professionnel qui crééra votre maquette sur-mesure. Mais les graphistes sont rarement aussi des intégrateurs capable de transformer une maquette en code. C’est là que WordPress et Divi vont vous simplifier la tâche.

Pour commencer, installez WordPress et Divi

Pour convertir un design Figma en un site web utilisant Divi, vous devez suivre plusieurs étapes préliminaires. Voici un guide détaillé pour vous assurer que tout est en place avant de commencer.

1- Installer et activer le thème Divi

Avant de pouvoir utiliser Divi, vous devez d’abord avoir une installation fonctionnelle de WordPress sur votre site. Si ce n’est pas déjà fait, vous pouvez généralement installer WordPress via le panneau de contrôle de votre hébergeur web. La plupart des hébergeurs proposent une option d’installation en un clic pour WordPress.

Une fois WordPress installé, assurez-vous que votre site est correctement configuré. Cela inclut la configuration des paramètres de base comme le titre du site, le fuseau horaire, et les options de permaliens. Vous pouvez accéder à ces paramètres via le tableau de bord WordPress.

Pour installer Divi, vous devez d’abord acheter une licence sur le site officiel d’Elegant Themes. Une fois votre achat effectué, téléchargez le fichier ZIP du thème Divi. Ensuite, allez dans le tableau de bord WordPress, puis dans « Apparence » > « Thèmes » > « Ajouter ». Cliquez sur « Téléverser un thème » et sélectionnez le fichier ZIP de Divi que vous avez téléchargé. Cliquez sur « Installer » puis sur « Activer ».

Après avoir installé Divi, vous devez l’activer pour pouvoir l’utiliser. Dans le tableau de bord WordPress, allez dans « Apparence » > « Thèmes ». Vous verrez Divi dans la liste des thèmes installés. Cliquez sur « Activer » pour activer le thème Divi.

2. Préparer votre design Figma

Avant de commencer à intégrer votre design Figma dans Divi, assurez-vous que tous les éléments nécessaires sont prêts. Exportez les images, les icônes, et autres ressources graphiques depuis Figma. Vous pouvez les exporter dans des formats comme PNG, JPEG, ou SVG selon vos besoins.

Organisez les fichiers exportés dans des dossiers bien structurés. Cela facilitera le processus d’importation et d’intégration dans Divi. Vous pouvez créer des dossiers séparés pour les images, les icônes, les polices, etc.

Initiez-vous à l’utilisation de Divi

Une fois le thème Divi activé, vous devez commencer à utiliser le Divi Builder pour construire vos pages. Le Divi Builder est un constructeur de pages visuel qui vous permet de créer des mises en page complexes sans avoir besoin de coder. C’est un système WYSIWYG : ce que vous voyez est ce que vous obtenez.

Nous avons ici un tutoriel pour créer votre première page avec Divi. Il aborde des notions essentielles telles que l’utilisation des sections, des lignes, des modules, des arrière-plans, des marges et espacements.

Commencez donc par créer une page ‘Ajouter’ > ‘Page’. Donnez-lui un titre et sauvegardez. Puis cliquez sur « Utiliser le visual builder » pour passer en mode construction visuelle intuitive. Ici, vous devrez associer des blocs pour reproduire votre design Figma à l’identique.

⚠️ N’oubliez pas de configurer les styles globaux (couleurs, tailles de texte de paragra^he, de titres, de sous-titres H2, hauteur de ligne…) et la typographie du site: la cohérence est essentielle pour offrir une expérience utilisateur professionnelle.

Importez les images et autres ressources graphiques que vous avez exportées depuis Figma. Vous pouvez ajuster les couleurs, les polices, et les marges directement dans le builder pour correspondre à votre design.

Ajoutez des sections et des rangées

Pour créer votre mise en page, commencez par ajouter des sections (zones bleues) et des rangées (zones vertes) pour reproduire la structure globale de votre design Figma. Les sections sont les grandes divisions de votre page, tandis que les rangées permettent de structurer le contenu à l’intérieur de ces sections en ajoutant des colonnes et des lignes.

Construire votre mise en page bloc par bloc

Une fois que vous avez défini la structure de base avec des sections et des rangées, vous pouvez commencer à ajouter des modules (zones grises). Les modules sont les éléments de base de Divi, tels que des blocs de texte, des images, des boutons, des icônes, et bien plus encore. La bibliothèque de modules de Divi est riche et variée, offrant une multitude d’options pour donner vie à votre design.

Les limites de Divi pour créer une maquette

Bien que Divi soit un outil puissant et flexible pour la création de sites web, il peut parfois sembler compliqué pour les débutants, surtout lorsqu’il s’agit de recréer une maquette de site.

Divi offre une grande multitude d’options et de paramètres, ce qui peut être déroutant pour les nouveaux utilisateurs. L’interface peut sembler complexe avec ses nombreux modules, sections et rangées, ainsi que ses multiples options de personnalisation. Comme pour tout nouvel outil, il y a une courbe d’apprentissage.

Les maquettes de sites créées dans des outils comme Figma peuvent être très détaillées et complexes. Recréer ces designs dans Divi peut nécessiter une compréhension approfondie des capacités de Divi et une certaine expérience pour ajuster les modules et les paramètres de manière précise.

Il peut parfois être nécessaire d’ajouter un peu de CSS pour obtenir des effets précis, notamment au niveau du header qui est la zone la plus délicate à reproduire.

IL ne faut pas oublier de créer la version responsive pour smartphone qui demande souvent des petits réglages complémentaires en finesse.

Conseils pour y voir clair et faciliter la mise en place

Commencez par les bases

Avant de plonger dans la recréation de votre maquette, prenez le temps de vous familiariser avec les bases de Divi. Apprenez à créer des sections, des rangées et des modules, et comprenez comment ces éléments interagissent entre eux.

Utilisez des tutoriels et des ressources en ligne

Il existe de nombreux tutoriels, guides et vidéos en ligne qui peuvent vous aider à comprendre comment utiliser Divi. La documentation officielle de Divi est également une ressource précieuse. Utilisez ces ressources pour apprendre les meilleures pratiques et les astuces pour tirer le meilleur parti de Divi.

Planifiez votre mise en page

Avant de commencer à construire votre site, planifiez soigneusement votre mise en page. Vous pouvez faire un plan sur papier avec un crayon. Découpez votre maquette en sections et rangées, et identifiez les modules que vous allez utiliser pour chaque section. Cela vous aidera à structurer votre travail et à éviter les erreurs.

Utilisez des modèles de démarrage

Divi propose des modèles de démarrage qui peuvent vous aider à démarrer rapidement et à comprendre les astuces de mise en page comme l’utilisation de fonds dégradés, de marges négatives, d’effets de défilements etc…

N’ayez pas peur d’expérimenter avec les différentes options de personnalisation de Divi. Essayez différentes configurations et ajustez les paramètres jusqu’à ce que vous obteniez le résultat souhaité. L’expérimentation est une partie essentielle du processus d’apprentissage.

Nous créons votre site WordPress avec Divi conforme à votre maquette Figma

Nous pouvons vous aider à intégrer votre maquette Figma en un site WordPress avec Divi de manière plus rapide et efficace.

Nos experts en Divi et WordPress peuvent transformer votre maquette Figma en un site web fonctionnel en un temps record. Grâce à notre expérience et à notre maîtrise des outils, nous optimisons chaque étape du processus pour vous offrir une solution rapide et fiable.

Nous vous fournissons une solution clé en main, ce qui signifie que vous n’avez pas à vous soucier des détails techniques. Nous nous occupons de tout, de l’installation de WordPress et de Divi à la configuration et à la personnalisation de votre site, en passant par l’intégration de votre maquette Figma et même la configuration de votre serveur et de votre nom de domaine.

Nous veillons à ce que votre site soit entièrement responsive, s’adaptant parfaitement à tous les types d’appareils, qu’il s’agisse de smartphones, de tablettes ou d’ordinateurs de bureau. Cela garantit une expérience utilisateur optimale pour tous vos visiteurs.

En plus de l’intégration de votre maquette, nous incluons une formation complète à WordPress et Divi. Cela vous permet de prendre le contrôle de votre site et de le modifier facilement selon vos besoins. Vous serez en mesure de gérer et de mettre à jour votre site de manière autonome, sans avoir besoin de compétences en codage. Notre équipe dispose de formateurs certifiés QUALIOPI intervenant notamment au CNAM.

En choisissant notre service, vous bénéficiez d’une solution professionnelle et personnalisée qui vous permet de transformer votre vision en réalité, tout en vous offrant la flexibilité et l’autonomie nécessaires pour gérer votre site web de manière efficace.

Contactez-nous pour discuter de votre projet et découvrir comment nous pouvons vous aider à atteindre vos objectifs.

Combien ça coute ?

Le prix d’une intégration Figma en WordPress dépend de la complexité de la page et du nombre de pages. Il démarre à partir  de 100 euros par page pour une mise en page simple. Cette prestation inclue une formation, le paramétrage de WordPress, l’installation de la licence Divi valable à vie.