Serviço MCP para leitura e modificação de rascunhos de design Figma usando o Cursor

🚀 Convite para experimentar: o primeiro software de programação inteligente AI IDE da China Download da versão chinesa do TraeO DeepSeek-R1 e o Doubao-pro estão disponíveis em uma base ilimitada!

Introdução geral

Cursor Fale com a Figma MCP é um projeto de código aberto que foi desenvolvido por meio do Modelo de protocolo de contexto (MCP) conecta a ferramenta de programação de IA Cursor ao software de design Figma. Ele foi criado pelo desenvolvedor Sonny Lazuardi, está hospedado no GitHub e tem data de lançamento prevista para 17 de março de 2025. A função principal da ferramenta é permitir que o Cursor leia os arquivos de design do Figma e gere código, ou modifique diretamente o conteúdo do design. Ela é escrita em TypeScript e incorpora a tecnologia WebSocket para comunicação em tempo real. Seja para transformar rapidamente um design em código ou para manipular um arquivo de design com IA, essa ferramenta gratuita ajuda os desenvolvedores a serem mais eficientes. Qualquer pessoa pode fazer o download do código e participar do desenvolvimento.

parafuso.novo Novo recurso que entrou em operação há alguns dias:Converta os designs do Figma em aplicativos de pilha completa com um clique

Serviço MCP vinculando rascunhos de design do Cursor e do Figma-1

Lista de funções

Conexão entre o Cursor e o FigmaComunicação bidirecional: A comunicação bidirecional é obtida por meio do protocolo MCP e do WebSocket.
Ler informações sobre o projetoObter uma visão geral do documento do arquivo Figma, do conteúdo selecionado ou dos detalhes específicos do nó.
Criação de elementos de designAdicionar retângulos, quadros ou nós de texto ao Figma
Modificação de estilos e layoutsAjuste de cores, bordas, cantos arredondados ou mova, redimensione e exclua nós.
Gerar códigoReduza o tempo de escrita manual transformando os projetos do Figma em código utilizável.
Suporte para gerenciamento de componentesComponentes locais ou de equipe: Leia componentes locais ou de equipe para criar instâncias de componentes.
função de exportaçãoExportação de nós de design para os formatos PNG, JPG, SVG ou PDF.
Código aberto e gratuitoO código está disponível publicamente e os desenvolvedores têm liberdade para modificá-lo ou otimizá-lo.

Usando a Ajuda

Processo de instalação

Para usar o Cursor Talk to Figma MCP, várias partes precisam ser instaladas e configuradas. Abaixo estão as etapas detalhadas:

1. preparação do ambiente

Instalação BunBun é uma ferramenta para executar JavaScript rapidamente. Se você não a tiver instalada, abra um terminal e digite-a:

curl -fsSL https://bun.sh/install | bash

Instalação do CursorFaça o download e instale a ferramenta de programação Cursor AI no site oficial (cursor.ai).
Obter o Figma TokenFaça login no Figma, gere um token de acesso pessoal nas configurações de sua conta e salve-o.

2. fazer o download do projeto

Execute o seguinte comando no terminal para fazer o download do código do projeto:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

Vá para o catálogo de projetos:

cd cursor-talk-to-figma-mcp

3. instalar dependências e configuração

Execute no diretório do projeto:

configuração do pão

Isso instala todas as dependências (incluindo as bibliotecas TypeScript e WebSocket) e configura automaticamente o servidor MCP no Cursor.

4. iniciar o servidor WebSocket

Digite-o no terminal:

início do pão

Ou execute-o manualmente:

executar src/socket.ts

Isso iniciará o servidor WebSocket para conectar o plug-in do Figma ao MCP.

5. instalar o plug-in do Figma

Abra o aplicativo Figma para desktop.
Clique no menu superior "Plugins" > "Desenvolvimento" > "Novo plug-in".
Selecione "Link Existing Plugins" (Vincular plug-ins existentes) e localize o src/cursor_mcp_plugin/manifest.json Documentação.
Após a confirmação, o plug-in aparecerá na lista de plug-ins de desenvolvimento do Figma.

6. configuração do servidor Cursor MCP (modo manual)

no caso de configuração do pão Não é automatizado, pode ser configurado manualmente.
show (um ingresso) ~/.cursor/mcp.json adicione o seguinte:

{
"mcpServers": {
"TalkToFigma": {
"comando": "bun".
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

intercambialidade /caminho/para/ O caminho real para seu projeto.

Como usar os principais recursos

Após a conclusão da instalação, siga as etapas abaixo:

kit inicial

Execução de um servidor WebSocket::
- No terminal, digite início do pãoVerifique se o servidor está em execução.
Iniciando o plug-in do Figma::
- No Figma, clique com o botão direito do mouse na tela e selecione "Plugins" > "Develop" > Execute o plug-in que você acabou de instalar.
- Depois que o plug-in for iniciado, digite join_channel Participe do canal de comunicação.
Conectar o cursor::
- Abra o Cursor e certifique-se de que o servidor MCP esteja configurado e em execução.

Ler informações sobre o projeto

Abra um arquivo de design no Figma e selecione a seção a ser manipulada.
Digite comandos no modo "Composer" do Cursor, por exemplo:
- "Obter informações sobre o documento atual": chamar a função get_document_info.
- "Exibir conteúdo selecionado": chamada get_selection.
O cursor retorna dados de design, como layout, estilo, etc., via MCP.

Criação e modificação de projetos

Digite instruções específicas no Cursor:
- Cria um retângulo:create_rectangleEspecifique o local e o tamanho.
- Adicionar texto:create_textDefina o conteúdo e a fonte.
- Modificar a cor:set_fill_colorO valor RGBA é inserido.
As alterações são refletidas nos arquivos Figma em tempo real.

Gerar código

Cole um link para o arquivo Figma no Cursor (por exemplo https://www.figma.com/file/xxx/yyy).
Digite o comando "Generate this design of the Reagir Código".
O cursor lerá o design e emitirá o código correspondente.

Exportar o design

Entre no Cursor:export_node_as_imageA tabela a seguir descreve como selecionar o formato (PNG, JPG, etc.).
O arquivo exportado é salvo localmente.

Precauções de manuseio

Sequência de conexão: Inicie o WebSocket primeiro, depois execute o plug-in e, por fim, use o Cursor para enviar comandos.
Tratamento de errosSe o comando falhar, verifique os registros do terminal para confirmar se a rede e as permissões estão corretas.
Dicas de desempenhoQuando estiver lidando com arquivos grandes, use primeiro o get_document_info Visualize a visão geral e, em seguida, manipule nós específicos.

O poder dessa ferramenta é que ela torna o design e a codificação perfeitos. Você pode manipular o Figma diretamente com IA ou gerar código rapidamente, eliminando muito trabalho repetitivo.

cenário do aplicativo

Prototipagem rápida
Descrição do cenário: os gerentes de produto precisam validar uma ideia de design. Eles podem usar o Cursor para criar elementos no Figma e, em seguida, exportar o código para gerar rapidamente um protótipo interativo.
Sincronização de design e desenvolvimento
Descrição do cenário: depois que o designer ajusta o arquivo Figma, o desenvolvedor lê o design mais recente por meio do Cursor e atualiza o código em tempo real para reduzir os custos de comunicação.
Ajuste automatizado de estilo
Descrição do cenário: as equipes precisam modificar as cores ou os layouts do design em massa. Os desenvolvedores podem usar o Cursor para inserir comandos para automatizar os ajustes.

QA

Preciso pagar por essa ferramenta?
Resposta: não é necessário. É um projeto de código aberto, de uso gratuito, e o código está disponível publicamente no GitHub.
Quais linguagens de programação são compatíveis com a saída?
Resposta: Depende da capacidade do Cursor, atualmente compatível com React, HTML, CSS e outros códigos de front-end comuns, específicos da lógica de geração do Cursor.
Posso trabalhar com mais de um arquivo Figma ao mesmo tempo?
Resposta: Sim, mas você precisa adicionar um canal diferente para cada arquivo (usando a opção join_channel), verifique se o comando aponta para o arquivo correto.