Tipos de frame, a barra de ações por frame e as ações Build e Focus no Canvas.
Cada bloco no Canvas é um frame. Frames são o que você seleciona, arrasta e sobre o que age. Esta página cobre os tipos de frame, a barra de ações por frame que aparece na seleção e as capacidades que você aciona a partir dela: Build e Focus.
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 é.
Tipo
Rótulo do cabeçalho
Baseado em
Interage como um app ao vivo?
Converte em um app real?
Artifact
Website, Slides, etc.
Um artefato em execução
Sim
Já é um app.
Mobile artifact
Mobile app
Um artefato em execução
Sim (no simulador)
Já é um app.
Design
Design
Mockup estático / interativo
Apenas como frame interativo
Sim — através do menu Build… por frame. Veja Build.
Image
Image
PNG / JPG gerado
Não
Não — use como referência.
Video
Video
Vídeo gerado
Não
Não.
Vector graphic
Graphic
SVG gerado
Não
Não — incorpore em um app real.
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.
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:
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.
O conjunto de ações se comprime em ícones em larguras estreitas e revela rótulos conforme o frame fica mais largo. O conjunto completo, em ordem da esquerda para a direita:
Abre um menu listando cada Artifact do projeto — escolha um para aplicar o design a ele, ou escolha Build this design para criar um novo Artifact. Apenas frames de Design. Veja Build.
Focus
Entra no modo de foco, expandindo o frame como a visão principal.
More (…)
Ações adicionais do frame. Copiar, duplicar, reordenar e exportar também estão disponíveis no menu de clique direito do quadro.
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.
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.
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.
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.
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.
