Design Context Bridge

design-context-bridge es un servidor MCP que convierte a cualquier agente de IA en un desarrollador frontend que puede leer un archivo de Figma de verdad, no adivinar a partir de una captura de pantalla. Cuando le das a un desarrollador un Figma y le dices "construye esto", no solo copia los píxeles visibles. Abre el archivo, identifica los componentes, lee los colores exactos y la escala tipográfica, infiere las rutas que necesitará la aplicación, descubre los estados de hover y deshabilitado, y exporta los iconos. Este servidor le da a la IA ese mismo acceso, para que pueda hacer ese trabajo por ti — fielmente, no de manera aproximada.

GitHubPrueba este MCPPatrocinado

Documentación

Design Context Bridge

Design Context Bridge — an independent MCP server that connects Figma design context to AI coding agents. Not affiliated with Figma.

npm i -g design-context-bridge · Un servidor MCP independiente para Figma

npm MIT Node ≥ 18 20 tools CI

¿Qué es esto?

design-context-bridge es un servidor MCP que convierte a cualquier agente de IA en un desarrollador frontend que puede leer de verdad un archivo de Figma — no adivinar a partir de una captura de pantalla.

Cuando le entregas a un desarrollador un Figma y le dices «construye esto», no se limita a copiar los píxeles visibles. Abre el archivo, identifica los componentes, lee los colores exactos y la escala tipográfica, infiere las rutas que necesitará la aplicación, determina los estados hover y deshabilitado, y exporta los iconos. Este servidor le da a la IA ese mismo acceso, para que pueda hacer ese trabajo por ti — fielmente, no de forma aproximada.

¿Para quién es?

  • Desarrolladores frontend que reciben un Figma y necesitan construirlo fiel al píxel, rápido.
  • Diseñadores y PMs que quieren que una IA razone sobre un diseño — rutas, componentes, tokens — sin escribir código.
  • Cualquiera que construya herramientas de IA que necesite datos de diseño estructurados y fiables en lugar de suposiciones de modelos de visión.

¿Por qué no basta con pegar una captura de pantalla?

Una captura de pantalla es una suposición. Esto son los datos reales.

Pegar una captura de pantalladesign-context-bridge
La IA adivina colores a partir de píxelesLee el hex exacto, por capa
Espaciado y tamaños aproximadosHuecos reales de auto-layout, padding, geometría
No sabe qué es un componente reutilizableIdentifica componentes y sus variantes
Inventa estados hover/deshabilitadoLee las interacciones reales del prototipo
Exportas iconos a manofind_assets + export_image crean la carpeta
No puede ver tokensDeriva un sistema de diseño completo, incluso sin Figma Variables

Dos formas de conectarse

Todo funciona en ambos modos — elige según tu flujo de trabajo, o usa ambos a la vez.

🔌 Modo plugin

Un plugin de Figma («Frontend Handoff Snapshot») se ejecuta dentro de Figma desktop. Selecciona cualquier capa y ve al instante sus colores, tipografía y espaciado en el panel del plugin — no necesitas token ni servidor para inspeccionar. Cuando estés listo, pulsa Exportar para enviar el contexto completo de la selección al bridge local para tu herramienta de codificación con IA.

El plugin solo se comunica con localhost y nunca modifica tu archivo. No es la integración MCP oficial de Figma (use_figma) ni un reemplazo de la misma — combinarlo con el servidor MCP de abajo es opcional, para desarrolladores que quieren que su herramienta de codificación con IA lea ese mismo contexto exportado.

El plugin aún no está en la comunidad de Figma, así que lo instalas manualmente desde el manifest — tarda aproximadamente un minuto y funciona exactamente igual.

→ Instala el plugin manualmente

🌐 Modo API REST

Pasa cualquier URL de figma.com y el servidor la lee a través de la API REST de Figma con un token de acceso personal. Sin plugin, sin Figma desktop, sin selección. Ideal para revisar archivos que no tienes abiertos, CI o uso headless.

→ Configuración de la API REST

Las herramientas de sistema de diseño, estructura, variantes y exportación de assets se ejecutan en modo REST — pasa una URL y leen el archivo completo.

Inicio rápido

npx design-context-bridge

Añádelo a tu cliente de IA y luego pregunta en lenguaje natural:

"Extract the design system from this Figma: <url>"
"What routes would this app have?"
"What variants does this Button component have?"
"Export every icon in this file as SVG into ./assets"
"Build this landing page faithfully — components, tokens, hover states and all."

La IA llama a las herramientas adecuadas, obtiene datos reales y construye a partir de ellos.

Lo que puede hacer

CapacidadHerramientasCómo lo pedirías
Leer la selección activaget_current_selection, get_selected_colors, get_selected_texts, get_selected_spacing, get_selected_interactions«¿Qué colores hay en mi selección?»
Navegar por cualquier archivoget_all_pages, get_current_page, get_frame_by_name, get_node_info, get_nodes_info, scan_nodes_by_types«Encuentra el frame Checkout y muestra su árbol»
Derivar un sistema de diseñoextract_design_system, get_variables, get_component_definitions«Dame los tokens: colores, escala tipográfica, espaciado»
Planificar la construcciónanalyze_structure, get_component_variants«¿Qué rutas y componentes necesita esto?»
Exportar assetsfind_assets, export_image«Exporta todos los iconos como SVG»
Empezar desde una URLget_file_from_url, get_node_from_url«Lee este enlace de Figma»

→ Referencia completa con todos los argumentos en docs/tools.md

Cómo funciona

Figma desktop              design-context-bridge            AI agent
──────────────    HTTP     ─────────────────   stdio   ──────────
  Plugin        ────────►  :3055 bridge     ◄────────  Claude Code
  (push/poll)              + MCP server                Cursor
                                                       OpenCode
              figma.com    ─────────────────           Windsurf
  Any file URL ────────►  REST API client              VS Code…
  1. El plugin envía el contexto de la selección y responde a peticiones de nodos bajo demanda en tiempo real.
  2. El servidor MCP expone 20 herramientas a través de stdio.
  3. El cliente REST lee cualquier archivo de api.figma.com cuando FIGMA_ACCESS_TOKEN está configurado — y alimenta las herramientas de análisis y assets.

Documentación

GuíaQué cubre
Configuración del pluginInstala el plugin de Figma, verifica el bridge, configura el puerto
Configuración de la API RESTGenera un token de Figma, añádelo a la configuración de tu cliente
Configuración del clienteClaude Code · Claude Desktop · Cursor · OpenCode · Windsurf · VS Code
Referencia de herramientasLas 20 herramientas — argumentos, valores de retorno y patrones de uso

Manejo de tokens

Tu FIGMA_ACCESS_TOKEN se lee solo desde el entorno y se envía únicamente a api.figma.com en la cabecera X-Figma-Token. Nunca se registra, cachea ni escribe en disco por este servidor, y nunca se incluye en las respuestas de las herramientas. Trátalo como una contraseña: usa un Personal Access Token con ámbito limitado, nunca lo subas a un repositorio y revócalo si se expone. Los PAT están pensados para uso local/de un solo usuario — para un producto público multiusuario, usa Figma OAuth en su lugar.

Seguridad y privacidad

  • El bridge local escucha solo en 127.0.0.1:3055 — nunca lo expongas a redes no confiables.
  • Esta herramienta se ejecuta por completo en tu máquina; sus mantenedores no reciben ningún dato.
  • Los datos de diseño se reenvían al cliente de IA al que te conectas, que puede reenviarlos a su proveedor de modelos.
  • Úsalo solo con archivos de Figma a los que tengas permiso de acceso.

Consulta SECURITY.md y PRIVACY.md para más detalles y para saber cómo reportar una vulnerabilidad.

Aviso legal

Este proyecto es independiente y no está afiliado, respaldado ni patrocinado por Figma. «Figma» es una marca comercial de Figma, Inc., utilizada aquí solo de forma descriptiva para indicar compatibilidad. Consulta DISCLAIMER.md.

Licencia

MIT © Cristina Fores Campos