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 capturas de tela e gerar código a partir de frames selecionados.Documentation Index
Fetch the complete documentation index at: https://docs.replit.com/llms.txt
Use this file to discover all available pages before exploring further.
Requisitos de licença: Uma licença Figma Dev ou Full é recomendada para os recursos de chat do Agent. Licenças Free, Starter e Viewer têm limite de 6 chamadas de ferramentas MCP por mês. O fluxo de importação em replit.com/import tem limites separados — veja os limites de taxa abaixo.
Quer transformar um design do Figma em um novo app? Veja o Guia de importação do Figma.
A integração do Figma com MCP usa um servidor remoto — você não precisa ter o aplicativo desktop do Figma em execução ou instalado para usar esse recurso no Agent.
Recursos
- Gerar código inicial: Transforme frames selecionados em código pronto para produção para acelerar o desenvolvimento de funcionalidades.
- Extrair dados de design: Acesse variáveis, componentes e especificações de layout definidos no seu arquivo.
- Capturar capturas de tela de frames: Crie referências visuais a partir de qualquer frame para orientar a implementação.
- Inspecionar atividade MCP: Expanda os eventos do chat para visualizar requisições e respostas brutas.
Demonstração
Assista a um rápido tutorial do fluxo, desde a detecção de links até a geração de código:Uso
Conectar no chat do Agent
- Abra o chat do Agent no Project Editor.
- Cole um link válido de arquivo ou protótipo do Figma na caixa de mensagem.
- Quando um link válido for detectado, um card de design do Figma aparecerá. Clique em Entrar com o Figma para autorizar.
Trabalhar com links do Figma
Use fluxos baseados em links para agir em partes precisas do seu design:- No Figma, copie o link para qualquer frame ou camada.
- Compartilhe a URL com o Agent na caixa de chat e descreva o que você quer.
Visualizar chamadas MCP
Abra o evento da linha do tempo rotulado Usou o Figma MCP (Beta) para ver as requisições e respostas subjacentes. Veja onde expandir o evento da linha do tempo para inspecionar as chamadas MCP:
O acesso MCP ao Figma é orientado para leitura e respeita as suas permissões do Figma. Se um arquivo for privado ou você não tiver acesso, a integração não conseguirá buscar o conteúdo.
Limites de taxa e requisitos de licença do Figma
O Figma aplica limites de taxa nas chamadas de ferramentas MCP com base no seu plano e tipo de licença do Figma. Esses limites são definidos pelo Figma, não pelo Replit.| Tipo de licença | Starter / Free | Pro / Organization | Enterprise |
|---|---|---|---|
| View, Collab | 6 chamadas / mês | 6 chamadas / mês | 6 chamadas / mês |
| Dev, Full | — | 200 chamadas / dia | 600 chamadas / dia |
O que conta para o limite
Os limites de taxa se aplicam a ferramentas que leem dados do Figma, comoget_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 informa 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 uma licença Dev ou Full.
- Em uma licença View ou Collab: Faça upgrade para uma licença Dev ou Full no seu plano atual.
- Em uma licença Dev/Full (Organization): Faça upgrade para um plano Enterprise para os limites mais altos.
Gerenciar 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: