MCP de Figma: qué hace y cómo configurarlo

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. Se basa en MCP, el Model Context Protocol, un estándar abierto que Anthropic lanzó 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 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 responde ese sistema. 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. Una vez que 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 más pequeño y gris».

Hay un servidor oficial de Figma orientado a flujos de trabajo de diseño a código, y existen implementaciones comunitarias que leen archivos mediante la API pública de Figma. Se diferencian en la forma de autenticarte y en cuánto del archivo exponen, pero desde el punto de vista de Claude todas funcionan igual: como una lista de herramientas que puede utilizar cuando tu solicitud las necesita. Si quieres conocer primero el contexto más amplio, escribimos una explicación sencilla 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 de frontend que coincida con el archivo. No una aproximación burda a partir de una imagen, sino el espaciado, la jerarquía y los nombres de los componentes tomados directamente del diseño. Aun así, tú lo revisas. Dejas de volver a escribir valores.
• 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 con respecto a 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 cuando hay un 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 siguen haciendo referencia al logotipo antiguo.

El principio 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 es todo el beneficio que aporta. 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 entrada de blog sea una buena forma de perder veinte minutos. La estructura del proceso es estable, así que aprende esa estructura.

1. Elige un servidor. Empieza con el oficial de Figma si tu objetivo es convertir diseños en código dentro de un editor. Consulta los servidores de la comunidad si necesitas acceder a archivos en modo lectura a través de la API sin que la aplicación de escritorio esté abierta. Ambos aparecen en los directorios públicos de servidores MCP.
2. Resuelve el acceso. Las herramientas oficiales suelen funcionar con tu sesión de Figma iniciada, 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.
3. Añade el servidor a la configuración de 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, con el comando para iniciar cada uno y las credenciales que necesite. Añades una entrada.
4. 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.
5. 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á configurada.
6. Dale algo que pueda examinar. La mayoría de los flujos de trabajo esperan que selecciones un marco en Figma o pegues un enlace a él y luego hagas tu pregunta. Claude solo lee aquello que le señalas.

Hay dos cosas que suelen hacer tropezar a la gente en el primer intento. Los servidores que funcionan mediante la aplicación de escritorio de Figma necesitan que la aplicación esté abierta y que el archivo esté cargado, así que no pasará 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 dedicarle toda la tarde.

• 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 llega a todos los archivos a los que puede acceder tu cuenta. Si tu cuenta pertenece a una organización compartida, tenlo en cuenta antes de generar uno.
• Se rompe cuando cambian las cosas. Las API cambian, se reescriben servidores y una actualización del cliente modifica el formato de configuración. Todo lo que construyas sobre esto necesitará 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.
• Proporciona acceso, no criterio. Claude ahora puede ver tu diseño. Que evalúe ese diseño como un diseñador sénior es una cuestión completamente distinta, y es la que merece la pena resolver a continuación.

¿Y si MCP requiere más configuración de la que quieres?

Esta es la diferencia 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. Eso es lo que hace un archivo de Skill: un breve documento Markdown que subes una vez y que proporciona a Claude un único rol, un único método y un estándar de resultados definido. La instalación tarda unos tres minutos y funciona con cualquier plan, con o sin MCP. Varios de los Skills de diseño que aparecen a continuación son gratuitos actualmente, así que puedes probar la idea antes de gastar dinero.

El diseñador, no el conector

Denholm - Skill de AI para diseño de productos UX/UI

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 razonar. 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

Vashti - Skill de AI para arquitectura de sistemas de diseño

$14.99

este Skill

Nomenclatura 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 proporciona un conector de Figma.

Ver Vashti →

Antes de diseñar nada

Melisande - Skill de AI para investigación UX

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 es gratis ahora mismo, lo que lo convierte en una forma económica de comprobar si los Skills cambian realmente tus resultados.

Ver Melisande →

Hay 32 Skills gratis 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 expliquen la instalación paso a paso, consulta cómo instalar un Skill de Claude.

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. Lo que necesitas es 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 recae 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 elegiste 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 menos común y más frágil, y deberías probarlo en un archivo duplicado en lugar de hacerlo en un trabajo activo.

¿Figma MCP funciona con Claude Code?

Sí, en el sentido de que Claude Code admite servidores MCP en general, precisamente por lo que es una combinación popular para trabajar del diseño al código. En un lado se lee el marco y, en el otro, se escribe el componente, 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 Figma MCP configurado?

Responden a preguntas diferentes. MCP determina qué puede ver Claude. Un Skill determina cómo trabaja Claude con lo que ve, por eso ambos se complementan en lugar de competir. Comparamos directamente los dos enfoques en Claude Skills vs MCP.