Figma et Shopify : créer son thème avec un MCP

Vous pouvez créer ou personnaliser un thème Shopify à partir d’une maquette Figma avec un assistant IA connecté par MCP. Le flux « Figma to Shopify » peut éviter l’achat d’un thème payant, mais le travail de développement reste nécessaire, ainsi que l’intégration et les tests.

Le connecteur transmet la maquette à l’assistant, qui propose du code : c’est le principe du design to code, ou conversion du design en code. Il faut ensuite adapter ce code au thème Shopify, aux produits, aux réglages et au fonctionnement de votre boutique.

Avant de choisir un outil, distinguons ce que Figma transmet, ce que l’IA produit et ce que Shopify attend.

Points clés

• Le MCP Figma transmet à un assistant le contexte d’une maquette. L’assistant peut proposer du code, mais il faut l’adapter au thème Shopify et le tester.
• Dawn constitue une base gratuite pour une boutique classique. Un thème sur mesure convient lorsque le parcours d’achat demande une organisation difficile à obtenir avec une base existante.
• Commencez par une section précise et indiquez les contraintes du thème, les fichiers modifiables et les réglages attendus dans l’éditeur Shopify.
• Vérifiez le responsive, l’accessibilité, les données produits, les performances et la maintenance avant de publier.

Comment relier Figma et Shopify avec un MCP ?

L’API Figma donne accès aux données du design

Une API est une interface qui permet à un logiciel de communiquer avec un autre. Selon les autorisations accordées, l’API Figma donne accès aux fichiers et à leurs éléments.

Ces données décrivent une maquette : composants, styles, dimensions et organisation des éléments. Elles ne fournissent pas les règles commerciales de votre boutique Shopify.

Une carte produit dessinée dans Figma peut afficher un prix et un bouton. Elle ne précise pas forcément comment gérer une variante indisponible, une promotion ou l’ajout au panier.

Le MCP transmet du contexte à l’assistant

MCP signifie Model Context Protocol. Ce protocole permet à un assistant IA d’utiliser des outils externes et leurs données.

Le Figma MCP Server, ou serveur MCP de Figma (MCP server en anglais), transmet un contexte structuré : composants, variantes, propriétés et variables de design. Les design tokens, ou valeurs de référence, décrivent par exemple les couleurs et les espacements.

Cursor, GitHub Copilot et Claude Code peuvent exploiter ce contexte et les design tokens pour proposer du code. Le MCP transmet des données, mais ne transforme pas à lui seul une maquette en thème prêt à publier. Shopify attend ensuite un thème compatible avec son architecture et ses données.

Quel serveur MCP Figma choisir ?

Tous les connecteurs ne récupèrent pas les informations de la même manière. Certains privilégient le contexte destiné au développement. D’autres permettent aussi de modifier le canevas Figma.

Voici les différences utiles pour votre projet.

Pour travailler sur un thème Shopify, nous privilégions d’abord une connexion Figma MCP qui transmet fidèlement le design sélectionné. La capacité à dessiner dans Figma devient utile si vous souhaitez aussi modifier la maquette avec l’agent.

Figma UI MCP fonctionne sans clé API Figma. Son plugin communique avec un serveur local sur localhost:38451, par long polling, une méthode qui garde une requête en attente jusqu’à l’arrivée d’informations. Il nécessite Figma Desktop. Gardez l’application ouverte pendant les échanges.

Pour diagnostiquer la connexion, vérifiez que le plugin communique bien avec le serveur via localhost.

Son README décrit cinq outils : figma_status, figma_write, figma_read, figma_docs et figma_rules. Ils couvrent l’état de la connexion, l’écriture, la lecture, la documentation et les règles d’utilisation. figma_write permet notamment de dessiner avec JavaScript.

Framelink utilise une autre voie : l’API REST, une interface accessible par requêtes web, avec un jeton d’accès. Ce jeton doit rester confidentiel.

Le choix du MCP server dépend aussi des permissions que vous acceptez d’accorder.

Faut-il partir de Dawn ou créer un thème sur mesure ?

Personnaliser un thème existant pour conserver une base

Dawn est le thème de référence gratuit de Shopify. Il convient aux besoins classiques d’une boutique : catalogue, fiches produits, collections et panier.

Pour comparer les options, les recherches comme « Shopify theme » (thème Shopify) font aussi apparaître des modèles payants, à choisir selon les besoins du projet.

Vous pouvez conserver les fonctionnalités de Dawn et adapter les éléments qui portent votre identité : présentation, typographie, blocs éditoriaux et organisation des pages.

Cette approche réduit le travail de développement et conserve les mécanismes déjà présents dans le thème. En revanche, vos modifications doivent respecter sa structure pour faciliter les futures mises à jour.

Développer sur mesure lorsque l’expérience le justifie

Un thème entièrement personnalisé est pertinent lorsque votre parcours d’achat exige une organisation difficile à obtenir avec une base existante.

Cette option demande de construire davantage de composants et de prévoir leur maintenance sur Shopify. L’assistant IA peut accélérer certaines tâches, mais la responsabilité technique reste la même.

Les constructeurs de pages sans code, ou page builders, constituent une autre option. Instant, PageFly, GemPages et Replo permettent de créer des pages sans développer chaque section.

Le choix dépend aussi de votre organisation commerciale : souhaitez-vous gérer les pages vous-même ou faire évoluer un thème avec un développeur ? Nos conseils Shopify pour les entrepreneurs accompagnent ces choix de lancement et de développement.

Préparer le travail entre Figma et l’assistant IA

Donner accès à un périmètre compréhensible

Commencez par un élément précis de la maquette. Une section de collection est plus facile à analyser qu’une page complète avec navigation, produits, animations et formulaires.

Le contexte doit montrer le rendu attendu et les comportements nécessaires. Que devient le bloc sur un écran étroit ? Que se passe-t-il sans image ? Le texte peut-il occuper plusieurs lignes ?

Figma Dev Mode facilite la lecture des propriétés CSS, des espacements et des ressources graphiques. Les valeurs affichées dans Dev Mode restent à interpréter pour produire un résultat adapté au navigateur.

Donner à l’agent les contraintes du thème

Dans Cursor ou VS Code avec un assistant compatible, la connexion MCP apporte le contexte Figma. Le projet fournit une autre référence : ses fichiers existants.

Le guide officiel du serveur MCP documente son utilisation avec les assistants. Une fois le contexte accessible, précisez le résultat attendu.

Demandez une section en Liquid, compatible avec le thème, avec des réglages modifiables et des composants existants. L’assistant doit suivre les conventions Liquid du projet. Liquid est le langage de modèles utilisé par Shopify pour afficher des données dans les pages.

Précisez aussi les fichiers que l’agent peut modifier. Si le projet tourne en local, indiquez où consulter l’aperçu, par exemple sur localhost. Une adaptation visuelle ne doit pas déclencher une réécriture du panier.

Une section de collection : que doit produire l’IA ?

Respecter l’architecture Shopify 2.0

Les thèmes Shopify 2.0 reposent sur plusieurs éléments complémentaires. Les sections sont des fichiers .liquid contenant notamment un schéma JSON qui décrit leurs réglages.

Dans Shopify 2.0, les modèles JSON organisent les sections d’une page, tandis que config/settings_schema.json définit les réglages globaux du thème. Les snippets sont des fragments Liquid réutilisables.

Cette architecture des thèmes Shopify permet au marchand de modifier des contenus sans reprendre chaque fichier de code.

Votre demande doit préserver cette capacité. Une section fidèle à Figma mais impossible à gérer dans l’éditeur Shopify crée une dépendance inutile.

Relier la présentation aux vrais produits

Pour adapter une grille de produits à votre maquette Shopify, partez de la section de collection mise en avant de Dawn, dans sections/featured-collection.liquid.

Une demande utile serait :

« Adapte cette section au cadre Figma sélectionné. Conserve la collection choisie dans l’éditeur, les cartes produit existantes et les réglages nécessaires au marchand. »

Le code Liquid doit récupérer le titre avec product.title, le lien avec product.url et le prix avec un formatage adapté.

L’assistant doit aussi conserver la gestion des produits indisponibles et des images manquantes. Les textes de démonstration de la maquette ne doivent pas devenir des informations commerciales figées.

Quelles vérifications avant la publication ?

Tester le responsive et l’accessibilité

Le responsive désigne l’adaptation de la page aux différentes tailles d’écran. Une comparaison avec Figma ne suffit pas : le navigateur affiche de vrais textes, des produits et des contenus variables.

Testez les titres longs, les menus, les images et les boutons sur mobile. Parcourez aussi tout le parcours d’achat : sélection d’une variante, ajout au panier et paiement.

Le thème ne donne pas une liberté totale sur le paiement Shopify. Vérifiez la continuité du parcours sans supposer que la maquette contrôle toutes les étapes.

Pour l’accessibilité, testez la navigation au clavier, les contrastes et la clarté des intitulés. Un bouton discret peut être difficile à repérer ou à utiliser.

Contrôler les données et les performances

Les données Shopify doivent rester la référence pour les prix, les variantes, la disponibilité, les collections et les promotions. Un agent peut produire un affichage convaincant tout en oubliant une condition commerciale.

Testez les changements de variante, les remises et les articles épuisés. Vérifiez aussi que les réglages restent utilisables dans l’éditeur de thème.

Côté performances, surveillez le poids des images, les scripts ajoutés, le code Liquid chargé et les déplacements de contenu pendant le chargement. Lighthouse aide à analyser les pages. Theme Check repère les erreurs et les problèmes dans les fichiers Liquid et JSON du thème.

Prévoir la maintenance dès la première section

Un thème généré avec l’IA reste un logiciel à maintenir. Il évolue avec votre catalogue, vos applications et vos besoins commerciaux.

Conservez les modifications dans Git, un outil de suivi des versions du code. Vous pourrez comprendre ce qui a changé et revenir à une version précédente si nécessaire.

Documentez les réglages, les composants réutilisés et les dépendances. Si une nouvelle section utilise un script particulier, son rôle doit être identifiable.

Prévoyez aussi qui reprendra le développement. Vous devez pouvoir modifier une collection, remplacer une image ou ajuster un texte sans dépendre d’une nouvelle conversation avec l’agent.

Pour les évolutions suivantes, transmettez les mêmes contraintes et les mêmes conventions. Cela limite les solutions différentes pour un besoin identique.

La maintenabilité compte autant que la fidélité visuelle. Un thème facile à faire évoluer accompagne votre activité. Un ensemble de sections isolées devient rapidement difficile à gérer.

Questions fréquentes

Que fait le MCP Figma pour Shopify ?

Il transmet à un assistant IA des données structurées sur une maquette, comme ses composants, ses variantes et ses variables de design. L’assistant peut proposer du code, mais celui-ci doit être adapté au thème Shopify et testé.

Faut-il créer un thème Shopify sur mesure ?

Pas forcément. Dawn convient aux besoins classiques et permet de conserver des fonctionnalités déjà présentes, tandis qu’un thème sur mesure demande davantage de développement et de maintenance.

Que faut-il préciser à l’assistant IA ?

Indiquez la section Figma à adapter, les conventions Liquid du projet, les composants existants et les réglages que le marchand doit pouvoir modifier. Précisez aussi les fichiers que l’agent peut toucher et où consulter l’aperçu local.

Que vérifier avant de publier le thème ?

Testez les pages sur mobile, les textes longs, les images, les variantes, l’ajout au panier et le paiement. Vérifiez aussi l’accessibilité, les données commerciales, les performances et les fichiers du thème avec Theme Check.

Vous proposez une formation pour tout cela ? C’est compliqué !

Figma, un serveur MCP et un assistant IA facilitent le passage de la maquette au code sur Shopify, sans supprimer les exigences techniques. Pour aider les entrepreneurs Shopify ou professionnels du e-commerce à maitriser ces sujets, nous avons construit un programme Shopify Advanced CRO qui transmet toutes ces compétences.

Conditions de participation : avoir déjà acquis un bon niveau sur Shopify.

Pour vous inscrire contactez-nous par email sur contact@merci-ecommerce.fr ou par téléphone.