> ## 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.

# Transforme um design Figma em um app interativo

> Importe um frame do Figma no Replit, transforme-o em um app React, teste o resultado e refine-o em uma experiência interativa.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

⏰ *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.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-source.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=1aa070bf0d24decf4c9924c6cf80510b" alt="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" width="1920" height="1080" data-path="images/fitstart/turn-mockup-into-app/figma-source.png" />
</Frame>

## 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](https://replit.com).
* 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.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-import-page.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=381f46b4437197d7caceb78090467d55" alt="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" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-import-page.png" />
</Frame>

<Steps>
  <Step title="Abra a importação do Replit">
    Acesse [replit.com/import](https://replit.com/import).
  </Step>

  <Step title="Selecione Figma Design">
    Escolha **Figma Design** e conecte sua conta Figma.
  </Step>

  <Step title="Copie a URL do frame">
    No Figma, selecione o frame exato que você quer importar e copie sua URL.
  </Step>

  <Step title="Cole e importe">
    Cole a URL do frame no Replit e selecione **Importar**.
  </Step>
</Steps>

### 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.

<Steps>
  <Step title="Abra o Replit e foque na caixa de prompt">
    Acesse [replit.com](https://replit.com). O compositor de prompts está na tela inicial.
  </Step>

  <Step title="Abra o menu de anexo">
    Selecione o botão **+** no compositor de prompts para abrir o menu **Adicionar anexo**.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-prompt-plus.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=4678037001e3566c12af0cacf342edca" alt="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" width="760" height="320" data-path="images/fitstart/turn-mockup-into-app/figma-prompt-plus.png" />
    </Frame>
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-build-result.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=9f0643e91740c5d403d8bc92a1914712" alt="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" width="1440" height="850" data-path="images/fitstart/turn-mockup-into-app/figma-build-result.png" />
</Frame>

## 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.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=813cffb55c2a94d86eebbd92b188ea07" alt="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" width="3452" height="1988" data-path="images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png" />
</Frame>

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:

<AiPrompt>
  Revise este app FitStart importado.<br />
  Mantenha o design visual próximo ao frame do Figma.<br />
  Torne o formulário de treino interativo: um visitante deve escolher um tipo de treino, inserir minutos e uma nota, depois adicionar o treino.<br />
  Após o envio, atualize a lista de treinos de hoje e o total de minutos.<br />
  Preserve o layout desktop e melhore o layout mobile se necessário.
</AiPrompt>

Use o [Editor Visual](/pt/learn/design/visual-editor) quando a mudança é principalmente texto, cor, espaçamento, layout ou polimento de imagem.

Use o [Canvas](/pt/learn/projects-and-artifacts/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.

<Steps>
  <Step title="Abra o Canvas">
    Selecione **Canvas** no cabeçalho do painel do workspace para mudar o painel direito de Preview para Canvas.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-button.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=2bb7f136351d5fe48d7f8364ac5066f3" alt="O cabeçalho do painel do workspace do Replit com a aba Canvas destacada ao lado de Preview e Ferramentas e arquivos" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-button.png" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=ebf02908edafd07e2a8b76f694a54332" alt="O menu Reimaginar aberto em um mockup do Canvas com a opção Experimentar layouts diferentes destacada" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png" />
    </Frame>
  </Step>

  <Step title="Revise os layouts sugeridos">
    Aguarde o Agent gerar as alternativas e depois afaste o zoom para revisá-las ao lado do mockup original.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=0611161518c09408ea9b4790c541938a" alt="O Canvas com o mockup FitStart importado e as sugestões de layout do Agent no painel de chat" width="1440" height="900" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png" />
    </Frame>
  </Step>

  <Step title="Anote com Texto e Desenho">
    Use **Texto** para adicionar notas no canvas.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=d6b2a2422a9199cfa995ddee8f5a6deb" alt="A barra de ferramentas de anotação do Canvas com a ferramenta Texto destacada" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png" />
    </Frame>

    Use **Desenho** para esboçar setas ou formas que apontem para as partes que você quer alterar.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=44811ad4c1579c80dd6e1999c97de9ae" alt="A barra de ferramentas de anotação do Canvas com a ferramenta Desenho destacada" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png" />
    </Frame>
  </Step>

  <Step title="Envie suas anotações ao Agent">
    Com as notas no lugar, peça ao Agent para aplicar o feedback ao app importado.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=6ba511fedb00d712178d5a144359ef0d" alt="O mockup FitStart importado no Canvas com uma anotação de texto apontando para a linha de estatísticas hero" width="1000" height="800" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png" />
    </Frame>
  </Step>
</Steps>

<AiPrompt>
  Use minhas anotações do Canvas para refinar o app FitStart importado.<br />
  Mantenha o comportamento do formulário de treino sem alterações.<br />
  Aplique as notas apenas ao card de progresso, área de meta semanal e espaçamento mobile.<br />
  Depois teste que adicionar um treino ainda atualiza a lista de hoje e o total de minutos.
</AiPrompt>

## Use links do Figma no Agent quando necessário

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](/pt/references/mcp/figma).

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

<CardGroup cols={2}>
  <Card title="Editor Visual" icon="wand-magic-sparkles" href="/pt/learn/design/visual-editor">
    Polir pequenos detalhes visuais como texto, cor, espaçamento e imagens.
  </Card>

  <Card title="Canvas" icon="palette" href="/pt/learn/projects-and-artifacts/canvas">
    Compare direções visuais e anote feedback diretamente no design.
  </Card>

  <Card title="Adicionar um banco de dados" icon="database" href="/build/add-database">
    Salve dados de formulários para que persistam entre recargas.
  </Card>

  <Card title="Adicionar login" icon="lock" href="/build/add-login">
    Coloque telas privadas atrás de autenticação.
  </Card>

  <Card title="Adicionar um domínio personalizado" icon="globe" href="/build/add-custom-domain">
    Dê aos revisores uma URL pública para experimentar o app.
  </Card>

  <Card title="Colabore em um workspace de equipe" icon="users" href="/pt/references/collaboration/team-workspaces">
    Convide colegas de equipe para construir no app importado juntos.
  </Card>
</CardGroup>

## Relacionado

* [Integração Figma MCP](/pt/references/mcp/figma)
* [Canvas](/pt/learn/projects-and-artifacts/canvas)
* [Editor Visual](/pt/learn/design/visual-editor)

## Créditos

O design de exemplo usado neste guia é o [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) na Comunidade Figma.