Figwright : MCP Figma bidirectionnel gratuit, lit le design et écrit le canevas

Pour qui

Si vous voulez qu'un agent IA fasse plus que « regarder » Figma — se connecter au plugin officiel via un relais WebSocket local, lire le design et écrire le canevas — ce MCP bidirectionnel gratuit convient. Il vise Claude Code, Cursor, Codex et tout client MCP. Il y a 113 outils couvrant lecture, écriture et grounding, donc un agent peut implémenter depuis un design et aussi construire sur le canevas. Il tourne sur l'offre gratuite Figma, contrairement au Dev Mode MCP officiel qui exige un siège payant. Il convient à la collaboration design locale. Il ne convient pas à appeler des outils d'écriture sans bureau ou plugin déconnecté, ni à traiter les 113 outils non nommés comme une API connue. Le résumé dit que les données restent sur cette machine ; lire des fichiers et écrire le canevas restent une frontière de confidentialité locale, pas « aucune lecture locale ».

Premier essai en 3 minutes

Confirmez d'abord un client MCP, Figma bureau, et Node.js 20.19+ ou 22.12+. Le texte officiel dit que Node 18/21 et 22.0–22.11 ne sont pas pris en charge ; le serveur est tiré à part par npx, version pouvant différer du Node de build du projet. L'offre gratuite suffit, mais l'import du plugin exige l'app bureau. La configuration principale du client est :

npx -y @figwright/mcp@latest

Pas d'installation globale. Après démarrage, importer le plugin dans Figma bureau selon le dépôt, et confirmer que le relais WebSocket local est connecté. D'abord une lecture à faible risque : choisir un outil lecture seule ou grounding dans la liste du client et inspecter la sélection ou la structure de page. Les preuves ne nomment pas les 113 outils ; s'ils manquent, appeler la liste, ne pas inventer d'API de calques. Le signal de succès est une structure de design renvoyée, pas un canevas réécrit. Il faut voir une lecture réussie avant d'écrire le canevas. npx skills add awdr74100/figwright/skills optionnel n'est pas le chemin principal ; le skill exige un MCP déjà connecté. Dépôt : https://github.com/awdr74100/figwright

Cas d'usage

Cas 1 : implémenter depuis le design. Plugin connecté, utiliser les outils lecture/grounding pour comprendre la structure framework-aware, puis produire du code sur cette machine. Le titre dit qu'un design peut devenir du code framework-aware. Les preuves n'écrivent pas quels noms de framework sont pris en charge ; s'ils manquent, suivre la structure renvoyée par le client, ne pas inventer de format d'export.

Cas 2 : réécrire le résultat sur le canevas. Pour qu'un agent construise dans Figma ou renvoie du code, utiliser les outils d'écriture canevas. Cela change le fichier design et a des effets de bord : confirmer d'abord que le fichier actuel est une copie jetable ou celui que vous voulez vraiment changer, puis exécuter. Les preuves ne garantissent que le bidirectionnel, pas la lecture seule ; pas d'étape d'annulation. En cas d'échec, s'appuyer sur l'historique Figma, ne pas inventer de commande undo.

Limites d'usage

Sans app bureau, pas d'import de plugin, donc pas de relais. Ne pas forcer une version Node non prise en charge. Les 113 noms d'outils ne sont pas publiés ; ne pas les inventer. L'écriture change le canevas ; ne pas écrire en lot avant une lecture réussie. Les limites payantes du Dev Mode MCP officiel ne s'appliquent pas à Figwright, mais Figwright n'est pas non plus un substitut de siège Figma officiel. Le pack skill est un ajout et ne remplace pas @figwright/mcp. Ne supposez pas que l'agent ne voit pas vos fichiers de design. Le premier essai n'utilise que npx -y @figwright/mcp@latest ; le succès est un retour de structure en lecture seule.