AI to Figma : envoyer l'UI de Claude et Cursor dans Figma (MCP)

Les assistants de code IA peuvent désormais produire en quelques minutes une landing page, un écran de paramètres ou un tableau de bord convaincants. Le problème, c'est l'endroit où atterrit cette UI : dans un éditeur de code ou un aperçu local, loin du fichier Figma où votre équipe relit, annote et affine le design.

Ce guide montre comment combler cet écart avec une connexion AI to Figma. HTML to Frames propose une connexion MCP qui permet à Claude Code, Claude Desktop, Cursor ou tout client MCP d'envoyer des pages directement dans votre plugin Figma ouvert, où elles sont converties en vrais calques modifiables avec Auto Layout.

Ce que « AI to Figma » signifie ici

On appelle « AI to Figma » deux choses très différentes :

1. Une IA qui génère un design dans Figma à partir d'un prompt.
2. Une IA qui écrit du HTML et du CSS, et une passerelle qui convertit ce code en calques Figma.

HTML to Frames fait la seconde. Votre outil d'IA continue de faire ce qu'il fait bien, écrire du code front-end, et le plugin effectue la conversion qu'il réalise déjà pour n'importe quelle page web : frames, textes, vecteurs, images, variables et Auto Layout. Le résultat est de même qualité que l'import d'un site en ligne, car il passe par le même pipeline de capture. Pour une présentation du produit, voir AI to Figma.

Comment fonctionne la connexion MCP

Le Model Context Protocol (MCP) est un moyen standard pour les outils d'IA d'appeler des outils externes. Lorsque vous connectez HTML to Frames en tant que serveur MCP, votre outil d'IA dispose de trois outils :

La page arrive dans votre plugin ouvert dans Figma et est importée avec votre propre plan : les règles habituelles du plan s'appliquent — écrans par import, styles et variables, composants, etc.

Ce que l'outil d'IA reçoit en retour

L'IA ne reçoit pas votre fichier Figma. Elle reçoit une réponse à l'appel d'outil qui confirme que la page a été transmise, et elle peut appeler import_status pour savoir où en est l'import. Le travail de design lui-même se fait dans Figma, dans le plugin, où vous voyez l'écran de résultat avec les frames, les calques, la part d'Auto Layout et les éventuels avertissements. C'est voulu : le plugin ne lit pas le contenu de votre fichier Figma, si bien que rien de votre fichier ne remonte vers l'IA.

Configuration : connecter votre outil d'IA depuis l'onglet AI du plugin

La configuration se fait une seule fois par client IA. Tout commence dans le plugin.

1. Ouvrez HTML to Frames dans Figma et allez dans l'onglet AI.
2. Récupérez votre token. L'onglet AI vous fournit un token de connexion. Traitez-le comme un mot de passe.
3. Choisissez votre client. L'onglet AI affiche une configuration prête à copier pour les clients pris en charge.
4. Collez la configuration dans votre client exactement comme indiqué (détails par client ci-dessous).
5. Redémarrez ou rechargez le client pour qu'il prenne en compte le nouveau serveur MCP.
6. Gardez le plugin ouvert dans Figma pendant que vous travaillez. Les pages sont livrées au plugin ouvert.

Claude Code

Claude Code lit les serveurs MCP dans sa configuration. Copiez la configuration que l'onglet AI fournit pour Claude Code et exécutez-la ou collez-la comme indiqué. Démarrez ensuite une nouvelle session et demandez à Claude de lister ses outils ; vous devriez voir import_html, import_url et import_status.

Claude Desktop

Claude Desktop conserve les serveurs MCP dans son fichier de configuration, que vous pouvez ouvrir depuis les paramètres développeur de l'application. Collez l'extrait de l'onglet AI dans ce fichier, enregistrez, puis redémarrez complètement Claude Desktop. Les outils apparaissent dans le menu des outils d'une nouvelle conversation.

Cursor

Cursor liste les serveurs MCP dans ses paramètres. Ajoutez un nouveau serveur à l'aide de l'extrait de l'onglet AI, enregistrez, et vérifiez que le serveur apparaît comme connecté avec trois outils.

Tout autre client MCP

Si votre outil parle MCP, le même token et la même configuration s'appliquent. Utilisez la configuration générique de l'onglet AI et adaptez-la à la façon dont votre client enregistre les serveurs.

Pas encore pris en charge : les connecteurs web de claude.ai

Les connecteurs web de claude.ai (OAuth) ne sont pas encore pris en charge. Si vous travaillez dans la version navigateur de Claude, générez-y le HTML, enregistrez-le, puis importez-le via la source Local file ou Paste code du plugin. Ou déplacez la tâche vers Claude Code ou Claude Desktop, qui se connectent dès aujourd'hui via MCP.

Confidentialité : ce que deviennent votre token et vos pages

Les workflows d'IA soulèvent des questions légitimes sur le trajet du code et des designs. Voici ce que fait la connexion :

• Votre token de connexion n'est stocké que sous forme d'empreinte. Le service peut le vérifier, mais ne conserve pas le token lui-même.
• Les pages attendent en mémoire 30 minutes au maximum. Si votre plugin ne récupère pas une page dans ce délai, elle disparaît.
• Le rendu a lieu dans un navigateur isolé et cloisonné (sandbox). Le résultat est livré une seule fois, puis supprimé de la mémoire, et jamais écrit sur disque.
• Ni cookies, ni analytics, ni pixels de suivi dans le plugin, l'extension ou le site web.
• Nous ne recevons jamais votre nom ni votre e-mail de la part de Figma ; l'identifiant de compte est dérivé de votre identifiant utilisateur Figma.

Le détail complet figure sur la page sécurité.

Les limites à connaître

• Taille du HTML : import_html accepte jusqu'à 2 MB. Intégrez avec parcimonie les grosses images en base64 ; liez plutôt des images hébergées quand c'est possible.
• URL publiques uniquement pour import_url. Si l'aperçu de l'IA tourne en localhost, demandez à l'IA d'envoyer directement le HTML avec import_html, ou capturez la page en cours d'exécution avec l'extension Chrome, qui gère localhost et les pages avec connexion.
• L'utilisation du plan s'applique. Chaque page compte pour un import sur votre plan. Free offre 10 imports par mois et 1 écran par import ; Pro et Team sont illimités dans la limite d'un usage raisonnable, avec jusqu'à 4 écrans par import. Voir les tarifs.
• Mêmes règles de conversion que pour n'importe quelle page. Les iframes, canvas WebGL et vidéos sans image d'aperçu deviennent une capture de leur bloc. Les transformations skew et 3D ne sont pas encore converties.

Des prompts à essayer

Une fois connecté, vous parlez à l'IA comme d'habitude et lui demandez d'envoyer le résultat dans Figma. Quelques prompts qui fonctionnent bien :

1. « Construis une page de tarifs à trois niveaux en HTML et CSS simples avec Flexbox, puis envoie-la dans Figma avec import_html. »
2. « Reprends l'écran de paramètres que tu viens de construire, mets le CSS en inline et importe-le dans Figma. Ensuite, vérifie import_status. »
3. « Notre site de staging est à cette URL publique. Importe les pages de tarifs et d'inscription dans Figma avec import_url. »
4. « Crée deux variantes de cette section hero, l'une avec un titre aligné à gauche et l'autre centré. Envoie chacune dans Figma dans un import séparé. »
5. « Réécris cette grille de cartes en utilisant des propriétés personnalisées CSS pour les couleurs, puis importe-la pour que les variables soient reprises. »

Orienter les prompts vers un résultat Figma propre

L'IA produit de meilleurs imports quand vous guidez son CSS :

• Demandez du Flexbox et du Grid avec gap plutôt que des marges entre éléments frères. Ils se transposent proprement en Auto Layout ; voir CSS Flexbox et Grid vers Auto Layout.
• Demandez des propriétés personnalisées CSS pour les couleurs. Avec Styles & variables activé (Pro), --brand-primary devient une variable brand/primary.
• Demandez du vrai texte, pas du texte intégré dans des images, pour que chaque titre reste modifiable.
• Demandez une page par import ; les longs documents multi-écrans sont plus difficiles à relire.

La boucle entre design et code

La vraie valeur ne tient pas à un seul import. Elle tient à une boucle où design et code cessent de diverger.

1. Prompt : l'IA construit une première version en code.
2. Import : l'IA l'envoie dans Figma avec import_html ou import_url.
3. Relecture dans Figma : les designers ajustent espacements, typographie, couleurs et mise en page avec des frames Auto Layout, ajoutent des commentaires et explorent des alternatives.
4. Retour des changements : dites à l'IA ce qui a changé, ou collez les valeurs concernées, et laissez-la mettre à jour le code.
5. Re-import pour confirmer que le code correspond désormais, et comparer avec le frame précédent.

À qui cela profite

• Les designers arrêtent de redessiner à la main les prototypes de l'IA et partent de frames modifiables.
• Les développeurs front-end obtiennent une relecture design sur le rendu réel, sans exporter de captures d'écran.
• Les product managers peuvent transformer un prompt en page Figma prête à être relue pour une réunion avec les parties prenantes.
• Les créateurs solo gardent une trace visuelle de chaque itération dans un même fichier.

AI to Figma comparé aux autres voies

Les trois voies du plugin utilisent le même moteur. MCP supprime simplement l'étape de copier-coller et laisse l'IA piloter. L'Auto Layout est vérifié : la position de chaque enfant est contrôlée à 2 px près, et si une mise en page ne tient pas, un plan plus simple est essayé ou le frame conserve ses positions absolues. Le design ne casse jamais. Pour en savoir plus, lisez L'Auto Layout expliqué.

Dépannage

• L'IA indique que l'outil n'est pas disponible. Redémarrez le client après avoir ajouté le serveur, et vérifiez que l'extrait a été collé sans modification.
• L'import n'apparaît jamais. Vérifiez que le plugin est ouvert dans Figma. Les pages attendent jusqu'à 30 minutes : ouvrez le plugin et il les récupérera dans ce délai.
• Le token a été refusé. Générez un nouveau token depuis l'onglet AI et mettez à jour la configuration du client.
• La mise en page semble décalée. Consultez les diagnostics de l'écran de résultat, qui expliquent pourquoi un frame est resté en position absolue, et demandez à l'IA d'utiliser Flexbox ou Grid pour cette section.

Pour commencer

Ouvrez le plugin, allez dans l'onglet AI et connectez un client. Demandez à votre outil d'IA de construire un petit composant et de l'envoyer dans Figma ; vous verrez comment il se comporte avant de vous y fier pour un écran complet. La documentation couvre l'onglet AI, et les fonctionnalités listent tout ce que l'import prend en charge.