MCP para diseñadores

---

¿Qué son los MCP?

Si no sabes que son los MCP siento decirte que te has quedado obsoleto en el desarrollo de productos digitales. El Model Context Protocol (MCP) es un protocolo abierto diseñado para estandarizar la forma en que las aplicaciones de inteligencia artificial (IA) se conectan con diferentes fuentes de datos y herramientas.

Fue creado por Anthropic en noviembre de 2024 con el objetivo de permitir que los modelos de lenguaje (LLM) accedan al contexto real de trabajo de forma segura y eficiente.

Seguro que trabajas con herramientas como Figma, Slack, Antigravity, ChatGPT o Claude. En tu flujo de trabajo es habitual pasar información de una herramienta a otra para poder avanzar en las diferentes tareas, un trabajo repetitivo y a veces tedioso que llega a consumir mucho tiempo. Pues bien, los MCP vienen a eliminar esta fricción y agilizar todo el proceso.

Usos reales de los MCP

Imagina tener un prototipo de alta calidad en Figma y tienes que pasarlo a desarrollo para que los programadores implementen toda la lógica. Con los MCP de Figma puedes conectar tus diseños con Antigravity y pedirle a modelos como Gemini o Claude que implementen ellos mismos los diseños (siempre con la supervisión de un programador, claro). A continuación puedes ver otros casos más específicos donde el protocolo MCP ayuda a automatizar tareas en el desarrollo de productos digitales.

Automatización de documentación de sistemas de diseño

MCP permite tener actualizada la documentación de un sistema de diseño. Por ejemplo con plataformas de documentación como Mintlify, para que al compartir un enlace de Figma, la IA extraiga automáticamente especificaciones de espaciado, colores y variantes, genere capturas de pantalla y actualice el sitio de documentación.

Generación de código y handoff (Figma)

El servidor oficial de Figma permite que la IA inspeccione archivos de forma programática para mejorar el traspaso a desarrollo.

• Diseño a código: La IA puede apuntar a un marco específico en Figma y generar componentes de React o HTML con píxeles perfectos, incluyendo todas las propiedades de auto-layout y estilos.
• Escritura en el lienzo: Los diseñadores pueden pedirle a la IA que cree o modifique contenido nativo directamente en el lienzo de Figma Design o FigJam, como construir marcos, componentes o variables siguiendo las reglas de un sistema de diseño existente.

¿Cómo funcionan los MCP?

Ahora vamos a lo importante, conocer como funcionan para poder utilizarlos. Para ello es necesario contar con una combinación de software compatible, credenciales de acceso y, en algunos casos, conocimientos técnicos básicos de configuración para poder conectar el cliente MCP con el servidor. No te abrumes, es más fácil de lo que parece. Los requisitos principales son:

Clientes MCP (Aplicaciones de IA)

Debes utilizar un editor de código o una aplicación que soporte nativamente el protocolo MCP para que actúe como «cliente». Algunos de los más comunes son:

• Editores e IDEs: Cursor, VS Code (con extensiones), Windsurf, Claude Code, Android Studio y Xcode.
• Aplicaciones de Chat: Claude Desktop (muy utilizado para configuraciones locales), OpenAI ChatGPT y Microsoft Copilot Studio.

Credenciales y autenticación

La mayoría de los servidores requieren permisos para acceder a tus datos:

• Tokens de Acceso Personal (PAT): Por ejemplo, para usar el MCP de Figma, necesitas generar un token desde la configuración de tu cuenta de Figma.
• Claves de API: Se requieren llaves de servicios como Anthropic si usas Claude como motor principal.
• Inicio de sesión (OAuth): Servicios como Adobe Experience Manager (AEM) o Firebase requieren que te autentiques con tu Adobe ID o ejecutes comandos como firebase login antes de conectar el servidor.

Configuración del Archivo JSON

Conectar un Servidor MCP a tu cliente de IA o entorno de desarrollo varía dependiendo de la aplicación que uses, pero el método principal requiere modificar un archivo de configuración (JSON) o utilizar una interfaz de extensiones.

{
  "mcpServers": {
    "mi-servidor-mcp": {
      "command": "python",
      "args": [
        "ruta/a/tu/script.py"
      ]
    }
  }
}

Para conectar el cliente (como Claude Desktop) con el servidor, deberás editar un archivo de configuración (normalmente llamado claude_desktop_config.json). En este archivo se debe pegar un fragmento de código JSON que indique la ruta del servidor y las variables de entorno necesarias que vimos antes (como las API keys).

Servidores MCP

Un servidor MCP es un «conector» que permite que la inteligencia artificial se comunique con una herramienta en concreto siguiendo el protocolo MCP. A continuación te dejo un listado de los más utilizados en diseño.

• Figma MCP (oficial): Este servidor oficial permite que los agentes de IA lean, inspeccionen y exporten archivos de diseño de forma programática. Facilita flujos de trabajo donde herramientas IA como Cursor, Claude Code o Visual Studio Code accedan a tus diseños para generar componentes de código (como React o HTML) directamente desde un marco de Figma, además de sincronizar tokens de diseño (colores, tipografía y espaciado) con variables CSS o configuraciones de Tailwind
• Figma Context: Mejora la precisión de las herramientas de desarrollo, proporcionando una estructura clara del diseño que hay en Figma. Mejora la generación de código y el handoff.
• F2C: Permite que los asistentes de código como Cursor conviertan un diseño en Figma en HTML/CSS.
• Sketch. Procesa los archivos de Sketch, extrae la información relevante y crea componentes en Vue.

En MCP Market encontrarás estos y otros 300 servidores más.

Conclusión

Si vienes del área de diseño, esto de los servidores MCP puede sonarte raro, sin mucha relación con las tareas que sueles hacer en tu día a día. Llevas razón, pero el entorno en el que solíamos trabajar los diseñadores de productos digitales está cambiando y esto abre la puerta a poder presentar no solo un prototipo en Figma para entregar a desarrollo, sino un MVP avanzado listo para producción.

Los servidores MCP abre la puerta a automatizaciones y a la mejora de los resultados que se obtenían hasta ahora. Entender MCP y cómo puedes utilizarlo puede ayudarte a automatizar otras tareas en las que actualmente inviertes mucho tiempo, como la conexión entre Notion y Figma.

Categoría/s: Diseño y desarrollo web