Skip to main content
O canvas é a superfície infinita de pan e zoom onde o Replit Design exibe seus frames. Tudo o que você projeta vive aqui: gere frames, arraste-os, dê zoom em um detalhe e itere até que um esteja certo.
Canvas com três frames dispostos no quadro: um Site (Scroll Hero), um APEX X1 Design System, e um mockup de Design do supercarro APEX X1, com a barra de ferramentas flutuante (Chat, Desenhar, Editar, Gerar) na parte inferior

​
Abra o canvas

O canvas é a primeira coisa que você vê no Replit Design. Em um projeto, selecione Design no cabeçalho e o canvas preenche o painel; selecione Build para voltar ao seu app em execução.
Close-up de um cabeçalho de projeto com a alternância entre Design e Build, Design selecionado, acima de frames no canvas
Começar do zero em replit.com/design solicita que você crie um novo design, que abre no canvas. Veja Design vs. Build para saber quando usar cada superfície.

​
O que vive no canvas

  • Frames: cada bloco no quadro. Um frame pode ser um mockup de design, um app web, um app mobile, slides, uma imagem, um vídeo ou um gráfico vetorial. Gere-os a partir de um prompt de chat, do menu Gerar da barra de ferramentas, ou do painel de biblioteca. Tudo o que você faz com um frame, Construir, Focar, sugestões, acontece através do próprio frame: veja Frames.
  • Desenhos e notas: marcações que você adiciona com a ferramenta Desenhar, como esboços, setas, formas e notas adesivas. O Agent lê suas marcações, então você pode circular uma área problemática e pedir uma mudança.
  • O painel de chat: o chat do Agent ancorado ao lado do canvas. Selecionar frames antes de enviar uma mensagem os anexa como snapshots para que o Agent tenha contexto visual.
Para saber o que é cada componente e como eles se encaixam, veja a visão geral dos componentes. Pan, zoom e seleção funcionam a partir de qualquer ferramenta, salvo indicação contrária. Pan (deslocamento):
  • Trackpad: arraste com dois dedos.
  • Mouse: clique com o botão do meio e arraste, ou segure a barra de espaço e clique-arraste com o botão esquerdo.
  • Ferramenta Pan: clique e arraste com o botão esquerdo do mouse.
Zoom:
  • Trackpad: pinça.
  • Mouse: Ctrl (ou Cmd no macOS) + roda de rolagem.
  • Teclado: Cmd/Ctrl + + para ampliar, Cmd/Ctrl + - para reduzir, Cmd/Ctrl + 0 para redefinir o zoom.
O zoom é ancorado no cursor, então o ponto sob o cursor permanece fixo enquanto o resto do quadro se redimensiona ao redor dele. Seleção:
  • Frame único: clique nele com a ferramenta Interagir.
  • Seleção múltipla: segure Shift e clique em cada frame, ou arraste um retângulo de seleção pelo quadro.
  • Desmarcar: clique em uma área vazia, ou pressione Escape.
Selecionar um ou mais frames exibe a barra de ações por frame e anexa esses frames à próxima mensagem do Agent como snapshots.

​
Atalhos de teclado

Clique com o botão direito em qualquer lugar do quadro para abrir um menu de contexto. O menu é contextual, então as ações se adaptam ao que está sob o cursor: um frame recebe ações de frame, enquanto o canvas vazio recebe ações de nível de quadro, e frames de app adicionam Atualizar artefato. Em um frame selecionado, o menu inclui:
O menu do botão direito aberto em um frame de Design selecionado mostrando um supercarro Apex X1 cinza, com as ações Editar, Chat, Focar, Chat pelo cursor, Reordenar, Copiar, Colar, Exportar como…, Duplicar, Excluir e Selecionar tudo.

O menu do botão direito em um frame selecionado.

​
Exportar um frame como PNG

Salve qualquer artefato ou frame de design como uma imagem PNG. Isso é útil para compartilhar uma prévia em um documento ou chat, capturar um snapshot antes de continuar iterando, ou enviar uma captura de tela para um colega de equipe.
1

Selecione o frame

Selecione o artefato ou frame de design que você quer exportar, depois aguarde ele terminar de carregar.
2

Escolha Exportar

Selecione Exportar na barra de ações do frame. Você também pode clicar com o botão direito no frame e selecionar Exportar como… > PNG. A imagem é baixada para o seu computador com um nome de arquivo baseado no nome do frame.
Para copiar o frame selecionado como PNG em vez de baixá-lo, pressione Cmd+Shift+C (ou Ctrl+Shift+C no Windows e Linux).
O PNG exportado corresponde ao que o frame mostra atualmente no canvas. Se o seu app ou design ainda estiver carregando, aguarde ele renderizar completamente antes de exportar.

​
O canvas e o app em execução

O canvas e a prévia do app em execução compartilham o mesmo painel, e alguns modos fazem a ponte entre eles:
  • Modo de foco: a ação Focar em um frame selecionado o expande para preencher a visualização. Selecione Sair do foco na parte superior do quadro para voltar ao canvas.
  • Modo somente leitura: quando o canvas está bloqueado dentro de um contexto de tarefa em segundo plano, as ações de iteração ficam ocultas e só o Focar permanece.
Construir um novo app a partir de um frame de Design requer Core ou Pro; todos os outros recursos do canvas funcionam em qualquer plano. Veja Billing para detalhes de planos.
Referência
  • Visão geral dos componentes: os blocos de construção e como eles se encaixam.
  • Frames: tipos de frame; a barra de ações por frame; Build e Focus.
  • Elements: as peças individuais dentro de um frame.
  • Toolbar: o catálogo completo de ferramentas.
Aprenda