Figma vers Elementor : il n’y a pas de bouton, il y a une méthode

« Figma vers Elementor » : la recherche revient sans cesse, et la réponse attendue est un bouton. Importer, convertir, publier. Je n’en utilise aucun. Ma dernière campagne, une page de treize sections et 11 109 pixels de haut, est passée de Figma au site entre le 28 août et le 15 septembre 2026, avec Claude Code et une poignée de MCP. Voici la méthode, les outils, et la question à poser avant la première ligne de code.

La question qui décide de tout : qui modifiera la page ?

Avant d’ouvrir Figma, je pose une question au projet. Pas « comment reproduire cette maquette ? ». Plutôt : « qui touchera cette page après moi, et pour quoi faire ? » Deux réponses possibles, deux architectures.

La campagne était une page de sensibilisation pour une association de santé publique. Une page longue, un contenu fixe, et côté client une personne qui change des textes et des images, jamais la structure. Le gabarit PHP s’imposait. Un argument technique a fini de trancher : les Dynamic Tags d’Elementor ne savent pas parcourir un répéteur ACF. Or la maquette en était pleine : listes, cartes, témoignages.

Le site magazine, lui, sera composé par des rédacteurs, sans une ligne de code. Ils insèrent des blocs, les dupliquent, les réordonnent. Là, seuls des widgets natifs tiennent. Même Figma en entrée, sortie opposée.

Lire la maquette : deux MCP Figma, deux rôles

Claude Code ne voit pas Figma. Il lui faut un pont. J’en utilise deux, et ils ne se remplacent pas.

Le connecteur officiel : la structure et les images

get_design_context renvoie du React avec des classes Tailwind. Pour un thème WordPress, ce code ne sert à rien tel quel : je n’en garde que la structure, les textes, les couleurs et les espacements. Sa vraie valeur est ailleurs. Il donne la graisse de chaque segment de texte. Sur un paragraphe, il a montré d’un coup que deux noms propres étaient en Bold et tout le reste en SemiBold, là où le plugin aurait exigé un relevé complet.

download_assets livre les images sources, pas seulement le rendu : un fichier de 3 452 x 1 786 pixels là où l’export du nœud en fait 812 x 457. Le recadrage de Figma se reconstruit à partir de l’original. Détail qui compte : les URL expirent en quelques minutes. On télécharge tout de suite.

Le plugin : les mesures exactes

get_node_info donne les couleurs, les coordonnées absolues et les caractères exacts d’un nœud. scan_text_nodes est le seul moyen de retrouver un texte dont on ignore l’emplacement : 87 textes sur la frame française, un résultat de 58 Ko. Je le fais lire par un script, pas par le modèle. Seul défaut du plugin : un canal WebSocket partagé, un appel à la fois, des délais d’attente fréquents. Quand il cale, je me rabats sur le connecteur officiel.

Trois pièges de lecture

• Les identifiants changent. Trois jeux d’identifiants depuis le début du projet, un par re-collage de la maquette. Je retrouve les nœuds par leur nom ou leur texte, jamais par un id noté la semaine précédente.
• Les gros résultats débordent. get_metadata sur la page entière pèse 311 000 caractères. Le résultat part dans un fichier, un script Python en tire l’inventaire, et je n’appelle get_design_context que sur les nœuds utiles.
• La boîte d’un texte n’est pas celle de l’élément. Un item de liste mesurait 448,16 px dans Figma : la largeur du texte seul. Avec le retrait de la puce, la bonne valeur était 475,4. Un mot passait à la ligne, et une seule rangée de pixels le trahissait.

Construire : une section à la fois, sans initiative de design

Une règle ouvre chaque brief : aucune initiative de design. Tout vient du Figma. Ce qui manque, une photo, un lien, un texte absent, devient un contenu provisoire clairement marqué et une question ouverte. Jamais un texte qui pourrait passer pour définitif.

Côté WordPress, la page Elementor n’est qu’une enveloppe. Elle contient un seul widget, le shortcode [prevention_page], qui assemble les sections dans un ordre fixe. ACF stocke le contenu, et chaque section a son interrupteur Afficher/Masquer.

Chaque section suit ensuite le même circuit :

Figma (frame 1440 px)
   │  MCP officiel : structure, graisses, images sources
   │  plugin       : couleurs, coordonnées, textes
   ▼
Plan de section (.md)            relevés, pièges, questions ouvertes
   ▼
section-*.php + champs ACF + bloc CSS
   ▼
Script de contenu idempotent     wp eval-file script.php <post_id>
   ▼
Capture headless à 1440 px   →   rangées de pixels contre le rendu Figma
   ▼
Écart ≤ 4 px ?    non : corriger    oui : commit

Claude Code a écrit le PHP, le CSS et les scripts. Les arbitrages, la relecture des plans et chaque validation visuelle sont restés les miens. Le script de contenu est idempotent : relancé dix fois, il donne dix fois le même résultat, et il signale les contenus encore provisoires.

Mesurer, pas regarder

L’œil ment. Un titre en Anton se rend dans une boîte de 74,4 px là où Figma en compte 79. Aligner les boîtes donne un résultat faux. Aligner l’encre donne le bon.

Je compare donc le rendu Figma et une capture du site à 1440 px avec le même script Python (PIL, numpy) : un masque par couleur, les rangées de pixels contiguës regroupées, et on obtient le haut de chaque ligne et l’étendue de chaque boîte. Tolérance : 4 px sur les lignes et les boîtes, 4 px sur la hauteur de la section. Tout écart supérieur est noté avec sa cause.

La capture vient d’un Chrome sans fenêtre, piloté par le protocole DevTools. Une contrainte s’est imposée en route : comparer des pixels exige le même navigateur. Une référence prise dans une version de Chrome contre des captures d’une autre version différait partout, à cause du rendu des polices.

Cohabiter avec Elementor sans qu’il reprenne la main

Un gabarit PHP dans un site Elementor hérite quand même d’Elementor. Trois pièges, tous rencontrés :

• Le kit gagne les conflits. Le kit global impose police et couleur à tous les titres avec un sélecteur de spécificité 0-1-1. Une règle de classe simple (0-1-0) perd. La parade : préfixer par le conteneur racine de la page (0-2-0). Aucun !important.
• L’ancien CSS reste chargé. Elementor charge elementor-post-<ID>.css selon l’identifiant de la page, pas selon son mode de rendu : 46 déclarations d’une ancienne mise en page restaient actives. Un wp_dequeue_style ciblé les retire sans toucher au header ni au footer.
• Les polices ne suivent pas. Elementor sert les Google Fonts en local, page par page. Un gabarit PHP n’en profite plus : le thème auto-héberge les siennes.

Écrire dans Elementor : quel MCP choisir ?

Sur le site magazine, les widgets natifs s’imposent, et l’écriture passe par un MCP. J’ai comparé ce qui existe aujourd’hui en interrogeant chaque serveur, pas en lisant sa page de présentation. Mesures du 25 septembre 2026, sur Elementor 4.2.0 et Elementor Pro 4.1.2.

EMCP Tools : l’outil de travail

137 outils actifs en version 3.17.1 : widgets classiques et atomiques, conteneurs, classes globales, variables, modèles, champs ACF, médias, historique avec retour arrière. Les 34 outils à risque (écriture de fichiers, écriture SQL, plugins, utilisateurs) sont désactivés par défaut. On les active un par un, jamais en bloc.

J’étais resté en 3.0.0. La mise à jour vers la 3.17.1 n’était pas du confort : entre les deux, des corrections de perte de données. update-page-settings remplaçait tout l’objet de réglages, et une retouche d’une seule clé sur le kit effaçait couleurs et typographies personnalisées. Des widgets tiers disparaissaient en silence à la sauvegarde. Sauvegarde du plugin et de la base avant, contrôle après : 51 pages Elementor, zéro JSON invalide.

Un réflexe à garder : relire après chaque création. Pendant la validation, add-container acceptait css_classes sans erreur et ne l’enregistrait pas. get-element-settings montre ce qui est vraiment stocké.

Le MCP officiel : cinq outils, pour l’instant

L’annonce d’Elementor promet des pages complètes, le design system, les parties de thème, des widgets sur mesure. Dans le code d’Elementor 4.2.0, le module existe déjà, derrière un réglage expérimental caché et inactif par défaut :

wp option update elementor_experiment-e_wp_abilities_api active

Une fois activé, il expose cinq outils : list-pages, get-page-structure, update-page-settings, create-page, get-globals. Il ne vise que les éléments atomiques de la V4. Le site magazine compte 51 pages Elementor, dont 11 seulement contiennent des éléments atomiques. Les capacités annoncées demandent en plus Angie, l’agent d’Elementor, que je n’ai pas installé. Je le garde activé pour suivre son évolution. J’ai raconté ailleurs pourquoi la V4 n’est pas encore mon terrain.

Le MCP Adapter : pourquoi les deux cohabitent

EMCP et le module d’Elementor s’enregistrent tous deux auprès du même MCP Adapter de WordPress. Chacun obtient sa route, sans conflit : 137 et 5 outils répondent en parallèle. Une condition : EMCP 3.17.1 minimum, qui corrige une découverte OAuth où il répondait à la place d’un second plugin MCP.

{
  "mcpServers": {
    "emcp-tools": {
      "type": "http",
      "url": "http://site.test/wp-json/mcp/emcp-tools-server",
      "headers": { "Authorization": "Basic <base64(user:application-password)>" }
    },
    "elementor-official": {
      "type": "http",
      "url": "http://site.test/wp-json/elementor/mcp",
      "headers": { "Authorization": "Basic <base64(user:application-password)>" }
    }
  }
}

WP-CLI : le repli

Sans MCP, on écrit le JSON _elementor_data directement, comme Elementor le fait. C’est ainsi que j’ai modifié le header mobile du site de la campagne :

update_metadata('post', $id, '_elementor_data', wp_slash(wp_json_encode($data)));
delete_post_meta($id, '_elementor_css');
delete_post_meta($id, '_elementor_element_cache');
\Elementor\Plugin::$instance->files_manager->clear_cache();

Ça marche, sans aucune validation. Quatre règles apprises sur des sites sans MCP :

• Sauvegarder avec mysql -N -r - sans -r, le client double les antislashs et le JSON devient invalide.
• _elementor_page_settings est du PHP sérialisé - lecture en hexadécimal, puis update_post_meta(), sinon corruption.
• Une page créée par script exige quatre métas - _elementor_edit_mode, _elementor_template_type, _elementor_version et le modèle de page. Sans elles, la page s’affiche vide, sans erreur.
• Les URL sont stockées échappées - un search-replace doit aussi chercher https:\/\/.

Le site magazine : la méthode, avant la maquette

La maquette du site magazine n’est pas encore arrivée. Le site tourne sur un design system provisoire : couleurs et typographies globales d’Elementor, variables CSS. Voici l’ordre que j’appliquerai, repris de la campagne et adapté aux widgets natifs :

1. Inventorier la maquette avec get_metadata, parsé par script, avant tout appel coûteux.
2. Reporter couleurs et typographies dans les réglages globaux d’Elementor, jamais widget par widget.
3. Construire les blocs un par un sur une page atelier, via EMCP.
4. Relire chaque création avec get-element-settings.
5. Mesurer à 1440 px contre le rendu Figma, même script, même tolérance.
6. Valider chaque bloc moi-même avant d’en faire un modèle réutilisable avec save-as-template.

La différence avec la campagne tient en une ligne : le résultat final n’est plus une page, c’est une bibliothèque de blocs que les rédacteurs assemblent sans moi.

Résultats

Les limites

• Le gabarit PHP enferme le client. Il change des textes, pas la structure. Une nouvelle section, c’est du code. Un choix assumé, pas un défaut caché.
• Le MCP officiel est jeune. Cinq outils, les éléments atomiques seulement, derrière un réglage caché. À réévaluer à chaque version.
• EMCP est un plugin tiers. Dix-sept versions mineures depuis la 3.0.0. Chaque mise à jour exige une sauvegarde et la lecture du journal des changements.
• La mesure ne juge pas le goût. Un écart nul dit que la page est fidèle, pas qu’elle est bonne. La validation visuelle reste humaine.

Le bilan

• La première question n’est pas technique. Qui modifiera la page décide de l’architecture, avant même d’ouvrir Figma.
• Lire et écrire sont deux métiers. Deux MCP pour lire la maquette, un MCP pour écrire dans Elementor, WP-CLI quand aucun ne suffit.
• Interroger le serveur, pas la page de présentation. 137 outils d’un côté, 5 de l’autre : aucune annonce ne le disait.
• Mesurer bat regarder. Des rangées de pixels, une tolérance, et chaque écart expliqué.
• Ce n’est pas un bouton magique. C’est une méthode, des outils et la discipline de vérifier. Le site magazine repartira de là.