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

# Canvas

> Abra, navegue e adicione ao canvas, a superfície infinita onde o Replit Design exibe seus frames.

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.

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=5cd2330c89bbdedfb249151ee582f070" alt="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" width="2000" height="1255" data-path="images/replitai/canvas-overview.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-design-button.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=08c21763270694a8ecd5d2d62e83f8a9" alt="Close-up de um cabeçalho de projeto com a alternância entre Design e Build, Design selecionado, acima de frames no canvas" width="987" height="619" data-path="images/replitai/canvas-design-button.png" />
</Frame>

Começar do zero em [replit.com/design](https://replit.com/design) solicita que você crie um novo design, que abre no canvas. Veja [Design vs. Build](/pt/design/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](/pt/design/toolbar#generate) da barra de ferramentas, ou do [painel de biblioteca](/pt/design/library-panel). Tudo o que você faz com um frame, Construir, Focar, sugestões, acontece através do próprio frame: veja [Frames](/pt/design/frames).
* **Desenhos e notas**: marcações que você adiciona com a [ferramenta Desenhar](/pt/design/toolbar#draw), 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](/pt/design/core-components).

## Navegue pelo quadro

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](/pt/design/toolbar#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](/pt/design/toolbar#interact).
* 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](/pt/design/frames#per-frame-action-bar) e anexa esses frames à próxima mensagem do Agent como snapshots.

### Atalhos de teclado

| Atalho                         | Ação                                      |
| ------------------------------ | ----------------------------------------- |
| `V`                            | Ativar a ferramenta Interagir             |
| `H`                            | Ativar a ferramenta Pan                   |
| Segurar `Espaço` + arrastar    | Fazer pan a partir de qualquer ferramenta |
| `Cmd` / `Ctrl` + rolagem       | Zoom                                      |
| `Cmd` / `Ctrl` + `+`           | Ampliar                                   |
| `Cmd` / `Ctrl` + `-`           | Reduzir                                   |
| `Cmd` / `Ctrl` + `0`           | Redefinir zoom                            |
| `Shift` + clique               | Adicionar um frame à seleção atual        |
| `Cmd` / `Ctrl` + `Shift` + `C` | Copiar o frame selecionado como PNG       |
| `Escape`                       | Desmarcar                                 |

## Menu do botão direito

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:

| Ação                             | Atalho                        | O que faz                                                                 |
| -------------------------------- | ----------------------------- | ------------------------------------------------------------------------- |
| Editar                           |                               | Mudar para a ferramenta Editar para selecionar elementos dentro do frame. |
| Chat                             |                               | Conversar com o Agent sobre o frame.                                      |
| Focar                            |                               | Entrar no [modo de foco](/pt/design/frames#focus) no frame.               |
| Chat pelo cursor                 | `/`                           | Iniciar um chat rápido na posição do cursor.                              |
| Reordenar                        |                               | Mover o frame para frente ou para trás na ordem de empilhamento.          |
| Copiar, Colar, Duplicar, Excluir | `⌘C`, `⌘V`, `⌘D`, `Backspace` | Gerenciamento padrão de área de transferência e de frames.                |
| Exportar como…                   |                               | Exportar o frame como um arquivo.                                         |
| Selecionar tudo                  | `⌘A`                          | Selecionar todos os frames do quadro.                                     |

<Frame caption="O menu do botão direito em um frame selecionado.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-right-click-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=7c57a64a352438ea80d992ad6803278c" alt="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." width="2000" height="1252" data-path="images/replitai/canvas-right-click-menu.png" />
</Frame>

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

<Steps>
  <Step title="Selecione o frame">
    Selecione o artefato ou frame de design que você quer exportar, depois aguarde ele terminar de carregar.
  </Step>

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

Para copiar o frame selecionado como PNG em vez de baixá-lo, pressione `Cmd+Shift+C` (ou `Ctrl+Shift+C` no Windows e Linux).

<Note>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.</Note>

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

<Note>
  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](/pt/billing/ai-billing) para detalhes de planos.
</Note>

**Referência**

* [Visão geral dos componentes](/pt/design/core-components): os blocos de construção e como eles se encaixam.
* [Frames](/pt/design/frames): tipos de frame; a barra de ações por frame; Build e Focus.
* [Elements](/pt/design/elements): as peças individuais dentro de um frame.
* [Toolbar](/pt/design/toolbar): o catálogo completo de ferramentas.

**Aprenda**

* [Explorar sugestões](/pt/design/explore-suggestions): ramifique novas direções a partir de um frame selecionado e aplique o vencedor ao seu app.
* [Design vs. Build](/pt/design/design-vs-build): quando usar cada superfície.