MCP Bridge

Un serveur MCP et un plugin Figma qui se parlent, pour que Claude Code puisse construire dans Figma pendant que tu discutes avec lui. Tu décris un wireframe, il le pose. Tu lui dis "mets-moi une palette de couleurs primaires", il crée les variables. Tu veux une sitemap, il la dessine avec les connecteurs qui vont bien.

Pourquoi

J'ai passé beaucoup trop de temps à faire des allers-retours entre Claude et Figma. Claude me cadre un layout, je lis, je bascule sur Figma, je pose un rectangle, je pose un texte, je groupe, je refais trois fois parce que je me suis trompé sur la hiérarchie. Chaque itération prend dix minutes alors que l'idée est déjà claire en tête.

MCP Bridge est né d'une frustration simple : si Claude sait quoi faire, pourquoi je suis celui qui clique ? J'ai écrit un serveur MCP qui expose l'API Plugin de Figma côté LLM, et un petit plugin côté Figma Desktop qui ouvre une WebSocket vers ce serveur. À partir de là, Claude passe ses commandes en JSON, le plugin les exécute, et le fichier Figma bouge en direct sous tes yeux.

Ce que ça fait

Plus de trente outils regroupés en huit familles, construits au fur et à mesure de mes besoins réels sur les projets clients.

Création de formes — create_rectangle, create_ellipse, create_line, create_vector, create_svg, create_text. Les briques de base, celles qu'on utilise partout.

Structure et composants — create_frame, create_button, create_instance. Créer des conteneurs, poser des boutons déjà stylés, instancier des composants qui existent déjà dans la bibliothèque du fichier.

Wireframing dédié — create_wireframe_page, create_wireframe_sitemap, create_sitemap, create_connector. C'est la famille que j'utilise le plus. Elle me permet de cadrer une arbo complète d'application en une seule commande Claude, avec les pages liées par des connecteurs clairs.

Manipulation d'éléments — update_element, delete_element, duplicate_element, move_to_parent, reorder_element, group_elements, ungroup_elements, align_elements. Toute l'ergonomie de base d'un éditeur graphique, exposée au LLM.

Design system — create_color_variable, create_variable_collection, list_components. Brancher la sortie d'une conversation design sur les variables réelles du fichier, et découvrir ce que la bibliothèque contient déjà avant de réinventer.

Inspection et lecture — get_element, get_page_elements, get_colors, get_selection, get_screenshot. Aussi important que la création : Claude peut regarder le fichier, pas juste y poser des choses. Il peut me dire "ton bouton primaire utilise un vert qui ne matche pas ta variable, tu veux que je corrige ?".

Import / export — import_image, export_element. Entrer de la matière, en sortir une fois le travail fait.

Batch operations — create_batch. Regrouper dix, vingt, cinquante opérations dans un seul appel pour ne pas saturer la WebSocket ni faire clignoter Figma à chaque frame. C'est ce qui rend l'outil utilisable sur un wireframe dense.

Comment c'est branché

Deux morceaux :

1. Un serveur MCP en TypeScript qui tourne en local, démarré par Claude Code au lancement. Il expose les outils comme n'importe quel MCP et gère la connexion WebSocket côté serveur.
2. Un plugin Figma Desktop (toujours en TypeScript) qui affiche une petite interface "MCP Bridge" dans le panneau latéral, se connecte au serveur sur 127.0.0.1:9001, et relaye les commandes reçues vers l'API Plugin de Figma en temps réel.

Quand tu cliques sur "Connect" dans le plugin, la WebSocket s'ouvre, et à partir de là tout ce que Claude tente de créer est exécuté dans le fichier où tu te trouves. Option "Auto-connect on startup" pour ne plus avoir à y penser.

Statut

Le projet n'est pas encore sur GitHub. Il tourne en local sur ma machine depuis plusieurs semaines, je l'utilise au quotidien pour prototyper des interfaces avec Claude avant de finir à la main dans Figma. Je publierai le code et le plugin quand l'API sera stable et que la documentation sera à la hauteur. D'ici là, si ça t'intrigue ou que tu veux discuter de l'archi, écris-moi : je peux te montrer comment c'est foutu et partager le code en l'état.