Une maquette Figma s'intègre fidèlement sous WordPress quand elle arrive avec quatre choses : la version mobile des écrans, des styles et composants nommés, les vrais contenus, et la liste de ce que le client modifiera lui-même. Sans elles, l'intégrateur devine, et c'est là que le site s'éloigne du design.
Ce guide s'adresse aux designers, aux agences et aux entreprises qui ont déjà une maquette et cherchent quelqu'un pour la transformer en site. Il liste ce qu'il faut préparer, et ce que chaque oubli coûte en allers-retours.
La liste à préparer avant l'intégration.
| À fournir | Pourquoi | Si c'est absent |
|---|---|---|
| Version mobile des écrans clés | Un site se consulte surtout sur téléphone | L'intégrateur invente la mise en page mobile |
| Styles de texte et couleurs nommés | Ils deviennent les réglages globaux du site | Des dizaines de tailles proches, difficiles à maintenir |
| Composants réutilisables | Cartes, boutons, blocs se déclinent sans être redessinés | Chaque page est intégrée comme un cas unique |
| Contenus réels | Les vrais textes ont rarement la longueur du faux texte | Mises en page qui cassent à la mise en ligne |
| États interactifs | Survol, erreurs de formulaire, menu ouvert | Comportements décidés au hasard |
| Polices avec licence web | Une police achetée pour l'impression ne couvre pas toujours le web | Police remplacée au dernier moment |
| Liste des contenus modifiables | Elle détermine la construction des pages dans WordPress | Un site joli mais que personne n'ose toucher |
La version mobile n'est pas une option.
C'est l'oubli le plus fréquent : une maquette entièrement soignée en grand écran, et rien pour le téléphone. Or c'est la version que verront la plupart des visiteurs. Sans écran mobile dessiné, l'intégrateur doit décider seul de l'ordre des blocs, de la taille des titres et de la place du menu.
Il n'est pas nécessaire de dessiner chaque page en trois tailles. Les écrans clés suffisent, accueil, une page type et le formulaire, à condition que les composants soient pensés pour s'adapter.
Styles et composants : ce qui rend le site maintenable.
Dans Figma, une maquette bien préparée nomme ses styles de texte, ses couleurs et ses composants. À l'intégration, ces noms deviennent les réglages globaux du site : modifier la couleur principale ou la taille des titres se fait alors en un endroit, pour tout le site.
Le mode Dev de Figma facilite le travail de l'intégrateur en exposant les mesures, les couleurs et les espacements. Il ne remplace pas une structure claire : un fichier où chaque bouton est un dessin différent reste long à intégrer, même bien inspecté.
Décider ce que le client modifiera lui-même.
C'est la question qui change le plus la façon d'intégrer. Un texte d'accueil qui ne bougera jamais peut être fixé. Une liste de services, des actualités ou des fiches produits doivent se modifier simplement depuis l'administration, sans toucher à la mise en page.
- Pages types : article, service, réalisation. Elles se construisent une fois et se remplissent ensuite.
- Blocs réutilisables : témoignages, chiffres clés, appels à l'action, insérés où l'on veut.
- Zones verrouillées : en-tête, pied de page, éléments que seul le développeur modifie.
Elementor ou éditeur de blocs ?
Les deux permettent une intégration fidèle. Elementor offre une grande liberté de mise en page au client, l'éditeur de blocs natif de WordPress donne des pages plus légères et plus encadrées. Le choix dépend surtout de ce que le client veut pouvoir changer seul.
Performance et référencement se décident aussi dans la maquette.
Une vidéo plein écran en accueil, des animations à chaque défilement ou des images énormes sont des choix de design qui pèsent sur la vitesse. Les repérer avant l'intégration permet de prévoir des alternatives : image fixe sur mobile, formats modernes, chargement différé.
Côté référencement, la maquette doit faire apparaître un seul titre principal par page et une hiérarchie de sous-titres logique. Si le site remplace un site existant, le plan des adresses et des redirections se prépare en même temps : voir quand et comment refaire son site.
Des maquettes intégrées en conditions réelles.
Un exemple réel
J'ai intégré sous WordPress les maquettes de Homa Games, du Médiateur EDF, de Ridemaster et de Yespark. Dans chaque cas, le gain de temps venait moins de l'outil que de la préparation du fichier : composants nommés et écrans mobiles fournis dès le départ.
Pour faire intégrer votre maquette, voyez la page intégration de maquettes Figma et Adobe XD sous WordPress.
FAQ — Intégrer une maquette sous WordPress.
Peut-on intégrer une maquette Adobe XD comme une maquette Figma ?
Oui. Le principe est le même : écrans, styles, composants et contenus. L'intégrateur a seulement besoin d'un accès au fichier ou d'un lien de partage avec les mesures et les ressources exportables.
Faut-il dessiner toutes les pages en version mobile ?
Non. Les écrans clés suffisent, comme l'accueil, une page type et le formulaire, à condition que les composants soient conçus pour s'adapter. L'intégrateur décline ensuite les autres pages à partir de ces modèles.
Le client pourra-t-il modifier le site après l'intégration ?
Oui, si cela a été prévu. C'est pourquoi la liste des contenus modifiables doit être décidée avant l'intégration : elle détermine la façon dont les pages sont construites dans WordPress.
Sources.
- Figma — Guide du mode Dev — inspection d'une maquette par l'intégrateur
- WordPress — Documentation de l'éditeur de blocs — construction des pages et des blocs
- web.dev — Images adaptatives — poids des images et performance
