Selecionando um elemento
Use a ferramenta Edit na barra de ferramentas. Com o Edit ativo, clique dentro de um frame ativo para selecionar o elemento sob o cursor. O elemento selecionado recebe um contorno de destaque e um pequeno prompt inline onde você pode pedir ao Agent que o altere.O Edit fica desabilitado até que exista pelo menos um frame no Canvas, e está disponível apenas para desktop.
Agindo em um elemento selecionado
Peça ao Agent para alterá-lo
Peça ao Agent para atualizar o texto, a cor, o layout, o espaçamento ou o comportamento do elemento usando o prompt inline.
Inspecionar elemento
Inspecione o elemento pelo botão Inspect da barra de ações do frame, que abre o Editor Visual direcionado a esse elemento.
O Inspect só está disponível enquanto o frame está em modo de foco e o elemento é um nó DOM selecionável.
Editor Visual
Selecionar um elemento abre o Editor Visual — um painel no lado direito, combinado com o prompt inline. O painel agrupa todos os controles em seções claras para que você encontre o que precisa mais rápido: Text, Layout, Color e Border. (A seção Image também aparece quando você seleciona um elemento de imagem.)
Layout
A seção Layout é onde você ajusta como os filhos se posicionam dentro de um contêiner sem passar pelo Agent. Selecione um contêiner flex, expanda o Layout e você terá:- Alignment: um seletor de pontos 3×3 para onde os itens se posicionam em ambos os eixos dentro do contêiner.
- Direction: dois botões de seta que organizam os filhos em linha ou em coluna.
- Gap: um valor em pixels para o espaço entre os itens. O ícone ao lado do campo Gap muda para corresponder à direção atual, então você sempre sabe se está ajustando o espaçamento horizontal ou vertical. Ao lado dele, um ícone de seta alterna Distribute space between items, que empurra os filhos para as bordas opostas do contêiner.
- Outer space: campos por lado para o espaço fora do elemento (um campo por lado, com um alternador de vínculo para travar os quatro lados de uma vez).
- Inner space: campos para o espaço dentro do elemento em cada eixo, com um alternador de vínculo para ambos os eixos de uma vez.
Páginas relacionadas
- Canvas — visão geral e anatomia.
- Frames — os contêineres onde os Elements vivem.
- Toolbar — onde a ferramenta Edit está localizada.
- Editor Visual — passo a passo completo de edição de elementos.