--- url: "/pt/bannerify/design/figma-frames.md" description: "O Bannerify percorre todos os **frames e instâncias de nível superior** da página ativa do Figma e usa cada um como um **banner**. Ele também carrega como banners os elementos de nível superior de um component set (ou variantes) do Figma." --- # Criar seus banners no Figma > O Bannerify percorre todos os **frames e instâncias de nível superior** da página ativa do Figma e usa cada um como um **banner**. Ele também carrega como banners os elementos de nível superior de um component set (ou variantes) do Figma. ### Vídeo tutorial: anime e exporte banners para HTML a partir do Figma Este vídeo mostra como animar e exportar, em segundos, banners HTML prontos para produção a partir do Figma. [Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA) ## Começar com uma página do Figma em branco {#starting-from-a-blank-figma-page} [Video](/assets/videos/bannerify/design/blank-frames.mp4) Para você começar a criar seus próprios banners rapidamente, o Bannerify se oferece para criar automaticamente alguns tamanhos de banner padrão quando o plugin é executado em uma página vazia do Figma. ## Estruturar as camadas dos frames de banner no Figma {#structuring-your-figma-banner-frame-layers} [Video](/assets/videos/bannerify/design/frame-children.mp4) As **camadas filhas diretas** de cada frame são usadas como os **elementos** padrão de cada banner. Como você verá nas seções abaixo, cada um desses elementos pode ser animado individualmente no plugin Bannerify para criar seus banners. > **Note:** **Camadas filhas ocultas são incluídas nos frames dos banners** As camadas filhas diretas que estiverem marcadas como **ocultas** no Figma continuam aparecendo na linha do tempo de camadas do Bannerify. Isso permite manter camadas filhas ocultas enquanto você cria banners com elementos que precisam entrar e sair em várias etapas. O Bannerify mostra automaticamente essas camadas ocultas como se estivessem visíveis. > **Tip:** **Ocultar camadas do Figma da linha do tempo**. Se você não quer que uma camada do frame do Figma seja incluída na linha do tempo, renomeie a camada com o prefixo **hide-** (por exemplo, _hide-RectangleBackground_). Assim, ela não é incluída na linha do tempo do plugin nem nas exportações dos banners. ## Começar com banners que você já criou {#starting-with-banners-you-ve-already-designed} [Video](/assets/videos/bannerify/design/loading-existing.mp4) Se você já criou alguns designs de banners no Figma, ao executar o plugin Bannerify na página, ele carrega automaticamente uma lista dos frames ou instâncias do arquivo que podem ser usados como banners. Você pode marcar/desmarcar apenas os banners que quer que o plugin carregue e clicar no botão **Load Checked Banners**, ou clicar no botão **Load All Banners** para carregar todos automaticamente. ## Atualizar ou recarregar vários ou todos os banners {#refreshing-or-re-loading-multiple-all-banners} [Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4) Se você adicionar ou atualizar camadas no arquivo do Figma enquanto o Bannerify já estiver em execução, elas não serão atualizadas automaticamente. No entanto, há duas formas de atualizar seus banners. Para atualizar todos os banners da linha do tempo, ou carregar banners totalmente novos do arquivo do Figma, clique no ícone **Refresh** no menu do cabeçalho principal do plugin. A tela inicial de seleção de banners aparece de novo. Nela, você pode marcar/desmarcar apenas os banners que quer que o plugin carregue e clicar no botão **Load Checked Banners**, ou clicar no botão **Load All Banners** para carregar todos automaticamente. As camadas atualizadas aparecem na linha do tempo do Bannerify e nas pré-visualizações em tempo real. ## Atualizar um único banner {#refreshing-a-single-banner} [Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4) Se você adicionar ou atualizar camadas no arquivo do Figma enquanto o Bannerify já estiver em execução, elas não serão atualizadas automaticamente. No entanto, há duas formas de atualizar seus banners. Para atualizar rapidamente um único banner, clique no ícone **Refresh** na barra de cabeçalho do banner. Somente as camadas desse banner são atualizadas, e as camadas alteradas aparecem na linha do tempo do Bannerify e nas pré-visualizações em tempo real. ## Definir um preenchimento de fundo sólido para o banner {#setting-a-solid-banner-background-fill} [Video](/assets/videos/bannerify/design/setting-background-fill.mp4) Você pode definir uma cor de fundo sólida para qualquer banner configurando no Figma o **Fill** sólido do frame com a cor de que precisa. Essa cor pode aparecer rapidamente antes que os elementos de imagem carreguem. ## Rolar automaticamente até os banners {#auto-scrolling-banners-into-view} [Video](/assets/videos/bannerify/design/scroll-layers.mp4) Para facilitar a troca entre os banners que você está editando, o Bannerify rola automaticamente a linha do tempo até um banner quando você clica na camada correspondente (ou em uma camada filha) na página do Figma. Isso também funciona no sentido contrário: se você clicar no botão com o ícone de **frame** ou de **instância** acima de qualquer pré-visualização de banner na linha do tempo, o Figma rola e aplica zoom automaticamente até a camada correspondente na página. ## Redimensionar a janela do plugin {#resizing-the-plugin-window} [Video](/assets/videos/bannerify/design/resize-window.mp4) Se você usa um monitor maior (ou menor), o Bannerify permite redimensionar a janela do plugin para facilitar o uso e a visualização da linha do tempo de acordo com o tamanho da sua tela. Você pode redimensionar a janela de tamanhos menores até tamanhos maiores (4K) clicando no menu suspenso de tamanho no cabeçalho principal do plugin.