> ## 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. # Barra de Ferramentas > Referência para a barra de ferramentas do Canvas — Interagir, Pan, Chat, Desenho, Editar, Gerar — além de gestos do quadro. A barra de ferramentas do Canvas é uma barra flutuante ancorada na parte inferior central do quadro. Ela expõe as ferramentas que você usa para navegar, desenhar, editar e adicionar conteúdo. A barra de ferramentas aparece no modo Canvas. Close-up da barra de ferramentas do Canvas com botões Interagir (selecionado) e Pan somente com ícone à esquerda, seguidos pelos botões rotulados Chat, Desenho, Editar e Gerar à direita ## Ferramentas Selecionar uma ferramenta a ativa. A ferramenta ativa é destacada com um fundo preenchido. O conjunto mais à esquerda é de navegação (Interagir, Pan). O restante são ferramentas de conteúdo e marcação. As ferramentas são mutuamente exclusivas, o que significa que selecionar uma desativa as demais. ### Interagir **Interagir** é a ferramenta padrão. Use-a para selecionar frames, arrastá-los e clicar em um Artefato ao vivo para usá-lo como um app em execução. Com Interagir ativo, clicar em um frame o seleciona e exibe a [barra de ações por frame](/pt/references/design/frames#per-frame-action-bar). Canvas com um artefato Website selecionado usando a ferramenta Interagir — o frame está contornado com alças de seleção rosas, a barra de ações por frame (Reimaginar e Visualizar) é mostrada acima, e o campo inline 'Solicitar alterações ou conversar sobre o frame…' é mostrado abaixo. A ferramenta Interagir está destacada na barra de ferramentas flutuante na parte inferior. **Atalho de teclado:** `V`. **Acesso:** sempre disponível. ### Pan **Pan** alterna o cursor para uma ferramenta de agarrar, para que você possa arrastar o próprio quadro. Com Pan ativo, clicar e arrastar move o viewport em vez de selecionar um frame. Você também pode fazer pan a partir de qualquer outra ferramenta segurando a barra de espaço e arrastando, ou clicando com o botão do meio e arrastando. Canvas com a ferramenta Pan ativa — um artefato Website (Velocity — Supercar Rental) e um mockup de Design (Velocity — Home (Mockup)) estão visíveis no quadro, e a ferramenta Pan (cursor de mão) está destacada na barra de ferramentas flutuante na parte inferior. **Atalho de teclado:** `H`. **Acesso:** sempre disponível. ### Chat **Chat** coloca um pequeno compositor de chat diretamente no quadro para que você possa promover o Agent sem sair do Canvas. Elementos e frames selecionados ainda são anexados à mensagem como snapshots, assim como quando você envia pelo painel lateral de chat do Agent. Canvas no modo Chat com o restante do quadro esmaecido e o compositor de chat inline sobreposto em um artefato Website. Um chip 'div' no compositor indica um elemento selecionado, e o prompt diz 'sugerir três alternativas para esta imagem'. A ferramenta Chat está destacada na barra de ferramentas flutuante na parte inferior. **Acesso:** Ferramenta Chat (somente desktop). ### Desenho **Desenho** ativa as ferramentas de marcação, como desenho à mão livre, setas, notas adesivas e formas, para que você possa esboçar sobre os frames ou anotar o quadro. Use-a para circular áreas problemáticas, apontar elementos que deseja alterar ou deixar uma nota escrita ao lado de um frame. Quando Desenho está ativo, uma barra de **Propriedades de forma** aparece acima da barra de ferramentas flutuante com controles de cor, traço e preenchimento para a ferramenta de marcação atual. Ela se oculta automaticamente quando você alterna de volta para Interagir ou Pan. Canvas com a ferramenta Desenho ativa — um retângulo 'Widget' desenhado e uma nota adesiva roxa 'Add a widget' estão posicionados ao lado de um frame. A barra de Propriedades de forma (ferramentas de lápis, texto, retângulo, seta, nota adesiva mais amostras de cor e um controle de tamanho de texto Aa) está visível acima da barra de ferramentas flutuante, com Desenho destacado. **Acesso:** sempre disponível. ### Editar **Editar** é o seletor visual de elementos. Com Editar ativo, clique dentro de um Artefato ao vivo para selecionar um elemento (um botão, um cabeçalho, uma imagem). Selecionar um elemento abre o **Editor Visual** — um painel lateral direito de controles (Layout, Cor, Borda e mais) vinculado a um prompt inline para pedir ao Agent que altere apenas aquela parte. Consulte [Elementos](/pt/references/design/elements) e [Editor Visual](/pt/learn/design/visual-editor) para o fluxo completo. Canvas com a ferramenta Editar ativa — um elemento de imagem em um artefato Website está selecionado (destacado em azul com um chip 'img'), e o painel do Editor Visual mostra controles de Layout (Espaço Externo/Interno), Cor (Opacidade) e Borda (cor, largura, raio) além dos botões Descartar e Salvar edições. A ferramenta Editar está destacada na barra de ferramentas flutuante. **Acesso:** sempre disponível (desktop). Desativado até que pelo menos um frame exista; a dica de ferramenta diz *"Crie um artefato ou gere um design para editar."* Oculto no mobile. ### Gerar **Gerar** abre o popover **Gerar mídia** para imagens, vídeos e gráficos vetoriais. Escolha um tipo, escreva um prompt e o Agent coloca o resultado como um novo frame no quadro. O menu + Adicionar do Canvas aberto com quatro opções empilhadas verticalmente: Design ('Criar interfaces e conceitos visuais'), Image ('Gerar e editar imagens'), Video ('Gerar clipes de movimento e animações') e Vector Graphic ('Gerar ilustrações vetoriais e SVGs'). O slot Gerar na barra de ferramentas flutuante na parte inferior agora mostra '+ Gerar'. O popover tem quatro abas no topo: * **Design** * **Image** * **Video** * **Vector Graphic** Alguns controles são compartilhados entre os tipos; outros são específicos de cada tipo. **Controles compartilhados (todos os tipos):** * **Modelo**: o modelo de geração a ser usado. Os modelos disponíveis variam por tipo (veja a tabela abaixo). * **Prompt**: descrição em linguagem natural do que você deseja que o Agent gere. * **Gerar**: envia a solicitação e reserva um frame de placeholder na posição do cursor. O placeholder passa para um frame ao vivo quando o ativo estiver pronto; se a geração falhar, o placeholder é removido e um erro aparece no painel de chat. **Modelos e controles por tipo:** | Tipo | Ideal para | Modelos atuais | Controles específicos do tipo | | ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------ | | **Image** | Saída raster (PNG / JPG); imagens de moodboard, fotos hero, arte de referência | Nano Banana, Nano Banana 2, Nano Banana Pro, ChatGPT Images 2.0 | Proporção (`1:1`, `16:9`, `9:16`, `4:3`, `3:4`) · Tamanho (`1K`, `2K`, `4K`) | | **Video** | Clipes de movimento curtos e animações | Veo 3.1, Seedance 2.0 | Proporção · Resolução (ex: `720p`) · Duração (ex: `4s`) · Alternância de áudio | | **Graphic** | Saída vetorial SVG; ícones, logos, diagramas, ilustrações estilizadas | Claude 4.6 Opus, Gemini 3.1 Pro Preview | Alternância animado | A seleção de modelos muda com frequência. A tabela reflete o que está disponível atualmente; verifique o menu suspenso no produto para saber o que sua conta pode usar hoje. Para saber o que é cada tipo de frame e o que você pode fazer com ele após ser criado, consulte [Frames](/pt/references/design/frames). #### Anexar referências visuais Antes de gerar, você pode anexar itens já presentes no seu quadro como referências visuais. O Agent usa essas referências para guiar o resultado, de modo que ele corresponda à aparência do seu projeto. Abra o menu **+** dentro do formulário **Gerar mídia** e escolha uma opção: * **Fazer upload de arquivo**: faça upload de uma imagem do seu computador para usar como referência. * **Selecionar elementos do canvas**: escolha itens existentes do quadro. Frames são capturados como capturas de tela; formas de texto e notas são anexadas como resumos de texto. Cada referência aparece como um chip no formulário. Adicione quantas precisar, escreva seu prompt e selecione **Gerar**. Para remover uma referência, selecione o chip. O formulário Gerar mídia no Canvas com o menu de mais aberto, mostrando as opções Fazer upload de arquivo e Selecionar elementos do canvas e o menu suspenso de modelo definido como Nano Banana Pro O ChatGPT Images 2.0 não suporta uploads no momento. Troque o modelo, por exemplo para Nano Banana Pro, para anexar referências visuais. Quando o **menu Adicionar** está habilitado, o botão Gerar é substituído por um menu **+** que consolida os tipos do popover com **Design** (um mockup visual independente que não toca o código ao vivo): **Acesso:** Geração de imagens. **Gráfico Vetorial** precisa de geração de gráficos vetoriais; **Vídeo** precisa de geração de vídeo. O menu **+** requer o menu Adicionar (que por sua vez requer geração de imagens). ## Atalhos de teclado | Atalho | Ação | | -------------------------- | ----------------------------------- | | `V` | Ativar a ferramenta Interagir | | `H` | Ativar a ferramenta Pan | | Segurar `Space` + arrastar | Pan a partir de qualquer ferramenta | | `Cmd` / `Ctrl` + scroll | Zoom | | `Cmd` / `Ctrl` + `+` | Ampliar | | `Cmd` / `Ctrl` + `-` | Reduzir | | `Cmd` / `Ctrl` + `0` | Redefinir zoom | | `Shift` + clique | Adicionar um frame à seleção atual | | `Escape` | Desselecionar | ## Gestos do quadro Pan, zoom e seleção funcionam a partir de qualquer ferramenta, salvo indicação. **Pan:** * Trackpad: arrastar com dois dedos. * Mouse: clicar com o botão do meio e arrastar, ou segurar a barra de espaço e arrastar com o botão esquerdo. * Ferramenta Pan: clicar e arrastar com o botão esquerdo do mouse. **Zoom:** * Trackpad: pinçar. * 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, de modo que o ponto sob o cursor fica fixo enquanto o restante do quadro escala ao redor. **Seleção:** * Frame único: clique nele com a ferramenta Interagir. * Multisseleção: segure `Shift` e clique em cada frame, ou arraste um retângulo de marquise pelo quadro. * Desselecionar: clique em uma área vazia ou pressione `Escape`. Selecionar um ou mais frames exibe a [barra de ações por frame](/pt/references/design/frames#per-frame-action-bar) e anexa esses frames à próxima mensagem do Agent como snapshots. ## Páginas relacionadas * [Canvas](/pt/references/design/canvas) — visão geral e anatomia. * [Frames](/pt/references/design/frames) — Tipos de frames; a barra de ações por frame; Reimaginar, Refinar, Anotar e Construir. * [Elementos](/pt/references/design/elements) — as partes individuais dentro de um frame. * [Editor Visual](/pt/learn/design/visual-editor) — o fluxo de seleção de elementos que a ferramenta Editar abre.