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.

Começar com uma página do Figma em branco

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

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.

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.

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

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

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

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

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

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

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.