Cómo conectar Figma con OpenCode usando MCP

Si trabajas con diseño y código, seguro te ha pasado: tienes el diseño en Figma, el proyecto abierto en tu editor y terminas copiando colores, medidas, textos y referencias a mano.

No es que sea imposible. Es que es fricción innecesaria.

Con MCP puedes conectar herramientas externas a tu agente de código. En este caso, vamos a conectar Figma con OpenCode para que el agente pueda consultar contexto del diseño sin que tengas que copiar todo manualmente.

Qué vamos a configurar

Vamos a configurar figma-developer-mcp, una integración MCP que permite que OpenCode consulte información de tus archivos de Figma usando un token personal.

No necesitas instalar figma-developer-mcp como dependencia de tu proyecto ni instalarlo globalmente. En la configuración usaremos npx, así que OpenCode lo ejecutará cuando necesite levantar el MCP.

La idea es esta:

OpenCode
  |
  | usa MCP
  v
figma-developer-mcp
  |
  | usa tu token de Figma
  v
Figma API

OpenCode no se conecta mágicamente a Figma. Lee tu configuración, levanta esta integración MCP en tu máquina y usa tu token para consultar la API de Figma cuando el agente necesita información del diseño.

Requisitos

Antes de empezar necesitas:

• Tener OpenCode instalado.
• Tener Node.js disponible, porque npx viene con npm.
• Tener una cuenta de Figma.
• Crear un token personal de Figma desde la configuración de tu cuenta.
• Tener acceso al archivo de Figma que quieres consultar.

Paso 1: crear un token de Figma

Para esta configuración no necesitas crear una app OAuth en Figma. Eso sería útil si estuvieras construyendo una integración para otros usuarios. Aquí solo necesitas un Personal access token para que OpenCode pueda consultar Figma a través del MCP.

La guía oficial de Figma sobre tokens está aquí:

Manage personal access tokens

Luego:

1. Entra a Figma con tu cuenta.
2. Abre el menú de tu cuenta.
3. Ve a Settings.
4. Entra a la pestaña Security.
5. Busca Personal access tokens.
6. Crea un token nuevo.
7. Copia el token.
8. Guárdalo en un lugar seguro.

No publiques ese token. No lo subas a GitHub. No lo pongas en un artículo. No lo pegues en screenshots.

El token es una credencial real. Si alguien lo obtiene, puede consultar información de Figma con tus permisos.

Paso 2: guardar el token como variable de entorno

La forma rápida para probarlo en tu terminal es exportarlo como variable de entorno:

export FIGMA_API_KEY="tu_token_de_figma"

Si usas zsh, puedes guardarlo en tu configuración de shell para no exportarlo manualmente cada vez:

export FIGMA_API_KEY="tu_token_de_figma"

La idea importante es esta: el token vive fuera del archivo de configuración de OpenCode.

OpenCode soporta esta sintaxis oficialmente:

"FIGMA_API_KEY": "{env:FIGMA_API_KEY}"

Eso significa: “lee el valor desde una variable de entorno llamada FIGMA_API_KEY”. Si esa variable no existe cuando OpenCode arranca, OpenCode la reemplaza por un string vacío y el MCP no podrá autenticarse.

Si las variables de entorno te dan problemas, una alternativa más estable es guardar el token en un archivo local privado y leerlo con {file:...}:

"FIGMA_API_KEY": "{file:~/.secrets/figma-api-key}"

Ese archivo no debe subirse a Git ni compartirse.

Paso 3: configurar OpenCode

OpenCode documenta los servidores MCP en su guía oficial: MCP servers en OpenCode.

El archivo global de configuración suele estar en:

~/.config/opencode/opencode.json

Dentro de ese archivo agrega figma bajo la propiedad mcp:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
      },
      "enabled": true
    }
  }
}

Si ya tienes otros MCP configurados, no reemplaces todo el archivo. Solo agrega la entrada figma dentro de mcp.

Por ejemplo:

{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["@warp-dot-dev/opencode-warp"],
  "mcp": {
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
      "enabled": true
    },
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
      },
      "enabled": true
    }
  }
}

Qué significa cada parte

"type": "local"

Le dice a OpenCode que este MCP se ejecuta en tu máquina.

"command": ["npx", "-y", "figma-developer-mcp", "--stdio"]

Es el comando que OpenCode usará para levantar el servidor MCP.

"environment": {
  "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
}

Le pasa tu token de Figma al proceso, pero leyéndolo desde una variable de entorno.

Si prefieres leerlo desde un archivo privado, puedes usar:

"environment": {
  "FIGMA_API_KEY": "{file:~/.secrets/figma-api-key}"
}

Esto suele ser más confiable si abres OpenCode desde lugares donde tu shell no carga las variables que pusiste en .zshrc o .bashrc.

"enabled": true

Activa el servidor cuando OpenCode arranca.

Paso 4: verificar que está conectado

Después de guardar la configuración, ejecuta:

opencode mcp list

Si todo está bien, deberías ver algo parecido a esto:

figma connected

Si aparece como desconectado, revisa tres cosas:

• Que npx funcione en tu terminal.
• Que FIGMA_API_KEY exista en tu entorno.
• Que el token tenga permisos para leer el archivo de Figma.

Puedes comprobar la variable con:

printenv FIGMA_API_KEY

Si eso no imprime nada, OpenCode tampoco podrá pasarle el token al MCP.

Paso 5: usar Figma desde OpenCode

Una vez conectado, puedes pedirle a OpenCode que use el MCP de Figma.

Por ejemplo:

Usa figma para revisar este archivo y dime la jerarquía visual del frame principal:
https://www.figma.com/design/FILE_KEY/Proyecto?node-id=123-456

O algo más orientado a implementación:

Usa figma para leer este frame y luego implementa el componente respetando spacing,
tipografía, colores y jerarquía visual del diseño.

También puedes pedir primero análisis y después implementación:

Usa figma para analizar este diseño. No escribas código todavía.
Primero dime estructura, componentes, colores y posibles estados interactivos.

Ese flujo es mejor que pedir código de una vez, porque primero validas que el agente entendió el diseño.

Cómo sacar el file key y el node id

En una URL de Figma normalmente verás algo así:

https://www.figma.com/design/ABC123MiFileKey/Mi-Proyecto?node-id=123-456

El file key es la parte después de /design/.

El node-id viene en el query param node-id.

No siempre necesitas ambos, pero cuando quieres revisar un frame específico, el node-id ayuda bastante.

Buen flujo de trabajo

No le digas simplemente:

Haz esto igual a Figma.

Eso es flojo y suele producir resultados flojos.

Mejor usa un flujo por pasos:

1. Pídele que analice el frame.
2. Pídele que identifique componentes reutilizables.
3. Pídele que compare el diseño con el design system existente.
4. Pídele que implemente el componente.
5. Pídele que revise responsive, accesibilidad y estados.

Ejemplo:

Usa figma para analizar este frame. Después revisa mi proyecto y dime cómo lo implementarías
sin romper el design system actual. No escribas código hasta que me expliques el plan.

Ahí es donde MCP empieza a valer la pena: no solo le das una imagen al agente, le das contexto estructurado.

Seguridad: no pegues tokens en tu config

Esto funciona:

"environment": {
  "FIGMA_API_KEY": "NO_PEGUES_TU_TOKEN_AQUI"
}

Pero no es recomendable para compartir, documentar o versionar.

Mejor usa:

"environment": {
  "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
}

La diferencia parece pequeña, pero es enorme: en el primer caso tu secreto queda escrito en texto plano; en el segundo, la configuración solo referencia una variable externa.

Si vas a escribir tutoriales, hacer capturas o compartir tu configuración, esta parte importa mucho.

Qué sí puede hacer y qué no

Con esta integración puedes apoyarte para:

• Leer información de un archivo o frame de Figma.
• Entender estructura visual.
• Extraer referencias de layout, spacing y colores.
• Ayudar a implementar componentes desde un diseño.
• Reducir el ida y vuelta manual entre diseño y código.

Pero no reemplaza criterio técnico.

Todavía necesitas revisar:

• Accesibilidad.
• Responsive real.
• Estados de interacción.
• Reutilización de componentes.
• Compatibilidad con tu design system.
• Calidad del código generado.

MCP no convierte al agente en diseñador ni arquitecto frontend. Solo le da mejor contexto. La decisión técnica sigue siendo tuya.

Troubleshooting rápido

Si opencode mcp list no muestra figma connected, revisa esto:

El token no existe en tu entorno

printenv FIGMA_API_KEY

Si no imprime nada, exporta la variable otra vez.

npx no puede ejecutar el paquete

Prueba:

npx -y figma-developer-mcp --help

Si falla, revisa tu instalación de Node.js.

El archivo de Figma no es accesible

El token solo puede leer lo que tu cuenta puede leer. Si el archivo es privado y tu usuario no tiene acceso, el MCP tampoco lo tendrá.

OpenCode estaba abierto antes del cambio

Cierra y vuelve a abrir OpenCode para que cargue la nueva configuración.

Conclusión

Configurar Figma con OpenCode usando MCP no es complicado. Lo importante es entender qué está pasando: OpenCode levanta un servidor MCP local, ese servidor habla con Figma usando tu token, y el agente obtiene herramientas para consultar contexto de diseño.

La ganancia real no es “la IA hace todo”. La ganancia real es que reduces fricción entre diseño y código.

Y eso, cuando trabajas interfaces, sí cambia el flujo.