O que รฉ o Canvas?
O Canvas รฉ um espaรงo para explorar e iterar em designs com o Agent. Aqui, vocรช verรก seus artefatos โ como apps, vรญdeos e slides โ exibidos em um frame. Vocรช pode trabalhar com o Agent para criar mockups, comparar direรงรตes de design e aplicar mudanรงas de volta ao seu app โ tudo a partir de um quadro visual.
O que estรก no Canvas
O Canvas รฉ um quadro infinito onde vocรช pode ver e trabalhar com tudo visualmente.
- Seus apps: Seus apps em execuรงรฃo aparecem como prรฉvias interativas ao vivo diretamente no Canvas. Vocรช pode clicar e usรก-los exatamente como faria em um navegador.
- Mockups de design: Protรณtipos visuais que o Agent cria para vocรช. Eles parecem e funcionam como pรกginas reais โ vocรช pode interagir com eles, redimensionรก-los e pedir ao Agent para ajustรก-los โ mas sรฃo separados do seu app ao vivo para que vocรช possa experimentar livremente.
- Formas e desenhos: Retรขngulos, cรญrculos, estrelas, setas, coraรงรตes e mais. Use-os para esboรงar ideias brutas, marcar designs ou mapear como as telas se conectam.
- Texto e notas adesivas: Adicione rรณtulos ou notas em qualquer lugar do Canvas para organizar seus pensamentos.
- Imagens: Solte capturas de tela ou imagens de referรชncia no Canvas. O Agent pode recriar ou se inspirar no que vรช.
- Vรญdeos: Coloque arquivos de vรญdeo no Canvas ao lado do seu outro conteรบdo.
Obtendo designs no Canvas
Hรก algumas maneiras de comeรงar a criar designs. Escolha a que parecer mais natural.Peรงa ao Agent no chat
Digite o que vocรช quer ver no campo de chat e o Agent o coloca como um frame interativo no Canvas.
Escolha um tipo de saรญda
Vocรช tambรฉm pode escolher que tipo de saรญda quer โ web, mรณvel, slides, design e mais. Use o carrossel para escolher antes de enviar seu prompt.
Fazendo alteraรงรตes
Depois de ter um design no Canvas, hรก vรกrias maneiras de iterรก-lo.Peรงa ao Agent atualizaรงรตes
Selecione um frame no Canvas e digite suas alteraรงรตes no campo que aparece abaixo dele. Quando vocรช pressionar Enter, o Agent recebe a solicitaรงรฃo, executa as atualizaรงรตes e atualiza o mockup diretamente no Canvas.Desenhe e anote
Use as ferramentas de desenho na barra de ferramentas inferior para esboรงar diretamente no Canvas. Desenhe setas apontando para o que vocรช quer mudar, circule รกreas problemรกticas ou adicione notas de texto com seu feedback. Depois peรงa ao Agent para fazer as alteraรงรตes com base nas suas anotaรงรตes.Visualize em diferentes dispositivos
Veja como seus designs ficam em diferentes tamanhos de tela. Peรงa ao Agent para mostrar uma versรฃo mรณvel, tablet ou desktop:- Mobile โ 390 ร 844
- Tablet โ 768 ร 1024
- Desktop โ 1280 ร 720
Aplique as alteraรงรตes ao seu app
Quando estiver satisfeito com um design, aplique as alteraรงรตes de volta ร sua versรฃo principal. O Agent mostra um resumo do que foi feito e dรก a vocรช a opรงรฃo de aplicar ou descartar.Exporte um frame como PNG
Vocรช pode salvar qualquer artefato ou frame de design no Canvas como uma imagem PNG. Isso รฉ รบtil para compartilhar uma prรฉvia em um documento ou chat, capturar um instantรขneo antes de iterar mais ou enviar uma captura de tela para um colega.Abra o menu do frame
Clique com o botรฃo direito no artefato ou frame de design que vocรช quer exportar. Um menu aparece com as aรงรตes disponรญveis.
O PNG exportado corresponde ao que o frame mostra atualmente no Canvas. Se seu app ou design ainda estiver carregando, aguarde atรฉ que renderize completamente antes de exportar.
Comparando direรงรตes de design
Quando nรฃo tiver certeza de qual direรงรฃo seguir, peรงa ao Agent para gerar mรบltiplas versรตes para que vocรช possa comparรก-las lado a lado.- Mรบltiplas versรตes de uma pรกgina: โMostre-me cinco versรตes desta landing page.โ O Agent cria cada uma e as dispรตe uma ao lado da outra.
- Fluxos de mรบltiplas pรกginas: โProjete um fluxo de onboarding completo: boas-vindas, configuraรงรฃo de perfil, preferรชncias e confirmaรงรฃo.โ O Agent constrรณi cada tela e as organiza em ordem.
- Misture e combine: โMostre-me a landing page e a pรกgina de preรงos em um estilo minimalista e em um estilo arrojado.โ O Agent cria cada combinaรงรฃo para que vocรช possa ver o quadro completo.
Mapeando fluxos de usuรกrio
Disponha jornadas completas de usuรกrio no Canvas โ cadastro, onboarding, dashboard, configuraรงรตes โ e organize-as para ver como tudo se conecta.- Coloque cada tela como um frame separado
- Peรงa ao Agent para gerar o fluxo completo: โDesenhe o fluxo completo de onboarding do meu appโ
- Use setas e formas para mostrar como os usuรกrios se movem entre as telas
- Peรงa ao Agent para transformar esboรงos brutos em designs refinados
Transformando um design em um app real
Quando estiver satisfeito com um design e quiser tornรก-lo real, hรก dois caminhos:Torne-o um app completo
Se o seu design precisa de funcionalidade real โ como salvar dados, contas de usuรกrio ou conexรฃo com outros serviรงos โ peรงa ao Agent para transformรก-lo em um app completo. Diga algo como โTorne isso um app realโ ou โAdicione um backend a isso.โ O Agent constrรณi tudo que precisa para funcionar como um app real e publicรกvel.Transformar um design em um app completo requer um plano pago.
Converta para um tipo especรญfico
Vocรช tambรฉm pode converter um frame de design em um tipo de artefato especรญfico:Peรงa ao Agent para converter
Diga ao Agent o que vocรช quer โ por exemplo, โConverta isso em um web appโ ou โTransforme isso em slides.โ
Perguntas frequentes
Os frames de design sรฃo iguais ao meu app em execuรงรฃo?
Os frames de design sรฃo iguais ao meu app em execuรงรฃo?
Nรฃo. Os frames de design sรฃo protรณtipos visuais โ eles parecem e funcionam como o app real, mas nรฃo tรชm um backend ou banco de dados funcionando por trรกs deles. As prรฉvias do seu app no Canvas, por outro lado, sรฃo seu app real em execuรงรฃo.
Posso redesenhar uma pรกgina sem quebrar meu app ao vivo?
Posso redesenhar uma pรกgina sem quebrar meu app ao vivo?
Sim. Peรงa ao Agent para trazer uma pรกgina para o Canvas โ por exemplo, โColoque meu dashboard no canvas.โ O Agent faz uma cรณpia com a qual vocรช pode experimentar. Seu app ao vivo nรฃo รฉ afetado atรฉ que vocรช escolha aplicar as alteraรงรตes.
Como transformo um design em um app real?
Como transformo um design em um app real?
Peรงa ao Agent para tornรก-lo um app completo (โTorne isso realโ) ou converta-o para um tipo especรญfico (โConverta isso em um web appโ). O Agent constrรณi tudo que precisa para se tornar um app funcional e publicรกvel.
Posso converter para tipos alรฉm de web apps?
Posso converter para tipos alรฉm de web apps?
Sim. Vocรช pode transformar frames do Canvas em web apps, apps mรณveis, slides, visualizaรงรตes de dados e mais.
Posso importar designs do Figma ou outras ferramentas?
Posso importar designs do Figma ou outras ferramentas?
Sim. Hรก algumas maneiras de trazer designs do Figma para o Replit:
- Importar do Figma: Acesse replit.com/import, conecte sua conta do Figma e cole um URL de frame para converter um design em um app React funcional. Veja o guia de inรญcio rรกpido Importar do Figma para detalhes.
- Figma MCP no chat do Agent: Cole um link do Figma diretamente no chat do Agent e peรงa para gerar cรณdigo, extrair dados de design ou construir um componente a partir do design. Veja o guia de Integraรงรฃo Figma MCP.
- Referรชncia de captura de tela: Solte uma captura de tela no Canvas e peรงa ao Agent para recriar o design a partir dela.
O que mais posso colocar no Canvas?
O que mais posso colocar no Canvas?
Alรฉm de mockups de design e prรฉvias de apps, vocรช pode adicionar formas, setas, rรณtulos de texto, notas adesivas, imagens e vรญdeos โ รบteis para esboรงar ideias, anotar designs ou organizar seu pensamento.