Configura el servidor MCP de Figma en Claude Code con el plugin o un único comando manual, autentícate en dos clics y revisa qué herramientas de lectura y escritura expone. Incluye las cinco skills, Code Connect, los límites de uso por tipo de asiento y soluciones a los fallos más comunes.
Pega un enlace de Figma en Claude Code y podrá leer el diseño del frame: la maquetación, los espaciados, los colores y los componentes, antes de escribir una sola línea de código. Esa es toda la propuesta del servidor MCP de Figma, y la configuración requiere dos comandos y un clic en el navegador. Lo demás consiste en elegir bien las herramientas, mantenerse dentro de los límites de uso y darle al agente el contexto suficiente para dejar de inventarse sus propios botones.
Este artículo recorre la configuración exacta, las herramientas que expone el servidor, las skills que Figma incluye para los flujos de escritura, una rutina de frame a código que puedes copiar y los límites que más confunden. Los detalles provienen de la documentación para desarrolladores de Figma tal como está en octubre de 2026, así que consulta esas páginas si un comando se ve distinto en tu equipo.
El servidor MCP de Figma es un puente. En un lado está tu archivo de Figma: capas, variables, componentes, tableros de FigJam y recursos de Make. En el otro está un cliente MCP, en este caso Claude Code. Entre ambos, un conjunto de herramientas permite al agente hacer preguntas sobre un diseño y, con los permisos adecuados, modificarlo.
La documentación de Figma describe cinco funciones. El servidor puede crear y modificar contenido nativo de Figma en el lienzo, convertir los frames seleccionados en código, extraer el contexto de diseño como variables, componentes y datos de maquetación, recuperar recursos de los archivos de Make y mantener el código alineado con tu sistema de diseño mediante Code Connect.
El cambio real está en pasar de las capturas de pantalla a la estructura. Una captura le dice a un modelo cómo es un botón. El contexto de diseño le dice que el botón es una instancia de un componente, que usa una variable de espaciado con nombre y que está en una fila de autolayout con un espacio fijo. El código escrito a partir de esa estructura se acerca mucho más a algo que puedes fusionar.
Figma ofrece dos versiones del servidor, y la elección importa porque algunas herramientas solo existen en una de ellas.
| Servidor remoto | Servidor de escritorio | |
|---|---|---|
| Conexión | Endpoint alojado por Figma, https://mcp.figma.com/mcp | Local, a través de la aplicación de escritorio de Figma |
| Requiere la aplicación de escritorio | No | Sí |
| Selección de herramientas | Conjunto más amplio, incluidas todas las herramientas exclusivas del remoto | Conjunto más reducido |
| Ideal para | La mayoría de las personas | Despliegues de Figma for Government y configuraciones solo locales |
Figma considera que el servidor remoto es la mejor opción para la mayoría de los usuarios, y es el que usa el resto de este artículo.
Necesitas un archivo de Figma Design, Make o FigJam, permiso de visualización o edición sobre él y, idealmente, un asiento Full o Dev. Los demás tipos de asiento también se conectan, pero con una cuota mensual mucho menor (las cifras están en la sección de límites más abajo). Solo pueden conectarse los clientes MCP que aparecen en el catálogo MCP de Figma, y Claude Code tiene su propia página de configuración allí.
Hay dos caminos y ambos llegan al mismo punto. Elige el plugin si también quieres las skills de Figma, y el comando manual si prefieres una configuración mínima.
claude plugin install figma@claude-plugins-official
Figma recomienda esta opción. El plugin incluye la configuración del servidor MCP y las Agent Skills para los flujos habituales, así que una sola instalación te da el servidor y las instrucciones que hacen que las herramientas de escritura se comporten bien.
claude mcp add --transport http figma https://mcp.figma.com/mcp
Sin una marca de alcance, el servidor se registra solo para el proyecto en el que te encuentras. Si lo quieres disponible en todas partes, añade --scope user:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
El alcance de usuario significa que no tienes que repetir la instalación en cada repositorio.
El servidor usa un inicio de sesión en el navegador, así que no se pega nada en un archivo de configuración.
/mcp.Authentication successful. Connected to figma.Ejecuta /mcp una vez más para confirmar que el servidor aparece como conectado. Después pide a Claude que llame a la herramienta whoami. Devuelve el usuario autenticado y los planes, lo que te indica de inmediato si tu asiento tiene una cuota utilizable.
💡 Consejo: Si las herramientas desaparecen durante la sesión,
/mcpes el primer lugar donde mirar. Muestra el estado de la conexión y te permite volver a autenticarte sin editar archivos.
La referencia de herramientas de Figma incluye decenas de ellas. Usarás unas pocas a diario, así que empieza por esas e ignora el resto hasta que una tarea las necesite.
| Herramienta | Qué hace | Solo remoto |
|---|---|---|
get_design_context | Extrae el contexto de diseño de una capa o selección | No |
get_metadata | Devuelve un esquema XML disperso de una selección | No |
get_screenshot | Captura una captura de pantalla de una selección | No |
get_variable_defs | Recupera las variables y estilos usados en una selección | No |
get_code_connect_map | Devuelve la asignación del ID de nodo al componente de código | No |
get_code_connect_suggestions | Sugiere asignaciones de componente a código | No |
get_context_for_code_connect | Proporciona metadatos de componentes para plantillas | Sí |
search_design_system | Busca componentes, variables y estilos en las bibliotecas | Sí |
get_libraries | Lista las bibliotecas de diseño suscritas y disponibles | Sí |
get_figjam | Convierte diagramas de FigJam a XML | No |
get_motion_context | Extrae datos de animación | No |
download_assets | Descarga exportaciones e imágenes fuente originales | Sí |
Empieza por get_design_context. Es el motor detrás de "construye este frame". Combínala con get_screenshot para que el agente tenga un objetivo visual, y con get_variable_defs para que los colores y los espaciados provengan de tus tokens en lugar de valores hexadecimales adivinados. Cuando un frame es enorme, get_metadata ofrece un esquema disperso que te sirve para mapear la página antes de extraer el detalle capa por capa.
| Herramienta | Qué hace | Solo remoto |
|---|---|---|
use_figma | Herramienta de uso general para crear, editar e inspeccionar | Sí |
generate_figma_design | Genera capas de diseño a partir de interfaces | Sí |
generate_diagram | Construye un diagrama de FigJam a partir de Mermaid | Sí |
create_new_file | Crea un archivo vacío de Design, FigJam o Slides | Sí |
generate_image | Genera una imagen ráster descargable | Sí |
upload_assets | Sube imágenes a un archivo de Figma | Sí |
add_code_connect_map | Asigna un ID de nodo de Figma a un componente de código | No |
send_code_connect_mappings | Confirma las asignaciones de componentes sugeridas | No |
El servidor también incluye herramientas para shaders y plugins generativos, además de seis herramientas weave_* que ejecutan flujos de Weave basados en créditos. La mayor parte del trabajo de front-end nunca las toca. Vale la pena conocer por su nombre un prompt: create_design_system_rules, que genera un archivo de reglas para que el contexto del agente coincida con tu base de código.
Las herramientas de escritura son potentes y fáciles de usar mal. La documentación de Figma enumera skills que el agente necesita para los flujos correspondientes, y la instalación del plugin las trae consigo. Si elegiste la ruta manual, instala por separado las skills de Figma para tu cliente.
| Skill | Se usa para |
|---|---|
figma-use | Flujos de trabajo de Figma Design |
figma-use-figjam | Operaciones de FigJam |
figma-use-slides | Figma Slides |
figma-shaders | Crear y actualizar shaders |
figma-generative-plugins | Crear y actualizar plugins generativos |
Si tu trabajo consiste sobre todo en leer diseños y escribir código, apenas las notarás. Importan en el momento en que le pides a Claude Code que construya o edite algo dentro de Figma.
Incluso con herramientas perfectas, el agente no conoce tus convenciones. Ejecuta el prompt create_design_system_rules y deja que redacte un archivo de reglas; después recórtalo a lo que tu equipo realmente aplica y guárdalo en CLAUDE.md. Un ejemplo corto:
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
Cuatro líneas como estas eliminan la mayoría de las quejas del tipo "¿por qué ha vuelto a escribir un botón nuevo?".
get_design_context y, normalmente, también a get_screenshot y get_variable_defs.Un prompt que funciona bien:
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
Tras la primera pasada, revisa cuatro cosas en el diff antes de ejecutar nada:
💡 Consejo: Trabaja una sección cada vez. Un frame de página completa genera una montaña de contexto y una montaña de código, y tu cuota de herramientas de lectura se agota más rápido de lo que esperas.
Code Connect es la forma en que Figma sabe que su componente Button es en realidad src/components/ui/Button.tsx. Una vez que existe esa asignación, Claude importa el componente real en lugar de escribir marcado nuevo.
Cuatro herramientas gestionan el ciclo. get_code_connect_map lee las asignaciones existentes. get_code_connect_suggestions propone nuevas, send_code_connect_mappings confirma las que aceptes, y add_code_connect_map escribe una sola asignación directamente. Esta última está exenta de los límites de uso, lo que resulta útil cuando estás asignando una biblioteca completa.
Estas cifras provienen de la página de límites de uso y acceso de Figma en el momento de redactar este artículo. Figma puede cambiarlas, así que confírmalas en la página antes de planificar un despliegue en el equipo.
| Tipo de asiento | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | Hasta 20 al mes | Hasta 20 al mes | Hasta 20 al mes | Hasta 20 al mes |
| Dev, Full | Hasta 200 al día, 10 por minuto | Hasta 200 al día, 15 por minuto | Hasta 600 al día, 20 por minuto | No especificado en la tabla |
Los límites se aplican a las herramientas que leen datos de Figma. add_code_connect_map, create_new_file y whoami están exentas.
El asiento determina la experiencia. Una persona diseñadora con asiento View puede conectarse y explorar, pero el flujo de trabajo diario corresponde a las personas desarrolladoras con asiento Full o Dev. Si solo dos personas de tu equipo tienen esos asientos, que sean ellas quienes generen el código, y que el resto revise las pull requests.
💡 Consejo: Si Claude llama a tres herramientas de lectura por frame, las 200 llamadas diarias se agotan rápido. Pide una sección y deja que
get_metadataelija la capa correcta antes de extraer el contexto completo.
Las herramientas no aparecen. Ejecuta /mcp. Si figma aparece en la lista pero sin conectar, selecciónalo y vuelve a autenticarte. Si no aparece en absoluto, repite el comando de instalación y reinicia Claude Code.
La salida ignora tus componentes. Es un problema de contexto, no de herramientas. Añade el archivo de reglas a CLAUDE.md, crea asignaciones de Code Connect para tus diez componentes principales e indica al prompt que reutilice los componentes existentes antes de escribir otros nuevos.
Llegas al límite a mitad de tarea. Reduce el alcance, revisa tu asiento con whoami y pasa el trabajo pesado a un asiento Full o Dev. Un asiento View o Collab te da unas 20 llamadas al mes, lo que sirve para una demo, no para un flujo de trabajo.
La mayoría de los frames de Figma incluyen rectángulos grises de marcador de posición donde debería ir la fotografía, y el código generado hereda esa falta de vida. Rellénalos con imágenes que parezcan reales antes de la entrega y la construcción tendrá aspecto de terminada desde la primera ejecución.
En PicassoIA, el catálogo de texto a imagen incluye Seedream 5 Pro, GPT Image 2, Flux 2 Pro, Nano Banana Pro y P Image. Genera una foto principal y colócala en el frame a mano, o pídele a Claude que la incorpore con upload_assets. Figma tiene su propia herramienta generate_image, pero un modelo de imagen especializado te da más control sobre la lente, la luz y la composición.
Para el movimiento, convierte la misma imagen fija en un clip corto con un modelo de video como Seedance 2.5 Lite, Wan 3, Veo 3.1 Lite, LTX 2.5 Fast o Kling v3 Video. Revisa la página de cada modelo para ver su opción de entrada de imagen. Un bucle de cinco segundos detrás de un titular suele ser todo lo que necesita una página de aterrizaje.
La misma plataforma también puede encargarse de pensar. Claude Sonnet 5 funciona en PicassoIA como modelo de texto que lee imágenes, lo que lo convierte en una forma rápida de redactar el archivo de reglas a partir de una captura de tu sistema de diseño.
low, desactiva el razonamiento para obtener la respuesta más rápida y barata. Usa medium o high cuando la salida deba razonar sobre muchos componentes, y xhigh o max para trabajos complicados con varios archivos.💡 Consejo: Un razonamiento más profundo está disponible con Claude Fable 5 y Claude Opus 4.7 en la misma plataforma.
Ya tienes el ciclo completo. Conecta el servidor, añade un archivo de reglas, construye una sección cada vez y asigna tus componentes con Code Connect para que el resultado siga mejorando.
La parte que es fácil pasar por alto son las imágenes. Una interfaz terminada necesita fotos reales y un poco de movimiento, y Picasso IA te ofrece los modelos para ambas cosas en un mismo lugar. Elige un modelo de imagen, describe la toma principal que quieres y mira cómo cambia el frame que acabas de construir. Después prueba uno de los modelos de video con esa misma foto y compara las dos versiones lado a lado. Abre PicassoIA y crea tu primera imagen principal hoy mismo.
Elige tu idioma
