Figma Context MCP

Fornece informações de layout do Figma para agentes de codificação de IA como o Cursor.

GitHub

15.9k

Experimente este MCPPatrocinado

Documentação

Framelink MCP for Figma

Dê ao seu agente de codificação acesso aos seus dados do Figma.
Implemente designs em qualquer framework de uma só vez.

Dê ao Cursor e outras ferramentas de codificação com IA acesso aos seus arquivos do Figma com este servidor Model Context Protocol.

Quando o Cursor tem acesso aos dados de design do Figma, ele é muito melhor em implementar designs com precisão de uma só vez do que abordagens alternativas como colar capturas de tela.

Veja as instruções de início rápido →

Demonstração

Assista a uma demonstração de construção de uma UI no Cursor com dados de design do Figma

Como funciona

Abra o chat do seu IDE (por exemplo, modo agente no Cursor).
Cole um link para um arquivo, frame ou grupo do Figma.
Peça ao Cursor para fazer algo com o arquivo do Figma—por exemplo, implementar o design.
O Cursor buscará os metadados relevantes do Figma e os usará para escrever seu código.

Este servidor MCP é especificamente projetado para uso com o Cursor. Antes de responder com contexto da API do Figma, ele simplifica e traduz a resposta para que apenas as informações de layout e estilo mais relevantes sejam fornecidas ao modelo.

Reduzir a quantidade de contexto fornecida ao modelo ajuda a tornar a IA mais precisa e as respostas mais relevantes.

Primeiros Passos

Muitos editores de código e outros clientes de IA usam um arquivo de configuração para gerenciar servidores MCP.

O servidor figma-developer-mcp pode ser configurado adicionando o seguinte ao seu arquivo de configuração.

NOTA: Você precisará criar um token de acesso do Figma para usar este servidor. Instruções sobre como criar um token de acesso à API do Figma podem ser encontradas aqui.

MacOS / Linux

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

Windows

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

Ou você pode definir FIGMA_API_KEY e PORT no campo env.

Se você precisar de mais informações sobre como configurar o Framelink MCP para Figma, consulte a documentação do Framelink.

Histórico de Estrelas

Saiba Mais

O Framelink MCP para Figma é simples, mas poderoso. Aproveite ao máximo aprendendo mais no site do Framelink.