Integração Figma MCP

Use o Agent com o Model Context Protocol (MCP) para trabalhar com seus designs do Figma diretamente no chat. Cole um link do Figma para explorar camadas, extrair variáveis e componentes, capturar screenshots e gerar código a partir de frames selecionados.

​

Recursos

• Gerar código inicial: Transforme frames selecionados em código pronto para produção para inicializar recursos ou iterar mais rápido.
• Extrair dados de design: Acesse variáveis, componentes e especificações de layout definidas no seu arquivo.
• Capturar screenshots de frames: Crie referências visuais de qualquer frame para orientar a implementação.
• Inspecionar atividade MCP: Expanda os eventos do chat para ver as solicitações e respostas em bruto.

​

Demonstração

Veja um passo a passo rápido do fluxo, desde a detecção do link até a geração de código:

​

Uso

​

Conecte no chat do Agent

1. Abra o chat do Agent no Editor de Projeto.
2. Cole um link válido de arquivo ou prototype do Figma na caixa de mensagem.
3. Quando um link válido é detectado, um card de design do Figma aparece. Clique em Log in with Figma para autorizar.

Depois de colar um link suportado, o Agent mostra um card de design do Figma para autorização rápida:

​

Trabalhe com links do Figma

Use fluxos de trabalho baseados em link para agir em partes precisas do seu design:

1. No Figma, copie o link de qualquer frame ou camada.
2. Compartilhe a URL com o Agent na caixa de chat e descreva o que você quer.

No Figma, copie um link para o frame ou camada exato com o qual você quer que o Agent trabalhe: Depois cole o link no Agent junto com uma instrução curta (por exemplo, “gere React para este frame”):

​

Veja as chamadas MCP

Abra o evento da linha do tempo chamado Used Figma MCP (Beta) para ver as solicitações e respostas subjacentes. Aqui está onde expandir o evento da linha do tempo para inspecionar as chamadas MCP:

​

Limites de taxa e requisitos de assento do Figma

O Figma impõe limites de taxa nas chamadas de ferramenta MCP com base no seu plano e tipo de assento do Figma. Esses limites são definidos pelo Figma, não pelo Replit. Assentos Dev e Full também têm limites por minuto: 10/min no Pro, 15/min no Organization e 20/min nos planos Enterprise.

​

O que conta contra o limite

Os limites de taxa se aplicam a ferramentas que leem dados do Figma, como get_design_context e get_image. Algumas ferramentas como whoami e generate_figma_design são isentas.

​

Se você atingir um limite de taxa

O Agent avisa quando um limite de taxa do Figma é atingido. Para aumentar seu limite:

• Em um plano Starter ou conta gratuita: Faça upgrade para um plano Pro, Organization ou Enterprise com um assento Dev ou Full.
• Em um assento View ou Collab: Faça upgrade para um assento Dev ou Full no seu plano atual.
• Em um assento Dev/Full (Organization): Faça upgrade para um plano Enterprise para os limites mais altos.

Para detalhes completos, veja a documentação de planos, acesso e permissões do Figma.

​

Gerencie conexões

Gerencie ou desconecte a integração do Figma em replit.com/integrations. Encontre e gerencie conexões na sua página de integrações do Replit: