Barra de Ferramentas

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.

​

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. 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. 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. 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. 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 e Editor Visual para o fluxo completo. 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 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: Para saber o que é cada tipo de frame e o que você pode fazer com ele depois de criado, consulte 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. 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

​

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 e anexa esses frames à próxima mensagem do Agent como snapshots.

​

Páginas relacionadas

• Canvas — visão geral e anatomia.
• Frames — tipos de Frame; a barra de ações por frame; Reimagine, Refine, Annotate e Build.
• Elements — as peças individuais dentro de um frame.
• Editor Visual — o fluxo de direcionamento de elementos ao qual o Edit leva você.