MCP

Figwright: MCP Figma bidireccional gratis, lee el diseño y escribe el lienzo

Para quien quiere que Claude Code, Cursor o Codex lean un diseño Figma y escriban el resultado de vuelta al lienzo; hay que importar el plugin en la app de escritorio y primero conectar el WebSocket local al proceso MCP.

Official source · Figwright

Install

npx -y @figwright/mcp@latest

Para quién

Si quieres que un agente de IA haga más que «mirar» Figma — conectar el plugin oficial por un relé WebSocket local, leer diseños y escribir el lienzo — este MCP bidireccional gratis encaja. Apunta a Claude Code, Cursor, Codex y cualquier cliente MCP. Hay 113 herramientas de lectura, escritura y grounding, así que un agente puede implementar desde un diseño y también construir en el lienzo. Corre en el tramo gratis de Figma, a diferencia del Dev Mode MCP oficial que pide asiento de pago. Encaja con colaboración de diseño local. No encaja llamar herramientas de escritura sin escritorio o con el plugin desconectado, ni tratar las 113 herramientas no nombradas como una API conocida. El resumen dice que los datos se quedan en esta máquina; leer archivos y escribir el lienzo siguen siendo una frontera de privacidad local, no «sin lecturas locales».

Primer intento en 3 minutos

Confirma primero un cliente MCP, Figma de escritorio y Node.js 20.19+ o 22.12+. El texto oficial dice que Node 18/21 y 22.0–22.11 no están soportados; el servidor lo tira npx por separado y esa versión puede diferir del Node de build del proyecto. El tramo gratis basta, pero importar el plugin necesita la app de escritorio. La configuración principal del cliente es:

npx -y @figwright/mcp@latest

No hace falta instalación global. Tras arrancar, importa el plugin en Figma de escritorio según el repo y confirma que el relé WebSocket local está conectado. Haz primero una lectura de bajo riesgo: elige una herramienta de solo lectura o grounding de la lista del cliente e inspecciona la selección o la estructura de página. La evidencia no nombra las 113 herramientas; si faltan, llama la lista y no inventes una API de capas. La señal de éxito es una estructura de diseño devuelta, no un lienzo reescrito. Debes ver una lectura correcta antes de escribir el lienzo. El opcional npx skills add awdr74100/figwright/skills no es la ruta principal y el skill exige MCP ya conectado. Repositorio: https://github.com/awdr74100/figwright

Casos de uso

Caso 1: implementar desde el diseño. Con el plugin conectado, usa herramientas de lectura/grounding para entender la estructura framework-aware y producir código en esta máquina. El título dice que el diseño puede volverse código framework-aware. La evidencia no escribe qué nombres de framework admite; si faltan, sigue la estructura que devuelva el cliente y no inventes un formato de exportación.

Caso 2: escribir el resultado de vuelta al lienzo. Cuando el agente deba construir en Figma o devolver código, usa herramientas de escritura de lienzo. Esto cambia el archivo de diseño y tiene efectos secundarios: confirma primero que el archivo actual es una copia desechable o el que quieres cambiar, luego ejecuta. La evidencia solo garantiza bidireccional, no solo lectura; no hay paso de deshacer. Si falla, usa el historial de Figma; no inventes un comando undo.

Límites de uso

Sin escritorio no se importa el plugin y el relé no conecta. No fuerces una versión de Node no soportada. Los 113 nombres de herramienta no están publicados; no los inventes. Escribir cambia el lienzo; no escribas en lote antes de una lectura correcta. Los límites de pago del Dev Mode MCP oficial no aplican a Figwright, pero Figwright tampoco sustituye un asiento oficial de Figma. El paquete de skill es un extra y no reemplaza @figwright/mcp. No asumas que el agente no ve tus archivos de diseño. El primer intento solo usa npx -y @figwright/mcp@latest; el éxito es una devolución de estructura de solo lectura.