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 dos 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 assento: Um assento Dev ou Full no Figma é recomendado para os recursos de chat do Agent. Assentos Free, Starter e Viewer estão limitados a 6 chamadas de ferramenta MCP por mês. O fluxo de importação em replit.com/import possui limites separados — consulte os limites de taxa abaixo.
Quer transformar um design do Figma em um novo aplicativo? Consulte o guia Transformar um design do Figma em um aplicativo interativo.
A integração Figma MCP usa um servidor remoto — você não precisa do aplicativo desktop do Figma em execução ou instalado para usar este recurso no Agent.
Funcionalidades
- Gere código inicial: Transforme frames selecionados em código pronto para produção para iniciar funcionalidades ou iterar mais rapidamente.
- Extraia dados de design: Acesse variáveis, componentes e especificações de layout definidas no seu arquivo.
- Capture screenshots de frames: Crie referências visuais de qualquer frame para orientar a implementação.
- Inspecione a atividade MCP: Expanda eventos do chat para visualizar requisições e respostas brutas.
Demonstração
Assista a um breve tutorial do fluxo de trabalho desde a detecção do link até a geração de código:Uso
Conectar no chat do Agent
- Abra o chat do Agent no Editor de Projeto.
- Cole um link válido de arquivo ou protótipo do Figma na caixa de mensagem.
- Quando um link válido for detectado, um cartão de design do Figma aparece. Clique em Log in with Figma para autorizar.
Trabalhar com links do Figma
Use fluxos de trabalho 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.
Ver chamadas MCP
Abra o evento da linha do tempo rotulado como Used Figma MCP (Beta) para ver as requisições e respostas subjacentes. Aqui é onde você expande o evento da linha do tempo para inspecionar as chamadas MCP:
O acesso MCP ao Figma é orientado à leitura e respeita suas permissões do Figma. Se um arquivo for privado ou você não tiver acesso, a integração não pode buscar o conteúdo.
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. Esses limites são definidos pelo Figma, não pelo Replit.| Tipo de assento | 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 contra 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 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 obter 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: