Tipos de frame
Os dois tipos principais são Artifacts (superfícies vivas, com um app por trás) e Designs (mockups). O cabeçalho no canto superior esquerdo do frame mostra qual tipo ele é.Se um frame de Design se comporta como uma imagem estática ou como um protótipo interativo depende da capacidade Interactive frames. Quando está ativada, os frames de Design respondem a cliques e a entradas de formulário como uma página real; caso contrário, são renderizados como um instantâneo sobre o qual você pode iterar, mas não clicar.
Visualize em diferentes dispositivos
Veja como um design fica em diferentes tamanhos de tela. Peça ao Agent para mostrar uma versão mobile, tablet ou desktop, por exemplo “Mostre a versão mobile desta página”, e ele renderiza um frame nesse tamanho:- Mobile: 390 × 844
- Tablet: 768 × 1024
- Desktop: 1280 × 720
Barra de ações por frame
Selecionar um frame exibe uma barra de ações. As ações dependem do tipo do frame.Frames de Artifact e Design
Para frames de Artifact (Website, Slides, etc.) e de Design, a barra de ações fica na parte superior do frame.
A barra de ações de um frame de Design: Build…, Focus e mais opções.
Frames de app (Website, Slides, Mobile app) mostram Focus e mais opções; frames de Design adicionam Build… antes deles. Para ramificar novas direções a partir de um frame selecionado, siga suas sugestões.
Selecionar um frame também o anexa à próxima mensagem de chat do Agent como um instantâneo — veja O que existe no canvas.
A barra de ações respeita o 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 apenas Focus permanece.
Frames de mídia
Frames de Image, Video e Vector graphic mostram uma pequena barra de ações flutuante acima do frame. Os três tipos compartilham:- Replace media: envie um novo arquivo para trocar no frame, mantendo sua posição e tamanho no Canvas.
- Download: salve o arquivo de mídia no seu computador.
- Alt text: adicione texto alternativo para acessibilidade e para que o Agent tenha mais contexto quando o frame for referenciado.
A barra de ações de um frame de vídeo: Replace media, Download e Alt text.
- Crop: recorte a imagem diretamente no Canvas.
- Generate video: gere um clipe de vídeo a partir da imagem.
A barra de ações de um frame de imagem adiciona Crop e Generate video.
Explore novas direções
Selecionar um frame exibe sugestões ao lado dele: direções de um clique baseadas no que você está vendo, como um layout diferente, uma nova vibe ou uma página que seu design sugere. Cada uma é gerada como um novo frame ao lado da fonte, então o original permanece intocado e você pode comparar.
Build
O menu Build… em um frame de Design selecionado transforma o design em um app real e em execução. O mesmo menu também cobre a aplicação do design a um Artifact que já existe.
Build this design
Escolher Build this design no menu inicia um novo Artifact a partir do frame de Design selecionado. O novo Artifact entra na lista de artefatos do projeto e se torna um app real e em execução. O Build requer Core ou Pro.Apply to an existing Artifact
O menu Build… lista cada Artifact do projeto. Escolher um aplica as mudanças do Design selecionado a esse Artifact — o Agent reescreve o código do Artifact para corresponder ao design, deixando o frame de Design no Canvas como referência.Focus
O Focus dá zoom no frame selecionado para que ele preencha a visualização, permitindo que você trabalhe nele de perto sem o resto do quadro. Selecione Focus na barra de ações para entrar nele, e Exit focus no topo do quadro para voltar ao canvas.
Páginas relacionadas
- Canvas — visão geral e anatomia.
- Toolbar — a barra de ferramentas flutuante; Generate cria novos frames.
- Elements — as peças individuais dentro de um frame.
- Visual Editor — edições no nível de elemento dentro de um frame em foco.