Durante años, el traspaso de diseño a desarrollo (design handoff) ha sido una fuente constante de fricción en los equipos de software. Los desarrolladores debían inspeccionar manualmente archivos de Figma, interpretar propiedades de CSS y reconstruir interfaces línea por línea.
La llegada del protocolo Model Context Protocol (MCP) y herramientas de código abierto como GLips/Figma-Context-MCP permite a los agentes de IA de código (OpenCode, Pi, Claude Code, Codex) leer directamente la estructura interna de Figma (Auto-Layout, Flexbox, variables, tokens de color y tipografía) y generar código React, Tailwind CSS o HTML con precisión de píxel.
A continuación explicamos cómo configurar este servidor MCP e integrarlo en el flujo de trabajo de tu equipo.
Paso 1: Generar el Token de Acceso Personal (PAT) de Figma
Para que el servidor MCP se comunique con la API de Figma de forma segura, necesitas un token de acceso:
- Inicia sesión en tu cuenta de Figma desde el navegador.
- Haz clic en la foto de tu perfil (esquina superior izquierda) y selecciona Settings.
- Desplázate hasta la sección Personal Access Tokens.
- Haz clic en Create new token, asígnale un nombre (ej.
mcp-developer-token) y asegúrate de seleccionar el permiso de lectura (file_read). - Copia el token generado y guárdalo en un lugar seguro.
Paso 2: Configuración del Servidor MCP en tu Entorno
Existen dos alternativas para ejecutar el servidor MCP de Figma según las necesidades de tu entorno de desarrollo.
Opción A: Ejecución Rápida mediante npx (Recomendada)
Es la opción más directa para agentes en CLI y editores como Cursor, Claude Desktop o Windsurf:
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "TU_TOKEN_DE_FIGMA_AQUI"
}
}
}
}
Opción B: Instalación Local mediante Repositorio Git
Si prefieres auditar el código fuente o modificar los componentes extraídos:
git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install
cp .env.example .env
Edita el archivo .env e introduce tu token:
FIGMA_API_TOKEN=tu_token_de_figma_aqui
Construye e inicia el servidor:
pnpm build
pnpm start
Paso 3: Conectar el Servidor MCP a tu Agente de Código
La ubicación del archivo de configuración varía según el sistema operativo y el cliente utilizado:
- macOS (Claude Desktop / Cursor):
~/Library/Application Support/Cursor/mcp.jsono~/Library/Application Support/Claude/claude_desktop_config.json - Windows (Claude Desktop / Cursor):
%APPDATA%\Cursor\mcp.jsono%APPDATA%\Claude\claude_desktop_config.json - Claude Code CLI: Ejecuta
claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --stdio
| Agente de Código | Perfil y Método de Conexión |
|---|---|
| Claude Code | CLI oficial de Anthropic. Lee herramientas MCP agregadas vía config global o banderas CLI. |
| OpenCode | Agente de código abierto multimodelo. Lee herramientas declaradas en ~/.config/opencode/mcp.json. |
| Pi | Motor ligero enfocado en velocidad de ejecución. Soporta MCP mediante transporte stdio. |
| Codex | Entorno de desarrollo agéntico. Conexión directa mediante mcpServers en workspace. |
Paso 4: El Flujo de Trabajo en la Práctica (Prompting Técnico)
Una vez conectado el servidor, el agente de IA puede invocar herramientas de inspección de Figma de forma autónoma.
- Abre el diseño en Figma y copia el enlace del frame o componente específico. El enlace tendrá un formato similar a:
https://www.figma.com/design/FILE_ID/TITULO?node-id=123-456 - En la consola o chat de tu agente (OpenCode, Pi, Claude Code o Codex), introduce un prompt técnico directo:
"Analiza el nodo de Figma https://www.figma.com/design/xyz/app?node-id=102-45 y genera un componente React funcional en TypeScript utilizando Tailwind CSS v4. Respeta exactamente el padding de Auto-Layout, la jerarquía tipográfica y exporta los iconos SVG integrados."
Lo que ocurre en segundo plano:
- The agente invoca la herramienta MCP para solicitar la estructura en árbol del nodo (
node-id=102-45). - El MCP devuelve el archivo JSON limpio con propiedades de flexbox (
layoutMode: HORIZONTAL,itemSpacing: 16,paddingLeft: 24), colores en formato hex/rgba y nombres de capas. - El agente compila la estructura y escribe directamente el componente
.tsxen tu directorio de trabajo.
📊 Comparativa de Tiempos de Implementación de UI:
- Maquetación Manual: 3 a 4 horas por pantalla ➔ Errores en espaciados ➔ Revisión de diseño constante
- Flujo Figma-Context-MCP + Agente: 15 a 20 minutos por pantalla ➔ Fidelidad estructural del 95% ➔ Código limpio
🔒 Optimiza el Flujo de Desarrollo e Integración de IA en tu Equipo
La adopción de agentes de código guiados por contexto requiere establecer guías de arquitectura para evitar deuda técnica. En IA4PYMES ayudamos a tu equipo a configurar herramientas agénticas, conectar repositorios y automatizar pipelines de maquetación de forma segura.
Reserva tu sesión de consultoría técnica de 60 minutos aquí (100% reembolsable en tu proyecto final).
Recomendaciones para Maximizar la Calidad del Código Generado
- Mantén una estructura limpia en Figma: Utiliza siempre Auto-Layout en Figma. Si los elementos están posicionados de forma absoluta (Absolute Positioning), el agente generará estilos inline con coordenadas fijas en lugar de CSS responsivo.
- Nombra las capas de forma semántica: Capas nombradas como
Header,PrimaryButtonoUserCardayudan al agente a deducir el significado semántico de cada componente HTML (<header>,<button>,<article>). - Combina con el modelo adecuado: Para maquetación visual compleja, utiliza modelos de alto rendimiento técnico como Claude Opus 5 o GLM-5.2.
- Supervisión de Observabilidad: Implementa trazabilidad de llamadas en producción según lo detallado en nuestro análisis sobre el Evaluation Gap en Agentes de IA.