Automação do Figma via Rube MCP

Automatize operações do Figma através do kit de ferramentas Figma da Composio via Rube MCP.

Pré-requisitos

• O Rube MCP deve estar conectado (RUBE_SEARCH_TOOLS disponível)
• Conexão ativa com o Figma via RUBE_MANAGE_CONNECTIONS com o kit de ferramentas figma
• Sempre chame RUBE_SEARCH_TOOLS primeiro para obter os esquemas de ferramentas atuais

Configuração

Obtenha o Rube MCP: Adicione https://rube.app/mcp como um servidor MCP na configuração do seu cliente. Nenhuma chave de API é necessária — basta adicionar o endpoint e funciona.

1. Verifique se o Rube MCP está disponível confirmando que RUBE_SEARCH_TOOLS responde
2. Chame RUBE_MANAGE_CONNECTIONS com o kit de ferramentas figma
3. Se a conexão não estiver ATIVA, siga o link de autenticação retornado para completar a autenticação do Figma
4. Confirme se o status da conexão mostra ATIVA antes de executar quaisquer fluxos de trabalho

Fluxos de Trabalho Principais

1. Obter Dados de Arquivos e Componentes

Quando usar: O usuário deseja inspecionar arquivos de design do Figma ou extrair informações de componentes

Sequência de ferramentas:

1. FIGMA_DISCOVER_FIGMA_RESOURCES - Extrai IDs de URLs do Figma [Pré-requisito]
2. FIGMA_GET_FILE_JSON - Obtém dados do arquivo (simplificado por padrão) [Obrigatório]
3. FIGMA_GET_FILE_NODES - Obtém dados de nó específicos [Opcional]
4. FIGMA_GET_FILE_COMPONENTS - Lista componentes publicados [Opcional]
5. FIGMA_GET_FILE_COMPONENT_SETS - Lista conjuntos de componentes [Opcional]

Parâmetros principais:

• file_key: Chave do arquivo da URL (por exemplo, 'abc123XYZ' de figma.com/design/abc123XYZ/...)
• ids: IDs de nós separados por vírgula (NÃO um array)
• depth: Profundidade de travessia da árvore (2 para páginas e filhos de nível superior)
• simplify: Verdadeiro para formato amigável para IA (redução de tamanho de 70%+)

Armadilhas:

• Suporta apenas arquivos de Design; quadros FigJam e Slides retornam erros 400
• ids deve ser uma string separada por vírgulas, não um array
• IDs de nós podem estar no formato de traço (1-541) em URLs, mas precisam do formato de dois pontos (1:541) para a API
• IDs amplos/profundidade podem acionar cargas úteis excessivas (413); restrinja o escopo ou reduza a profundidade
• Os dados de resposta podem estar em data_preview em vez de data

2. Exportar e Renderizar Imagens

Quando usar: O usuário deseja exportar ativos de design como imagens

Sequência de ferramentas:

1. FIGMA_GET_FILE_JSON - Encontra IDs de nós para exportar [Pré-requisito]
2. FIGMA_RENDER_IMAGES_OF_FILE_NODES - Renderiza nós como imagens [Obrigatório]
3. FIGMA_DOWNLOAD_FIGMA_IMAGES - Baixa imagens renderizadas [Opcional]
4. FIGMA_GET_IMAGE_FILLS - Obtém URLs de preenchimento de imagem [Opcional]

Parâmetros principais:

• file_key: Chave do arquivo
• ids: IDs de nós separados por vírgula para renderizar
• format: 'png', 'svg', 'jpg' ou 'pdf'
• scale: Fator de escala (0.01-4.0) para PNG/JPG
• images: Array de {node_id, file_name, format} para downloads

Armadilhas:

• Imagens retornam como um mapa de node_id para URL; alguns IDs podem ser nulos (renderizações falharam)
• URLs são temporárias (válidas por ~30 dias)
• Imagens limitadas a 32 megapixels; solicitações maiores são redimensionadas automaticamente

3. Extrair Tokens de Design

Quando usar: O usuário deseja extrair tokens de design para desenvolvimento

Sequência de ferramentas:

1. FIGMA_EXTRACT_DESIGN_TOKENS - Extrai cores, tipografia, espaçamento [Obrigatório]
2. FIGMA_DESIGN_TOKENS_TO_TAILWIND - Converte para configuração do Tailwind [Opcional]

Parâmetros principais:

• file_key: Chave do arquivo
• include_local_styles: Inclui estilos locais (padrão verdadeiro)
• include_variables: Inclui variáveis do Figma
• tokens: Objeto completo de tokens da extração (para conversão do Tailwind)

Armadilhas:

• A conversão do Tailwind requer o objeto completo de tokens, incluindo total_tokens e sources
• Não remova campos da resposta de extração antes de passá-los para a conversão

4. Gerenciar Comentários e Versões

Quando usar: O usuário deseja visualizar ou adicionar comentários, ou inspecionar o histórico de versões

Sequência de ferramentas:

1. FIGMA_GET_COMMENTS_IN_A_FILE - Lista todos os comentários do arquivo [Opcional]
2. FIGMA_ADD_A_COMMENT_TO_A_FILE - Adiciona um comentário [Opcional]
3. FIGMA_GET_REACTIONS_FOR_A_COMMENT - Obtém reações de comentários [Opcional]
4. FIGMA_GET_VERSIONS_OF_A_FILE - Obtém histórico de versões [Opcional]

Parâmetros principais:

• file_key: Chave do arquivo
• as_md: Retorna comentários em formato Markdown
• message: Texto do comentário
• comment_id: ID do comentário para reações

Armadilhas:

• Comentários podem ser posicionados em nós específicos usando client_meta
• Comentários de resposta não podem ser aninhados (apenas um nível de respostas)

5. Navegar por Projetos e Equipes

Quando usar: O usuário deseja listar projetos ou arquivos de equipe

Sequência de ferramentas:

1. FIGMA_GET_PROJECTS_IN_A_TEAM - Lista projetos de equipe [Opcional]
2. FIGMA_GET_FILES_IN_A_PROJECT - Lista arquivos do projeto [Opcional]

…