> ## 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 da barra de ferramentas do Canvas — Interact, Pan, Chat, Draw, Edit, Generate — além dos 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 os botões apenas com ícone Interact (selecionado) e Pan à esquerda, seguidos pelos botões rotulados Chat, Draw, Edit e Generate à direita ## Ferramentas Selecionar uma ferramenta a torna ativa. A ferramenta ativa é destacada com um fundo preenchido. O grupo mais à esquerda é de navegação (Interact, 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 outras. ### Interact **Interact** é a ferramenta padrão. Use-a para selecionar frames, arrastá-los e clicar dentro de um Artifact ativo para usá-lo como um aplicativo real em execução. Com o Interact ativo, clicar em um frame o seleciona e exibe a [barra de ações por frame](/pt/features/design/frames#per-frame-action-bar). Canvas com um artefato de Website selecionado usando a ferramenta Interact — o frame está contornado com alças de seleção rosa, a barra de ações por frame (Reimagine e Preview) é exibida acima dele, e o campo inline 'Request changes or chat about frame…' é exibido abaixo. A ferramenta Interact está destacada na barra de ferramentas flutuante na parte inferior. **Atalho de teclado:** `V`. **Disponibilidade:** sempre ativa. ### Pan **Pan** alterna o cursor para uma ferramenta de arrastar para que você possa mover o quadro em si. Enquanto o Pan está ativo, clicar e arrastar move a viewport em vez de selecionar um frame. Você também pode fazer pan a partir de qualquer outra ferramenta mantendo a barra de espaço pressionada e arrastando, ou clicando com o botão do meio e arrastando. Canvas com a ferramenta Pan ativa — um artefato de Website (Velocity — Supercar Rental) e um mockup de Design (Velocity — Home (Mockup)) sã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`. **Disponibilidade:** sempre ativa. ### Chat **Chat** insere um pequeno compositor de chat diretamente no quadro para que você possa enviar prompts ao Agent sem sair do Canvas. Os elementos e frames selecionados continuam anexados à mensagem como snapshots, da mesma forma que ao enviar pelo painel de chat lateral do Agent. Canvas em modo Chat com o restante do quadro escurecido e o compositor de chat inline sobreposto a um artefato de Website. Um rótulo 'div' no compositor indica um elemento selecionado, e o prompt diz 'suggest three alternatives to this image'. A ferramenta Chat está destacada na barra de ferramentas flutuante na parte inferior. **Disponibilidade:** ferramenta Chat (apenas desktop). ### Draw **Draw** ativa as ferramentas de marcação, como desenho 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 para elementos que você quer alterar, ou deixar uma nota escrita ao lado de um frame. Quando o Draw está ativo, uma barra **Shape properties** 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ê volta para o Interact ou o Pan. Canvas com a ferramenta Draw ativa — um retângulo desenhado 'Widget' e uma nota adesiva roxa 'Add a widget' são posicionados ao lado de um frame. A barra Shape properties (ferramentas de lápis, texto, retângulo, seta, nota adesiva, além de amostras de cor e um controle de tamanho de texto Aa) está visível acima da barra de ferramentas flutuante, com o Draw destacado. **Disponibilidade:** sempre ativa. ### Edit **Edit** é o seletor visual de elementos. Com o Edit ativo, clique dentro de um Artifact ativo para direcionar um elemento (um botão, um título, uma imagem). Selecionar um elemento abre o **Editor Visual** — um painel de controles no lado direito (Layout, Color, Border e mais) combinado com um prompt inline para pedir ao Agent que altere apenas aquela peça. Consulte [Elements](/pt/features/design/elements) e [Editor Visual](/pt/learn/design/visual-editor) para o fluxo completo. Canvas com a ferramenta Edit ativa — um elemento de imagem em um artefato de Website está selecionado (destacado em azul com um rótulo 'img'), e o painel do Editor Visual mostra os controles Layout (Outer/Inner space), Color (Opacity) e Border (color, width, radius), além dos botões Discard e Save edits. A ferramenta Edit está destacada na barra de ferramentas flutuante. **Disponibilidade:** sempre ativa (desktop). Desabilitada até que exista pelo menos um frame; a dica de contexto diz *"Create an artifact or generate a design to edit."* Oculta em mobile. ### Generate **Generate** abre o popover **Generate media** para imagens, vídeos e gráficos vetoriais. Escolha um tipo, escreva um prompt, e o Agent posiciona o resultado como um novo frame no quadro. O menu + Add do Canvas aberto com quatro opções em pilha vertical: Design ('Mock up interfaces and visual concepts'), Image ('Generate and edit images'), Video ('Generate motion clips and animations'), e Vector Graphic ('Generate vector illustrations and SVGs'). O espaço do Generate na barra de ferramentas flutuante na parte inferior agora diz '+ Generate'. O popover tem quatro abas na parte superior: * **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):** * **Model**: o modelo de geração a ser usado. Os modelos disponíveis variam de acordo com o tipo (veja a tabela abaixo). * **Prompt**: descrição em linguagem simples do que você quer que o Agent gere. * **Generate**: envia o pedido e reserva um frame de espaço reservado na posição do cursor. O espaço reservado se transforma em um frame ativo quando o recurso está pronto; se a geração falhar, o espaço reservado é removido e um erro aparece no painel de chat. **Modelos e controles por tipo:** | Tipo | Melhor 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 | Aspect ratio (`1:1`, `16:9`, `9:16`, `4:3`, `3:4`) · Size (`1K`, `2K`, `4K`) | | **Video** | Clipes de movimento curtos e animações | Veo 3.1, Seedance 2.0 | Aspect ratio · Resolution (ex.: `720p`) · Duration (ex.: `4s`) · Audio toggle | | **Graphic** | Saída vetorial SVG; ícones, logotipos, diagramas, ilustrações estilizadas | Claude 4.6 Opus, Gemini 3.1 Pro Preview | Animated toggle | O conjunto de modelos muda com frequência. A tabela reflete o que está atualmente disponível; 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 depois de criado, consulte [Frames](/pt/features/design/frames). #### Anexe referências visuais Antes de gerar, você pode anexar itens que já estão no seu quadro como referências visuais. O Agent usa essas referências para orientar o resultado, de modo que ele corresponda à aparência do seu projeto. Abra o menu **+** dentro do formulário **Generate media** e escolha uma opção: * **Upload file**: envie uma imagem do seu computador para usar como referência. * **Select canvas elements**: escolha itens existentes no quadro. Frames são capturados como screenshots; 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 depois selecione **Generate**. Para remover uma referência, selecione o chip. O formulário Generate media no Canvas com o menu de mais opções aberto, mostrando as opções Upload file e Select canvas elements e o menu suspenso de modelo definido para Nano Banana Pro O ChatGPT Images 2.0 não suporta uploads no momento. Troque o modelo, por exemplo para o Nano Banana Pro, para anexar referências visuais. Quando o **Add menu** está ativado, o botão Generate é substituído por um menu **+** que consolida os tipos do popover com o **Design** (um mockup visual independente que não afeta o código ativo): **Disponibilidade:** geração de imagem. O **Vector Graphic** precisa da geração de gráfico vetorial; o **Video** precisa da geração de vídeo. O menu **+** requer o Add menu (que, por sua vez, requer a geração de imagem). ## Atalhos de teclado | Atalho | Ação | | ------------------------- | ----------------------------------------- | | `V` | Ativar a ferramenta Interact | | `H` | Ativar a ferramenta Pan | | Manter `Space` + arrastar | Fazer pan a partir de qualquer ferramenta | | `Cmd` / `Ctrl` + scroll | Zoom | | `Cmd` / `Ctrl` + `+` | Aumentar o zoom | | `Cmd` / `Ctrl` + `-` | Diminuir o zoom | | `Cmd` / `Ctrl` + `0` | Redefinir o zoom | | `Shift` + clique | Adicionar um frame à seleção atual | | `Escape` | Desmarcar seleção | ## Gestos do quadro Pan, zoom e seleção funcionam a partir de qualquer ferramenta, salvo indicação contrária. **Fazendo pan:** * Trackpad: arrastar com dois dedos. * Mouse: clicar e arrastar com o botão do meio, ou manter a barra de espaço pressionada e arrastar com o botão esquerdo. * Ferramenta Pan: clicar e arrastar com o botão esquerdo do mouse. **Fazendo zoom:** * Trackpad: pinça. * Mouse: `Ctrl` (ou `Cmd` no macOS) + roda de rolagem. * Teclado: `Cmd`/`Ctrl` + `+` para aumentar o zoom, `Cmd`/`Ctrl` + `-` para diminuir o zoom, `Cmd`/`Ctrl` + `0` para redefinir o zoom. O zoom é ancorado no cursor, então o ponto sob o cursor permanece fixo enquanto o restante do quadro é escalado à sua volta. **Selecionando:** * Frame único: clique nele com a ferramenta Interact. * Multisseleção: mantenha `Shift` pressionado e clique em cada frame, ou arraste um retângulo de seleção (marquee) pelo quadro. * Desmarcar seleção: clique em uma área vazia, ou pressione `Escape`. Selecionar um ou mais frames exibe a [barra de ações por frame](/pt/features/design/frames#per-frame-action-bar) e anexa esses frames à próxima mensagem do Agent como snapshots. ## Páginas relacionadas * [Canvas](/pt/features/design/canvas) — visão geral e anatomia. * [Frames](/pt/features/design/frames) — tipos de Frame; a barra de ações por frame; Reimagine, Refine, Annotate e Build. * [Elements](/pt/features/design/elements) — as peças individuais dentro de um frame. * [Editor Visual](/pt/learn/design/visual-editor) — o fluxo de direcionamento de elementos ao qual o Edit leva você.