Figma MCP es un conector que permite a un asistente de AI leer directamente tus archivos de Figma: marcos, capas, componentes, espaciado, estilos de color y texto, en lugar de adivinar a partir de una captura de pantalla que hayas pegado. Está basado en MCP, el Model Context Protocol, un estándar abierto que Anthropic publicó para que los asistentes puedan comunicarse con herramientas externas mediante una interfaz común. Figma ofrece un servidor oficial, y la comunidad ha creado varios más. La configuración consiste en añadir un pequeño bloque de configuración a tu cliente de AI y autorizar el acceso a tu cuenta de Figma, lo que puede llevar entre diez minutos y una tarde, según lo cómodo que te resulte editar archivos de configuración. Si esa frase ya te suena a una tarde perdida, más adelante en esta página encontrarás una opción más sencilla.
¿Qué es realmente Figma MCP?
MCP es un estándar, no un producto. Define cómo un asistente de AI solicita información a un sistema externo y cómo ese sistema responde. Cualquier sistema que lo implemente se denomina servidor MCP, y un servidor no es más que un adaptador: por un lado se comunica con Figma y, por el otro, con Claude en un formato que Claude ya entiende.
Por eso, «Figma MCP» es una forma abreviada de referirse a un servidor que se sitúa entre tu asistente y tus archivos de diseño. Cuando está en funcionamiento, Claude deja de trabajar a partir de una imagen plana y empieza a trabajar con la estructura. Puede ver que el botón es una instancia de componente, que el relleno es de 16 y no de 15, y que el estilo de texto se llama cuerpo/normal en lugar de «el gris más pequeño».
Existe un servidor oficial de Figma orientado a los flujos de trabajo de diseño a código, y hay implementaciones de la comunidad que leen archivos mediante la API pública de Figma. Se diferencian en cómo te autenticas y en cuánto del archivo exponen, pero desde el punto de vista de Claude todos funcionan igual: como una lista de herramientas que puede usar cuando tu solicitud las necesita. Si quieres conocer primero el contexto general, escribimos una explicación en lenguaje sencillo sobre qué es MCP y por qué existe.
¿Qué permite hacer realmente Figma MCP a Claude?
Lo interesante no es que «Claude pueda ver tu archivo», sino el conjunto de tareas que dejan de hacerse manualmente.
- Convierte un marco seleccionado en código front-end que coincida con el archivo. No una aproximación superficial a partir de una imagen, sino el espaciado, la jerarquía y los nombres de componentes tomados directamente del diseño. Aun así, tienes que revisarlo. Dejas de volver a escribir valores.
- Extrae tokens de diseño de un archivo. Estilos de color, escala tipográfica, pasos de espaciado y radios de esquina, exportados como variables en el formato que use tu base de código.
- Audita un archivo según su propio sistema. Qué capas usan un valor hexadecimal codificado en lugar de un estilo, qué marcos usan valores de espaciado que no aparecen en ningún otro sitio y qué componentes se desvincularon y editaron discretamente.
- Redacta notas y especificaciones para la entrega. Estados, casos límite, estados vacíos y qué ocurre en caso de error, descritos a partir de los marcos reales en lugar de basarse en la memoria.
- Revisa el texto de UX en contexto. Cada cadena de texto de un flujo, leída en orden, para que puedas detectar las tres palabras diferentes que se usan para la misma acción.
- Responde preguntas sobre un archivo grande. Dónde se usa este componente, qué cambió en esta rama, qué pantallas todavía hacen referencia al logotipo antiguo.
El patrón subyacente a todos ellos es el siguiente: Figma MCP elimina el paso de copiar y pegar entre el diseño y todo lo que viene después. Eso es realmente útil, y también constituye todo el beneficio. No toma decisiones de diseño.
¿Cómo se configura un servidor MCP de Figma?
Los detalles varían según el servidor y el cliente, y ambos cambian con suficiente frecuencia como para que copiar un comando de una publicación de blog sea una buena forma de perder veinte minutos. La estructura del proceso es estable, así que aprende esa estructura.
- Elige un servidor. Empieza con el oficial de Figma si tu objetivo es pasar del diseño al código dentro de un editor. Consulta los servidores de la comunidad si necesitas acceder a los archivos en modo lectura a través de la API sin tener abierta la aplicación de escritorio. Ambos aparecen en los directorios públicos de servidores MCP.
- Resuelve el acceso. Las herramientas oficiales suelen funcionar con tu sesión iniciada en Figma, mediante un ajuste que debes activar dentro de la aplicación. Los servidores de la comunidad normalmente requieren un token de acceso personal que generas en la configuración de tu cuenta de Figma. Trata ese token como una contraseña: puede leer todo lo que tú puedes leer.
- Añade el servidor a la configuración MCP de tu cliente. Claude Desktop, Claude Code y la mayoría de los editores compatibles con AI leen un archivo de configuración que enumera los servidores que quieres tener disponibles, junto con el comando para iniciar cada uno y las credenciales que necesite. Solo tienes que añadir una entrada.
- Reinicia el cliente. Casi todos los informes de «no funciona» corresponden a un cliente que nunca se reinició después de cambiar la configuración.
- Verifica la conexión. Tu cliente mostrará los servidores conectados y las herramientas que ofrece cada uno. Si aparece la lista de herramientas, la conexión está lista.
- Dale algo que pueda examinar. La mayoría de los flujos de trabajo esperan que selecciones un marco en Figma o pegues un enlace al mismo y luego hagas tu pregunta. Claude solo lee lo que le indicas.
Hay dos cosas que suelen confundir a la gente en el primer intento. Los servidores que funcionan a través de la aplicación de escritorio de Figma necesitan que la aplicación esté abierta y que el archivo esté cargado, así que no ocurrirá nada si la cerraste. Además, la mayoría de los servidores están orientados a la lectura: son mucho mejores para decirte qué hay en un archivo que para modificarlo.
¿Cuáles son las limitaciones reales de Figma MCP?
Conviene saberlo antes de pasar la tarde en ello.
- Necesitas un cliente compatible con MCP. Es decir, una aplicación de escritorio, un editor o una terminal. Una ventana de chat del navegador con un plan gratuito no sirve.
- En la práctica, el acceso es todo o nada. Un token personal normalmente puede acceder a todos los archivos a los que tiene acceso tu cuenta. Si tu cuenta pertenece a una organización compartida, tenlo en cuenta antes de generar uno.
- Se rompe cuando las cosas cambian. Las API cambian, los servidores se reescriben y una actualización del cliente modifica el formato de configuración. Cualquier cosa que construyas sobre esto necesita mantenimiento ocasional.
- Los archivos grandes consumen contexto. Una pantalla con 400 capas produce muchos datos estructurados. Señalar un solo frame funciona bien. Señalar un archivo entero a menudo no.
- Los archivos desordenados producen resultados desordenados. Si tus capas se llaman Frame 217 y la mitad de los estilos están desvinculados, el código generado hereda ese desorden. El conector lee lo que hay; no lo organiza.
- Da acceso, no criterio. Ahora Claude puede ver tu diseño. Que evalúe ese diseño como un diseñador sénior es una cuestión completamente distinta, y esa es la que vale la pena resolver a continuación.
¿Y si MCP requiere más configuración de la que quieres?
Esta es la distinción que ahorra mucho tiempo. MCP controla a qué puede acceder Claude. No dice nada sobre lo bien que trabaja Claude una vez que llega allí. Son dos problemas distintos, y la mayoría de los equipos de diseño tienen el segundo, no el primero.
Si lo que realmente quieres es que Claude haga una crítica de diseño adecuada, un plan de investigación o una API de componentes que un arquitecto de sistemas de diseño aprobaría, no necesitas ningún conector. Necesitas que Claude trabaje como ese especialista. Para eso sirve un archivo de Skill: un breve documento Markdown que subes una vez y que le da a Claude un rol, un método y un estándar de resultados. La instalación tarda unos tres minutos y funciona en cualquier plan, con o sin MCP. Varios de los Skills de diseño de abajo son actualmente gratuitos, así que puedes probar la idea antes de gastar nada.
El diseñador, no el conector
Gratis
este skill
Flujos, estados, jerarquía y lógica de interacción, analizados como lo haría un diseñador de producto: para qué sirve la pantalla, qué falta y qué hace el usuario cuando algo sale mal. Pega una pantalla o descríbela; no necesitas ningún conector.
Ver Denholm →La combinación que mejor funciona en la práctica: MCP para leer y un Skill para pensar. Claude extrae los valores reales de tu archivo y luego les aplica un método en lugar de improvisar.
Para la parte de tokens y componentes
$29
este skill
Nombres de tokens, API de componentes, estructura de variantes y las reglas para decidir cuándo algo merece un lugar en el sistema. Exactamente la capa de criterio que se sitúa sobre los datos sin procesar que te entrega un conector de Figma.
Ver Vashti →Antes de diseñar nada
Gratis
este skill
Planes de investigación, guiones de entrevistas no inductivas y un método para convertir transcripciones en hallazgos sobre los que un equipo pueda actuar. También cuesta $29, lo que lo convierte en una forma económica de comprobar si los Skills cambian realmente tus resultados.
Ver Melisande →Hay 32 Skills gratuitos en total en la colección gratuita, y el conjunto de diseño más amplio se encuentra en Skills creativos, de contenido y diseño. Si quieres que te expliquemos la instalación paso a paso, consulta cómo instalar un skill de Claude.
En resumen:
Figma MCP conecta Claude con tus archivos de diseño reales para que trabaje a partir de la estructura en lugar de capturas de pantalla. La configuración merece la pena si generas código o extraes tokens con regularidad. No cambia nada sobre la calidad del criterio de diseño de Claude, que es lo que corrige un archivo de skill: empieza con Denholm - Diseñador de productos UX/UI, $29, y añade Vashti - Arquitecta de sistemas de diseño por $29 cuando los tokens y los componentes se conviertan en el problema.
Figma MCP: preguntas frecuentes
¿Figma MCP es gratis?
El protocolo es un estándar abierto y, por lo general, los propios servidores se pueden instalar gratis. Necesitas una cuenta de Figma con acceso a los archivos y un cliente de AI compatible con MCP. Algunos clientes de AI requieren un plan de pago para las funciones que hacen que esto valga la pena, así que el coste se sitúa en ese lado y no en el conector.
¿Puede Claude editar mi archivo de Figma mediante MCP?
Supón que no, a menos que el servidor específico que hayas elegido indique lo contrario. La mayoría de estos conectores están diseñados para leer: extraer estructura, valores y contenido. El acceso de escritura es más raro y frágil, y deberías probarlo en un archivo duplicado en lugar de hacerlo sobre trabajo activo.
¿Funciona Figma MCP con Claude Code?
Sí, en el sentido de que Claude Code admite servidores MCP en general, que es precisamente la razón por la que es una combinación popular para convertir diseños en código. El frame se lee por un lado y el componente se escribe por el otro, en la misma sesión. Lo mismo se aplica a Claude Desktop y a la mayoría de los editores compatibles con AI.
¿Sigo necesitando un skill de diseño si tengo configurado Figma MCP?
Responden preguntas diferentes. MCP decide qué puede ver Claude. Un skill decide cómo trabaja Claude con lo que ve, por lo que ambos se complementan en lugar de competir. Comparamos directamente ambos enfoques en Claude Skills frente a MCP.
