Figma MCP (Framelink) — De Figma a Código

Es un conector que lee tus archivos de Figma (la herramienta de diseño más usada) y le pasa a tu IA exactamente cómo es cada pantalla: colores, espaciados, tipografías, jerarquía y estructura. Así tu IA puede convertir el diseño en código sin que tú tengas que describirlo a mano.

Piénsalo como el traductor entre el diseñador y el programador: el diseñador hace la pantalla en Figma, y este conector se la "explica" a tu IA para que la programe igual.

Qué puede hacer:

• Leer un frame/diseño de Figma por su enlace.
• Pasar a la IA colores, tamaños, fuentes y estructura.
• Ayudar a generar componentes que coincidan con el diseño.
• Traducir el diseño a React, HTML/CSS, Tailwind...

Detalle a favor: está optimizado para IA: no le pasa TODO el archivo (que es enorme), sino solo lo relevante, así gasta menos y acierta más.

Cuando tienes un diseño y quieres convertirlo en web:

• "Convierte este diseño de Figma en código" → diseño a código.
• "¿Qué colores usa esta pantalla?" → extracción.
• "Hazme el componente tal como en Figma" → fidelidad al diseño.
• "¿Qué tipografía y tamaños tiene?" → datos de diseño.

Sí, si diseñas o sigues un diseño (propio o de un cliente).

No te sirve si no usas Figma. Necesitas token de Figma (gratis).

Veredicto: ✅ SÍ, es limpia (riesgo 0).

• Qué hace: lee tus diseños de Figma con tu token personal. Solo lectura.
• Funciona en local: por stdio.
• Tu token: va en variable de entorno (FIGMA_API_KEY), no a terceros.
• Sin ejecución de nada raro: los exec() del código son de expresiones regulares (buscar patrones), no de ejecutar comandos.
• Licencia: MIT. 15.9k estrellas (muy usado).

claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=TU_TOKEN --stdio

O en la configuración:

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "tu_token" }
    }
  }
}

Token gratis: Figma → Settings → Personal access tokens.

• Repositorio: https://github.com/GLips/Figma-Context-MCP
• Web: https://www.framelink.ai