Saltar para o conteúdo principal

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.

⏰ Tempo estimado: 15 minutos Um design no Figma mostra como a experiência deve parecer. Replit pode transformar um frame do Figma em um app React que você pode testar, refinar e compartilhar. Você usará o FitStart como exemplo: um frame do Figma para um dashboard de rastreador de fitness que precisa de um formulário de treino funcional, card de progresso, meta semanal e layout mobile.
O frame Figma de origem para o rastreador de fitness FitStart mostrando o dashboard, perfil e telas de suporte que você vai transformar em um app Replit interativo

​
O que você vai aprender

Você vai aprender como:
  • Preparar um frame do Figma para melhores resultados de importação.
  • Importar um frame do Figma no Replit.
  • Verificar o que o Replit preservou do design.
  • Refinar comportamento, responsividade e polimento após a importação.
  • Usar Agent, Canvas e o Editor Visual quando o app importado precisar de alterações.

​
Antes de começar

Você precisa de:
  • Uma conta Replit.
  • Um arquivo Figma com o frame que você quer importar.
  • Acesso para conectar sua conta Figma.
  • A URL do frame exato do Figma que você quer transformar em app.
Os limites de importação do Figma são definidos pelo Figma — para limites exatos e requisitos de conta, consulte a documentação do próprio desenvolvedor do Figma.

​
Importe o frame do Figma

Use o fluxo de importação do Replit para transformar o frame em um app React.
A página de importação do Replit com o bloco Figma Design destacado; selecioná-lo abre o fluxo de importação do Figma que transforma um frame em um app React
1

Abra a importação do Replit

Acesse replit.com/import.
2

Selecione Figma Design

Escolha Figma Design e conecte sua conta Figma.
3

Copie a URL do frame

No Figma, selecione o frame exato que você quer importar e copie sua URL.
4

Cole e importe

Cole a URL do frame no Replit e selecione Importar.

​
Ou anexe o Figma diretamente a um prompt

Se você preferir passar o frame ao Agent junto com um prompt de construção, use o menu de anexo do compositor de prompts em vez do assistente de importação.
1

Abra o Replit e foque na caixa de prompt

Acesse replit.com. O compositor de prompts está na tela inicial.
2

Abra o menu de anexo

Selecione o botão + no compositor de prompts para abrir o menu Adicionar anexo.
O compositor de prompts do Replit com o botão de mais destacado; selecioná-lo abre o menu Adicionar anexo onde você pode importar um design do Figma
3

Escolha Importar um design do Figma

Selecione Importar um design do Figma e cole a URL do frame exato do Figma que você quer usar como base para a construção.
4

Descreva o que construir

Digite um prompt curto dizendo ao Agent o que fazer com o design — por exemplo, o que deve ser interativo, o que deve ficar próximo aos visuais e qual comportamento desktop e mobile você espera. Envie quando estiver pronto.
O Agent importa o frame e constrói um app interativo com base no seu prompt. Teste-o no Preview quando a construção terminar.
O app FitStart interativo construído pelo Agent a partir do frame Figma, rodando em uma aba do navegador com cards de estatísticas, um formulário Registrar Treino, as entradas de hoje e um gráfico de tendência de 7 dias

​
O que o Replit importa

O Replit usa o frame do Figma para criar um projeto React. A importação pode incluir:
  • Estilo de tema e componentes.
  • Imagens e assets de ícones.
  • Scaffolding do app para um projeto React.
A importação fornece um ponto de partida funcional. Você ainda deve testar comportamento, responsividade e quaisquer interações que o design não define completamente.

​
Verifique o que o Agent construiu

Após a importação, abra o Preview e compare o app com o frame do Figma.
A página inicial do FitStart Personal Fitness Trainer importada rodando no Preview junto com o histórico de checkpoints do Agent, mostrando o hero, o badge de garantia de reembolso e a linha de estatísticas que o Agent construiu a partir do frame Figma
Verificações visuais:
  • O layout corresponde suficientemente ao frame do Figma.
  • Cores, tipografia, espaçamento e assets são preservados.
  • Imagens e ícones importantes aparecem.
  • O app funciona em tamanhos desktop e mobile.
Verificações de interação:
  • Botões e links fazem o que você espera.
  • Formulários, menus, abas ou navegação estão presentes se necessário.
  • O app ainda funciona após recarregar.
  • Qualquer coisa faltando é clara o suficiente para pedir ao Agent que adicione.

​
Refine o app após a importação

Algum comportamento pode precisar ser adicionado após a importação. Use o Agent quando a mudança afeta interações, dados, múltiplas telas ou lógica oculta. Para o FitStart, peça ao Agent para tornar o design importado interativo: Use o Editor Visual quando a mudança é principalmente texto, cor, espaçamento, layout ou polimento de imagem. Use o Canvas quando você quiser anotar feedback visual, comparar variantes ou mostrar o que deve mudar diretamente no design.

​
Compare layouts e anote no Canvas

O Canvas transforma o app importado em um quadro de forma livre onde você pode pedir ao Agent layouts alternativos e marcar o design com textos e esboços.
1

Abra o Canvas

Selecione Canvas no cabeçalho do painel do workspace para mudar o painel direito de Preview para Canvas.
O cabeçalho do painel do workspace do Replit com a aba Canvas destacada ao lado de Preview e Ferramentas e arquivos
2

Experimente layouts diferentes

Clique no seu mockup importado, selecione Reimaginar e escolha Experimentar layouts diferentes. O Agent sugere layouts alternativos que mantêm o conteúdo mas reorganizam a hierarquia visual.
O menu Reimaginar aberto em um mockup do Canvas com a opção Experimentar layouts diferentes destacada
3

Revise os layouts sugeridos

Aguarde o Agent gerar as alternativas e depois afaste o zoom para revisá-las ao lado do mockup original.
O Canvas com o mockup FitStart importado e as sugestões de layout do Agent no painel de chat
4

Anote com Texto e Desenho

Use Texto para adicionar notas no canvas.
A barra de ferramentas de anotação do Canvas com a ferramenta Texto destacada
Use Desenho para esboçar setas ou formas que apontem para as partes que você quer alterar.
A barra de ferramentas de anotação do Canvas com a ferramenta Desenho destacada
5

Envie suas anotações ao Agent

Com as notas no lugar, peça ao Agent para aplicar o feedback ao app importado.
O mockup FitStart importado no Canvas com uma anotação de texto apontando para a linha de estatísticas hero
Após a importação, você pode colar links do Figma no chat do Agent quando quiser que o Agent inspecione um frame ou camada específico, extraia dados de design ou compare a implementação com o design. Um assento Figma Dev ou Full é recomendado para recursos de chat do Agent. Para detalhes, veja Integração Figma MCP. Parabéns por concluir o tutorial! Você transformou um frame do Figma em um app Replit interativo e o refinou em algo que pode compartilhar e testar.

​
Próximos passos

Editor Visual

Polir pequenos detalhes visuais como texto, cor, espaçamento e imagens.

Canvas

Compare direções visuais e anote feedback diretamente no design.

Adicionar um banco de dados

Salve dados de formulários para que persistam entre recargas.

Adicionar login

Coloque telas privadas atrás de autenticação.

Adicionar um domínio personalizado

Dê aos revisores uma URL pública para experimentar o app.

Colabore em um workspace de equipe

Convide colegas de equipe para construir no app importado juntos.

​
Relacionado

​
Créditos

O design de exemplo usado neste guia é o Personal Fitness Trainer Template na Comunidade Figma.