> ## 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. # Frames > 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. Canvas com três frames dispostos no quadro: um Website (Scroll Hero), um APEX X1 Design System e um mockup de Design do supercarro APEX X1, com a barra de ferramentas flutuante (Chat, Draw, Edit, Generate) na parte inferior ## 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 é. | 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](#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. ## 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. Canvas com um frame de Design APEX X1 selecionado, mostrando a barra de ações por frame na parte superior com o rótulo do tipo e as ações Build, Focus e mais opções, o frame anexado como um chip na caixa de prompt do chat 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: | Ação | O que faz | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Export | Baixa o frame como um PNG. Veja [Exporte um frame como PNG](/pt/design/canvas#export-a-frame-as-png). | | Build… | 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](#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](/pt/design/canvas#right-click-menu) 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](/pt/design/explore-suggestions). Selecionar um frame também o anexa à próxima mensagem de chat do Agent como um instantâneo — veja [O que existe no canvas](/pt/design/canvas#what-lives-on-the-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. Um frame de vídeo selecionado de um supercarro azul no Canvas com sua barra de ações flutuante acima, mostrando os controles Replace media, Download (com uma dica de ferramenta lendo 'Download original') e Alt text. Frames de imagem adicionam mais dois controles: * **Crop**: recorte a imagem diretamente no Canvas. * **Generate video**: gere um clipe de vídeo a partir da imagem. Um frame de imagem selecionado de um supercarro amarelo no Canvas com sua barra de ações flutuante acima, mostrando os controles Replace media, Crop, Download, Alt text e Generate video. ## Explore novas direções Selecionar um frame exibe [sugestões](/pt/design/explore-suggestions) 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. Um frame de Website selecionado mostrando um hero do supercarro APEX X1, com um painel de Próximos passos sugeridos ao lado oferecendo chips de sugestão como Explorar abordagens diferentes, Tentar layouts diferentes, Explorar vibes diferentes e Me surpreenda ## 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. O menu Build aberto em um frame de Design selecionado (APEX X1 Exact Replica) com o cabeçalho 'Build or apply your designs', mostrando 'Build this design', que cria um novo artefato, e 'Apply to an existing creation' listando o APEX X1 Design System do projeto e seu website Scroll Hero ### 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. Um frame de Website em modo de foco preenchendo a visualização com a página inicial de aluguel de supercarros Velocity, e um botão Exit focus no topo do quadro. ## Páginas relacionadas * [Canvas](/pt/design/canvas) — visão geral e anatomia. * [Toolbar](/pt/design/toolbar) — a barra de ferramentas flutuante; Generate cria novos frames. * [Elements](/pt/design/elements) — as peças individuais dentro de um frame. * [Visual Editor](/pt/design/visual-editor) — edições no nível de elemento dentro de um frame em foco.