Skip to main content
⏰ Tempo estimado: 15 minutos Um design do Figma mostra como a experiência deve parecer. O Replit Design transforma um frame do Figma em um design frame que você pode explorar, refinar e transformar em um app interativo. Você vai usar o Personal Fitness Trainer Template do Figma Community como exemplo.
A landing page do Personal Fitness Trainer importada como um design frame no Replit Design, com a execução marcada como concluída no painel de chat

​
Antes de começar

Você precisa de:
  • Uma conta Replit.
  • Uma conta Figma, com o arquivo que deseja importar ou o arquivo de exemplo acima.

​
Importe o frame do Figma

Traga o frame para o Replit Design e deixe o Agent transformá-lo em um design funcional.
1

Obtenha o link do seu frame do Figma

Use seu próprio arquivo do Figma ou siga o exemplo deste guia: o Personal Fitness Trainer Template no Figma Community.No Figma, clique com o botão direito no frame que deseja importar, escolha Copy/Paste as e depois Copy link to selection.
O Personal Fitness Trainer Template aberto no Figma, mostrando os frames de Cover no painel de camadas e no canvas

O Personal Fitness Trainer Template aberto no Figma, com os frames de Cover que você vai importar.

2

Abra o Replit Design

Acesse replit.com/design e selecione Import Figma abaixo da caixa de prompt.
A home do Replit Design com a opção Import Figma selecionada abaixo da caixa de prompt, e uma dica exibindo 'Traga um frame do Figma e o Agent vai transformá-lo em um design funcional'

Import Figma na home do Replit Design: traga um frame do Figma e o Agent o transforma em um design funcional.

3

Cole a URL e comece a construir

Cole a URL do seu frame na caixa de diálogo Import Figma design e selecione Attach to prompt. O frame é anexado ao seu prompt; envie-o para começar a construir.
A caixa de diálogo Import Figma design no Replit Design com uma URL de frame do Figma colada no campo e o botão Attach to prompt

A caixa de diálogo Import Figma design com a URL do frame colada, pronta para ser anexada ao prompt.

O Agent importa o frame e o reconstrói como um design frame no seu projeto.
A landing page do Personal Fitness Trainer importada como um design frame no Replit Design, com a execução marcada como concluída no painel de chat

A landing page importada do Personal Fitness Trainer como um frame no Replit Design.

​
Deixe do seu jeito

Selecione o frame importado e comece a remodelá-lo:
  • Siga uma sugestão: a importação já vem com próximos passos propostos, como uma variante editorial escura, uma seção de preços ou um viewport mobile. Cada uma gera um novo frame, então o original permanece disponível para comparação.
  • Converse sobre ele: use o campo abaixo do frame e explique com suas próprias palavras, “troque a foto do hero”, “deixe a chamada para ação mais forte”.
O frame importado do Personal Fitness Trainer selecionado no Replit Design, com três cartões de sugestão ao lado: Dark editorial variant, Add a pricing section e Mobile viewport

O frame importado selecionado, com sugestões propondo uma variante editorial escura, uma seção de preços e um viewport mobile.

​
Próximos passos

Explorar sugestões

Explore o que projetar a seguir, um clique de cada vez.

Visual Editor

Refine texto, cores, espaçamento e imagens diretamente.

Construa seu design

Transforme o frame finalizado em um app funcional.

​
Relacionados

​
Créditos

O exemplo de design usado neste guia é o Personal Fitness Trainer Template no Figma Community.