Figma MCP Server

by GLips
Verified
MIT License
27,308
5,618
  • Linux
  • Apple

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

  • Enables Windsurf (a Codeium product) to connect to Figma design data through the MCP server for AI-powered code generation.

  • Provides access to Figma design data via the Figma API, allowing AI-powered coding tools to retrieve file metadata, node information, and design elements for code generation.

Otorgue a Cursor y otras herramientas de codificación impulsadas por IA acceso a sus archivos Figma con este servidor de protocolo de contexto de modelo .

Cuando Cursor tiene acceso a los datos de diseño de Figma, es mucho mejor para crear diseños de una sola pasada con precisión que con enfoques alternativos como pegar capturas de pantalla.

Manifestación

Vea una demostración de cómo crear una interfaz de usuario en Cursor con datos de diseño de Figma

Cómo funciona

  1. Abra el chat de su IDE (por ejemplo, el modo agente en Cursor).
  2. Pegar un enlace a un archivo, marco o grupo de Figma.
  3. Pídale a Cursor que haga algo con el archivo Figma (por ejemplo, implementar el diseño).
  4. El cursor obtendrá los metadatos relevantes de Figma y los usará para escribir su código.

Este servidor MCP está diseñado específicamente para su uso con Cursor. Antes de responder con el contexto de la API de Figma , simplifica y traduce la respuesta para que solo se proporcione al modelo la información de diseño y estilo más relevante.

Reducir la cantidad de contexto proporcionado al modelo ayuda a que la IA sea más precisa y las respuestas más relevantes.

Empezando

Muchos editores de código y otros clientes de IA utilizan un archivo de configuración para administrar servidores MCP.

El servidor figma-developer-mcp se puede configurar agregando lo siguiente a su archivo de configuración.

NOTA: Necesitará crear un token de acceso a Figma para usar este servidor. Puede encontrar instrucciones sobre cómo crear un token de acceso a la API de Figma aquí .

MacOS / Linux

{ "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

Ventanas

{ "mcpServers": { "Framelink Figma MCP": { "command": "cmd", "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

O puede configurar FIGMA_API_KEY y PORT en el campo env .

Si necesita más información sobre cómo configurar el servidor MCP de Framelink Figma, consulte la documentación de Framelink .

Historia de las estrellas

Más información

El servidor MCP de Framelink para Figma es sencillo pero potente. Sáquele el máximo provecho aprendiendo más en el sitio web de Framelink .

Patrocinadores

🥇 Patrocinadores Oro

🥈 Patrocinadores Plata

🥉 Patrocinadores Bronce

😻 Patrocinadores más pequeños

-
security - not tested
A
license - permissive license
-
quality - not tested

Permite que Cursor acceda a los archivos Figma a través del Protocolo de contexto de modelo, lo que mejora su capacidad para interpretar y utilizar con precisión los datos de diseño para la generación de código.

  1. How it works
    1. Getting Started
      1. MacOS / Linux
      2. Windows
    2. Star History
      1. Learn More
        1. Sponsors
          1. 🥇 Gold Sponsors
          2. 🥈 Silver Sponsors
          3. 🥉 Bronze Sponsors
          4. 😻 Smaller Backers
        ID: kcftotr525