# Figma Context MCP Server

> Conecta agentes de código como Cursor con archivos de Figma para que implementen diseños UI a partir de datos reales de layout, no capturas de pantalla.

Fuente: https://skillsagentes.com/mcp/figma-context
Markdown: https://skillsagentes.com/mcp/figma-context.md

Repositorio: https://github.com/GLips/Figma-Context-MCP
Web: https://www.framelink.ai/
Autor: GLips
Licencia: MIT
Estrellas: 15888
Última versión: v0.13.2
Último push: 18 sept 2026
Transporte: stdio

## Qué es

Framelink MCP para Figma es un servidor que da a Cursor y otras herramientas de codificación con IA acceso directo a los datos de tus archivos de Figma. En lugar de que el agente adivine el diseño a partir de una captura de pantalla, obtiene la metadata real de layout y estilos, lo que según el README hace que implemente interfaces con mucha más precisión en un solo intento.

El flujo de trabajo es simple: pegas el enlace a un archivo, frame o grupo de Figma en el chat del agente, y le pides que implemente ese diseño. El servidor consulta la API de Figma, simplifica y traduce la respuesta para quedarse solo con la información de layout y estilo más relevante, y así reduce el contexto que recibe el modelo.

Para configurarlo hace falta un access token personal de Figma. Se añade como servidor MCP en el archivo de configuración del editor, ejecutándolo vía npx con el flag --figma-api-key y --stdio, o definiendo la variable FIGMA_API_KEY (y opcionalmente PORT) en el entorno.

## Instalación

```bash
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
```

## Qué hace

- Obtiene metadata de layout y estilos desde archivos, frames o grupos de Figma vía la API de Figma
- Simplifica y traduce la respuesta de la API para reducir el contexto enviado al modelo
- Permite que el agente implemente diseños de Figma en código en un solo intento

## Cuándo usarlo

- Quieres que Cursor u otro agente de codificación implemente una interfaz a partir de un diseño de Figma
- Necesitas pasar datos reales de layout en vez de capturas de pantalla para mejorar la precisión del código generado

## Credenciales que pide

- `FIGMA_API_KEY`
- `PORT`

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/mcp/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- [Todos los servidores MCP](https://skillsagentes.com/mcp.md)
- [Agent Skills](https://skillsagentes.com/skills.md)

## Servidores relacionados

- [Penpot](https://skillsagentes.com/mcp/penpot.md): Conecta agentes de IA con Penpot, la plataforma de diseño open source, para que puedan leer y trabajar sobre archivos de diseño reales.
- [Blender Model Context Protocol](https://skillsagentes.com/mcp/blender-model-context-protocol.md): Conecta un LLM como Claude con Blender para crear, modificar e inspeccionar escenas 3D mediante un servidor de sockets y ejecución de código Python.
- [Cursor Talk to Figma](https://skillsagentes.com/mcp/cursor-talk-to-figma.md): Conecta agentes de IA como Cursor con Figma vía WebSocket para leer y modificar diseños, textos, componentes y prototipos de forma programática.
- [Magic](https://skillsagentes.com/mcp/magic.md): Conecta tu editor (Cursor, Claude Code, Windsurf, VS Code) al 21st MCP para buscar componentes React/Tailwind y generar UI con IA desde el propio editor.
- [Canvas UI](https://skillsagentes.com/mcp/canvas-ui.md): Deja que Cursor, Claude Code o VS Code busquen e instalen componentes canvas y WebGL del registro @canvas-ui desde el propio editor.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)