Figma

Guía del Servidor MCP de Figma

El servidor MCP de Figma integra Figma directamente en tu flujo de trabajo al proporcionar información y contexto de diseño importantes a los agentes de IA que generan código a partir de archivos de diseño de Figma.

[!NOTE] Se aplican límites de tasa a las herramientas del servidor MCP de Figma que leen datos de Figma. Algunas herramientas, como las que escriben en archivos de Figma, están exentas de los límites de tasa.

Los usuarios del plan Starter o con asientos de Visor o Colaborador en planes de pago estarán limitados a un máximo de 6 llamadas de herramienta por mes.

Los usuarios con un asiento de Desarrollador o Completo en los planes Profesional, Organización o Empresa tienen límites de tasa por minuto, que siguen los mismos límites que el API REST de Figma de Nivel 1. Al igual que con el API REST de Figma, Figma se reserva el derecho de cambiar los límites de tasa.

Para el conjunto completo de documentación del servidor MCP de Figma, consulta nuestra documentación para desarrolladores. Al usar el servidor MCP de Figma y los recursos relacionados (incluidas estas habilidades), aceptas los Términos de Desarrollador de Figma. Estas habilidades están actualmente disponibles como una función Beta.

Características

• Escribir en el lienzo (solo servidor remoto): Crea y modifica contenido nativo de Figma directamente desde tu cliente MCP. Con las habilidades adecuadas, los agentes pueden construir y actualizar marcos, componentes, variables y diseño automático en tus archivos de Figma usando tu sistema de diseño como fuente de verdad.

  Nota: Estamos mejorando rápidamente la forma en que Figma admite agentes de IA. La función de escribir en el lienzo eventualmente será una función de pago basada en uso, pero actualmente está disponible de forma gratuita durante el período beta.

• Generar código desde marcos seleccionados

  Selecciona un marco de Figma y conviértelo en código. Ideal para equipos de producto que construyen nuevos flujos o iteran sobre funciones de aplicaciones.

• Extraer contexto de diseño

  Incorpora variables, componentes y datos de diseño directamente en tu IDE. Esto es especialmente útil para sistemas de diseño y flujos de trabajo basados en componentes.

• Codifica de manera más inteligente con Code Connect

  Mejora la calidad de la salida reutilizando tus componentes reales. Code Connect mantiene tu código generado consistente con tu base de código.

  Aprende más sobre Code Connect →

• Generar diseños de Figma desde páginas web (en implementación)

  Captura, importa o convierte una página web en un diseño de Figma directamente desde tu agente de codificación de IA.

Instalación y Configuración

Conéctate al servidor MCP de Figma

Diferentes clientes MCP requieren configuraciones ligeramente diferentes. Sigue las instrucciones a continuación para tu cliente específico para conectarte al servidor MCP de Figma.

VS Code

1. Usa el atajo ⌘ Shift P para buscar MCP:Add Server.
2. Selecciona HTTP.
3. Pega la URL del servidor https://mcp.figma.com/mcp en la barra de búsqueda. Luego presiona Enter.
4. Cuando se te solicite un ID de servidor, ingresa figma.
5. Selecciona si deseas agregar este servidor globalmente o solo para el espacio de trabajo actual. Una vez confirmado, verás una configuración como esta en tu archivo mcp.json:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Abre la barra de herramientas de chat usando ⌥⌘B o ⌃⌘I y cambia al modo Agente.
7. Con el chat abierto, escribe #get_design_context para confirmar que las herramientas del servidor MCP de Figma están disponibles. Si no se listan herramientas, reinicia VS Code.

[!NOTE] Debes tener GitHub Copilot habilitado en tu cuenta para usar MCP en VS Code.

Para más información, consulta la documentación oficial de VS Code.

Cursor

La forma recomendada de configurar el servidor MCP de Figma en Cursor es instalando el Plugin de Figma, que incluye la configuración del servidor MCP así como Habilidades de Agente para flujos de trabajo comunes.

Instala el plugin escribiendo el siguiente comando en el chat de agente de Cursor:

/add-plugin figma

El plugin incluye:

• Configuración del servidor MCP para el servidor MCP de Figma
• Habilidades para implementar diseños, conectar componentes mediante Code Connect y crear reglas de sistema de diseño
• Reglas para el manejo adecuado de recursos desde el servidor MCP de Figma

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

La forma recomendada de configurar el servidor MCP de Figma en Claude Code es instalando el Plugin de Figma, que incluye la configuración del servidor MCP así como Habilidades de Agente para flujos de trabajo comunes.

Ejecuta el siguiente comando para instalar el plugin desde el mercado oficial de plugins de Anthropic.

claude plugin install figma@claude-plugins-official

Aprende más sobre los Plugins de Claude Code y las Habilidades de Agente de Anthropic.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Instala la extensión de Figma para Gemini CLI ejecutando el siguiente comando:

gemini extensions install https://github.com/figma/mcp-server-guide

Una vez instalado, autentícate con Figma ejecutando gemini y luego ejecutando el siguiente comando dentro de la CLI:

/mcp auth figma

Para desinstalar la extensión:

gemini extensions uninstall figma

Otros editores

Otros editores de código y herramientas que admitan Streamable HTTP también pueden conectarse al servidor MCP de Figma.

Si estás usando un editor o herramienta diferente, consulta su documentación para confirmar que admite comunicación basada en Streamable HTTP. Si es así, puedes agregar manualmente el servidor MCP de Figma usando esta configuración:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Indicaciones para tu cliente MCP

El servidor MCP de Figma introduce un conjunto de herramientas que ayudan a los LLM a traducir diseños en Figma. Una vez conectado, puedes indicar a tu cliente MCP que acceda a un nodo de diseño específico.

Para proporcionar contexto de diseño de Figma a tu cliente de IA:

1. Copia el enlace a un marco o capa en Figma.
2. Indica a tu cliente que te ayude a implementar el diseño en la URL seleccionada.

[!NOTE] Tu cliente no podrá navegar a la URL seleccionada, pero extraerá el node-id que se requiere para que el servidor MCP identifique qué objeto debe devolver información.

Herramientas y habilidades

Figma mantiene una lista de herramientas proporcionadas por el servidor MCP de Figma en la documentación para desarrolladores.

También puedes aprender más sobre las habilidades incluidas con el plugin de Figma para agentes compatibles en el Centro de Ayuda de Figma. Dependiendo del agente, también puedes ver los términos connector, extension o power; estos incluyen el mismo conjunto de habilidades.

Este repositorio también contiene habilidades de flujo de trabajo independientes que no están incluidas con el plugin de Figma:

• workflow-skills/video-interaction-mapper: Convierte grabaciones de UI en storyboards anotados de Figma
• workflow-skills/generate-project-plan: Convierte un PRD (más contexto opcional de la base de código) en un tablero de planificación de proyecto FigJam

Mejores prácticas de MCP

La calidad del código generado depende de varios factores. Algunos controlados por ti y otros por las herramientas que estás usando. Aquí hay algunas sugerencias para una salida limpia y consistente.

Estructura tu archivo de Figma para mejor código

Proporciona el mejor contexto para tu intención de diseño, para que el MCP y tu asistente de IA puedan generar código claro, consistente y alineado con tu sistema.

• Usa componentes para cualquier cosa reutilizada (botones, tarjetas, entradas, etc.)
• Vincula componentes a tu base de código mediante Code Connect. Esta es la mejor manera de obtener reutilización consistente de componentes en el código. Sin esto, el modelo está adivinando.
• Usa variables para espaciado, color, radio y tipografía.
• Nombra las capas semánticamente (p. ej., CardContainer, no Group 5)
• Usa diseño automático para comunicar la intención responsiva.

[!TIP] Redimensiona el marco en Figma para verificar que se comporta como se espera antes de generar código.

• Usa anotaciones y recursos de desarrollo para transmitir la intención de diseño que es difícil de capturar solo con elementos visuales, como cómo algo debería comportarse, alinearse o responder.

Escribe indicaciones efectivas para guiar a la IA

MCP le da a tu asistente de IA datos estructurados de Figma, pero tu indicación impulsa el resultado. Las buenas indicaciones pueden:

• Alinear el resultado con tu framework o sistema de estilos
• Seguir la estructura de archivos y las convenciones de nomenclatura
• Agregar código a rutas específicas (p. ej., src/components/ui)
• Agregar o modificar código en archivos existentes en lugar de crear nuevos
• Seguir sistemas de diseño específicos (p. ej., grid, flexbox, absoluto)

Ejemplos:

• "Genera código SwiftUI de iOS desde este marco"
• "Usa Chakra UI para este diseño"
• "Usa componentes src/components/ui"
• "Agrega esto a src/components/marketing/PricingCard.tsx"
• "Usa nuestro componente de diseño Stack"

Piensa en las indicaciones como un brief para un compañero de equipo. Una intención clara conduce a mejores resultados.

Activa herramientas específicas cuando sea necesario

MCP admite diferentes herramientas, y cada una proporciona a tu asistente de IA un tipo diferente de contexto estructurado. A veces, el asistente no elige automáticamente la correcta, especialmente a medida que hay más herramientas disponibles. Si los resultados no son correctos, intenta ser explícito en tu indicación.

• get_design_context proporciona una representación estructurada de React + Tailwind de tu selección de Figma. Este es un punto de partida que tu asistente de IA puede traducir a cualquier framework o estilo de código, dependiendo de tu indicación.
• get_variable_defs extrae las variables y estilos usados en tu selección (color, espaciado, tipografía, etc.). Esto ayuda al modelo a referenciar tus tokens directamente en el código generado.

Por ejemplo, si estás obteniendo código crudo en lugar de tokens, intenta algo como:

• "Obtén los nombres y valores de las variables usadas en este marco."

Agrega reglas personalizadas

Establece guías a nivel de proyecto para mantener la salida consistente, como notas de incorporación para un nuevo desarrollador. Estas son cosas como:

• Primitivas de diseño preferidas
• Organización de archivos
• Patrones de nomenclatura
• Qué no codificar de forma fija

Puedes proporcionar esto en el formato que tu cliente MCP use para archivos de instrucciones.

Ejemplos:

Asegura una salida consistentemente buena

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Reglas generales de calidad

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Agregar estas una vez puede reducir drásticamente la necesidad de indicaciones repetitivas y asegura que los compañeros de equipo o agentes sigan consistentemente las mismas expectativas.

Asegúrate de consultar la documentación de tu IDE o cliente MCP sobre cómo estructurar reglas, y experimenta para encontrar lo que funcione mejor para tu equipo. Una guía clara y consistente a menudo conduce a un código mejor y más reutilizable con menos idas y vueltas.

Divide selecciones grandes

Divide las pantallas en partes más pequeñas (como componentes o fragmentos lógicos) para obtener resultados más rápidos y confiables.

Las selecciones grandes pueden ralentizar las herramientas, causar errores o resultar en respuestas incompletas, especialmente cuando hay demasiado contexto para que el modelo lo procese. En su lugar:

1. Genera código para secciones más pequeñas o componentes individuales (p. ej., Tarjeta, Encabezado, Barra lateral)
2. Si se siente lento o atascado, reduce el tamaño de tu selección

Esto ayuda a mantener el contexto manejable y los resultados más predecibles, tanto para ti como para el modelo.

Si algo en la salida no se ve del todo bien, generalmente ayuda revisar lo básico: cómo está estructurado el archivo de Figma, cómo está escrita la indicación y qué contexto se está enviando. Seguir las mejores prácticas anteriores puede marcar una gran diferencia y a menudo conduce a un código más consistente y reutilizable.

Llevando contexto de Make a tu agente

La integración de Make + MCP facilita llevar prototipos de diseño a producción. Al conectar proyectos de Make directamente a tu agente mediante MCP, puedes extraer recursos y reutilizarlos en tu código. Esto reduce la fricción al extender prototipos hacia aplicaciones reales y garantiza que la intención del diseño se traslade fielmente a la implementación.

Con esta integración, puedes:

• Obtener contexto del proyecto directamente desde Make (archivos individuales o el proyecto completo)
• Solicitar el uso de componentes de código existentes en lugar de empezar desde cero
• Extender prototipos con datos reales para validar y llevar diseños a producción más rápido

Cómo funciona

[!NOTE] Esta integración aprovecha la capacidad de recursos de MCP, que permite a tu agente obtener contexto directamente de proyectos de Make. Está disponible únicamente en clientes que admitan recursos de MCP.

Pasos para obtener recursos de Make

1. Solicita a tu agente que obtenga contexto proporcionando un enlace válido de Make
2. Recibe una lista de archivos disponibles de tu proyecto de Make
3. Descarga los archivos que desees obtener cuando se te solicite

Ejemplo de flujo de trabajo

Objetivo: Implementar un componente de ventana emergente en tu código de producción que coincida con el diseño y comportamiento definidos en Make.

1. Comparte el enlace de tu proyecto de Make con tu agente.
2. Solicita al agente: "Quiero obtener el comportamiento y los estilos del componente de ventana emergente de este archivo de Make e implementarlo usando mi componente de ventana emergente."

Tu agente obtendrá el contexto relevante de Make y te guiará para extender tu componente de ventana emergente existente con la funcionalidad y los estilos del prototipo.

Pautas de iconos

Consulta las Pautas de uso de la marca Figma para mostrar cualquier icono incluido en este repositorio.