Connexion MCP
AI to Figma : envoyez l'UI générée par Claude ou Cursor dans Figma
Connectez votre outil d'IA à HTML to Frames via MCP. Les pages qu'il construit arrivent dans votre plugin ouvert sous forme de calques modifiables, avec Auto Layout.
- Fonctionne avec Claude Code, Claude Desktop, Cursor et d'autres clients MCP
- Trois outils : import_html, import_url, import_status
- Token stocké uniquement sous forme d'empreinte
Bientôt sur la Figma Community
Passer de l'IA à Figma est un problème de workflow plus que de génération. Des outils comme Claude et Cursor peuvent produire en quelques minutes une landing page ou un tableau de bord convaincant en HTML, mais ce résultat vit dans un fichier de code ou un aperçu de navigateur. Pour le relire en équipe, le combiner avec un design system existant ou continuer à itérer visuellement, il doit se trouver dans Figma, sous forme de calques, pas de capture d'écran.
HTML to Frames, le plugin Figma créé par EUREKA!, propose une connexion MCP précisément pour cela. Ouvrez l'onglet AI du plugin, copiez le token et l'extrait de configuration qu'il affiche, et ajoutez-le à Claude Code, Claude Desktop, Cursor ou tout client MCP. Votre outil d'IA dispose alors de trois outils : import_html pour envoyer le HTML qu'il a écrit (jusqu'à 2 MB), import_url pour importer une page à partir de son adresse, et import_status pour suivre une tâche.
Lorsque l'IA appelle l'un d'eux, la page arrive dans votre plugin HTML to Frames ouvert et est importée avec votre propre plan et vos réglages. Vous obtenez le même résultat qu'avec n'importe quel autre import : texte modifiable, vecteurs, images, Auto Layout vérifié et, avec Pro, variables, styles et composants.
C'est utile pour les designers qui prototypent avec l'IA et veulent affiner le résultat à la main, pour les développeurs qui génèrent de l'UI et doivent la transmettre au design, et pour les équipes qui veulent que les brouillons de l'IA s'alignent sur leurs styles existants.
Le guide De l'UI générée par IA à Figma avec MCP détaille une session complète. Pour voir ce que préserve la conversion, lisez HTML to Figma, et pour la gestion du token et des données, consultez la page sécurité.
Connecter un outil d'IA à Figma
- 01
Ouvrez l'onglet AI du plugin
Lancez HTML to Frames dans Figma et passez à l'onglet AI pour obtenir votre token de connexion.
- 02
Copiez la configuration dans votre outil
Collez la configuration prête à l'emploi dans Claude Code, Claude Desktop, Cursor ou un autre client MCP.
- 03
Demandez à l'IA d'envoyer une page
L'IA appelle import_html avec le HTML qu'elle a écrit, ou import_url avec une adresse.
- 04
Relisez-la dans Figma
Gardez le plugin ouvert : la page y arrive et est importée sous forme de calques modifiables.
Ce que la connexion MCP apporte à votre IA
Compatible avec votre outil d'IA
Claude Code, Claude Desktop, Cursor ou tout client qui parle MCP.
import_html
Envoyez le HTML généré par l'IA, jusqu'à 2 MB, sans avoir à l'enregistrer ni à l'héberger.
import_url
Laissez l'IA importer une page publique à partir de son adresse, par exemple une référence qu'elle a trouvée.
import_status
L'IA peut vérifier l'état d'un import qu'elle a lancé.
Un résultat aligné sur votre système
Avec Snap sur Pro, les brouillons de l'IA sont liés aux couleurs et styles de texte les plus proches de votre fichier.
Token haché
Le token de connexion n'est stocké que sous forme d'empreinte, et les pages attendent en mémoire 30 minutes au maximum.
Configuration MCP pour Claude Code, Claude Desktop et Cursor
Le Model Context Protocol (MCP) est un standard ouvert qui permet aux outils d'IA d'appeler des outils externes. HTML to Frames expose son import sous forme de serveur MCP : tout client compatible MCP peut envoyer des pages vers Figma.
Obtenir les informations de connexion
Ouvrez HTML to Frames dans Figma et allez dans l'onglet AI. Il affiche un token personnel et une configuration prête à copier pour votre client. Inutile d'écrire la configuration à la main.
Claude Code
Ajoutez le serveur avec la configuration de l'onglet AI, puis demandez à Claude d'envoyer dans Figma la page qu'il est en train de construire. Claude appellera import_html avec le contenu du fichier.
Claude Desktop
Ajoutez le serveur à la configuration MCP de Claude Desktop à l'aide de l'extrait fourni, puis redémarrez l'application si elle ne prend pas en compte le changement. Les outils HTML to Frames apparaissent alors dans la conversation.
Cursor
Ajoutez le serveur dans les réglages MCP de Cursor avec les mêmes informations. L'agent peut alors importer une page générée ou une URL pendant que vous travaillez dans l'éditeur.
Autres clients MCP
Tout client qui prend en charge les serveurs MCP peut se connecter avec le même token. Notez que les connecteurs web de claude.ai, qui utilisent OAuth, ne sont pas encore pris en charge.
Les étapes exactes pour chaque client sont tenues à jour dans la documentation.
Transformer les brouillons de l'IA en design maintenable
Le HTML généré par l'IA a tendance à être incohérent dans les détails : un bleu légèrement différent sur chaque bouton, trois tailles de police presque identiques, des espacements qui varient de quelques pixels. Importé tel quel, cela donne un fichier de design désordonné. HTML to Frames vous donne des outils pour faire le ménage dès l'import.
- Auto Layout vérifié. Les mises en page Flexbox et Grid du CSS généré deviennent des frames Auto Layout là où chaque enfant reste à 2 px près : le brouillon est facile à réorganiser.
- Styles & variables (Pro). Les couleurs utilisées à plusieurs reprises et les propriétés personnalisées CSS deviennent des variables, et des styles de texte et d'ombre sont créés.
- Snap to my file's styles (Pro). Les valeurs qui ne correspondent pas exactement à votre système s'alignent sur vos couleurs et styles de texte existants les plus proches : les brouillons de l'IA arrivent alignés sur votre système.
- Composants (Pro). Les cartes, boutons et éléments de liste répétés deviennent des composants avec instances.
Une boucle pratique ressemble à ceci : demandez une mise en page à l'IA, envoyez-la dans Figma, ajustez-la visuellement, puis décrivez les changements à l'IA pour l'itération suivante. Chaque tour arrive sous forme de nouveaux frames : vous conservez un historique des versions sur le canvas.
Comme l'import utilise votre propre plan, les mêmes limites s'appliquent que pour n'importe quel import. Voir les tarifs pour le détail.
Confidentialité et limites de la connexion IA
Connecter un outil d'IA à un fichier de design soulève des questions légitimes sur ce qui est partagé. Voici comment la connexion MCP est gérée.
Token
Votre token de connexion n'est stocké de notre côté que sous forme d'empreinte. Traitez-le comme un mot de passe et ne le placez pas dans des dépôts partagés : c'est lui qui permet à un client d'envoyer des pages à votre plugin.
Pages en transit
Les pages envoyées par l'IA attendent en mémoire 30 minutes au maximum que votre plugin ouvert les récupère. Les imports d'URL sont rendus dans le même navigateur isolé et cloisonné que tous les autres imports, et les résultats ne sont jamais écrits sur disque.
Votre fichier Figma
L'IA ne peut pas lire votre fichier Figma via cette connexion. Le plugin lui-même ne lit pas le contenu de votre fichier ; il écrit de nouveaux calques et ne lit que les métadonnées de ses propres frames.
Limites
import_htmlaccepte du HTML jusqu'à 2 MB.- Le plugin doit être ouvert dans Figma pour que les pages arrivent.
- Chaque page compte pour un import sur votre plan.
- Les connecteurs web de claude.ai (OAuth) ne sont pas encore pris en charge.
La page sécurité détaille l'ensemble des durées de conservation des données.
Questions fréquentes
Claude Code, Claude Desktop, Cursor et tout autre client qui prend en charge les serveurs MCP. Vous les connectez depuis l'onglet AI du plugin, qui vous donne un token et une configuration prête à copier. Les connecteurs web de claude.ai, qui utilisent OAuth, ne sont pas encore pris en charge.
Trois : import_html envoie le HTML écrit par l'IA, jusqu'à 2 MB ; import_url importe une page publique à partir de son adresse ; et import_status permet à l'IA de suivre la progression d'un import. Les pages arrivent dans votre plugin ouvert et sont importées avec vos réglages.
Oui. Les pages envoyées par votre outil d'IA sont livrées à votre plugin HTML to Frames ouvert dans Figma. Elles attendent en mémoire 30 minutes au maximum : si le plugin est brièvement fermé, le rouvrir dans ce délai lui permet de les récupérer.
Non. La connexion MCP permet seulement à l'IA d'envoyer des pages à importer et de suivre leur état. Le plugin lui-même ne lit pas le contenu de votre fichier ; il écrit de nouveaux calques et ne lit que les métadonnées des frames qu'il a créés, comme l'URL source et la largeur.
Aucune tarification séparée ne s'applique. Une page envoyée par l'IA est importée avec votre propre plan et compte pour un import, comme toute autre source. Le plan Free inclut 10 imports par mois, et Pro et Team sont illimités dans la limite d'un usage raisonnable.
Avec Pro, activez Styles & variables et Snap to my file's styles. Les correspondances exactes réutilisent vos variables et styles existants, et les valeurs proches mais non identiques s'alignent sur votre couleur et votre style de texte les plus proches : les pages générées arrivent liées à votre système.
Voir aussi
Arrêtez de redessiner le web.
Collez un lien et obtenez en quelques secondes de vrais calques Figma, modifiables et responsive. Gratuit pour commencer — 10 imports par mois.
Sans carte bancaire. Pro s'achète directement dans Figma.
Bientôt sur la Figma Community