Vídeo tutorial: adicione HTML, CSS e JavaScript personalizados às exportações de banners do Figma

Este vídeo mostra como adicionar HTML, CSS e JavaScript personalizados às exportações de banners do Figma usando o plugin Bannerify.

Se você precisa adicionar seu próprio HTML/CSS/JavaScript a todas as exportações de banners HTML, ative a opção Inject Custom Code nas configurações de exportação. Com ela, você pode adicionar HTML personalizado antes das tags de fechamento </body> (para adicionar conteúdo) ou </head> (para adicionar meta tags ou links de recursos), adicionar CSS personalizado em uma nova tag style ou adicionar código JavaScript personalizado dentro de uma nova tag <script></script>.

Exemplo de aviso legal sobreposto com botão de alternância. Você pode usar este exemplo de código HTML/CSS/JS no CodePen como referência básica de um caso de uso comum deste recurso: ele injeta um pop-up de aviso legal que pode ser aberto e fechado sobre os seus banners. Fique à vontade para copiar e modificar os estilos e o conteúdo como precisar.

Predefinições de código personalizado salvas (opcional)

O recurso Saved Custom Code Presets permite salvar e reutilizar diferentes configurações de código HTML, CSS e JavaScript personalizado ao exportar banners. Para usá-lo, preencha seu código personalizado nas quatro áreas disponíveis (Head HTML, Body HTML, CSS e JavaScript), digite um nome descritivo e clique em Save as New Preset para guardar essa configuração e usá-la depois.

Depois de salvar, você pode carregar rapidamente qualquer predefinição no menu suspenso Load Saved Preset (Optional) para preencher na hora todas as áreas de código personalizado com a configuração salva. Assim, você não precisa copiar e colar trechos de código manualmente cada vez que exportar banners com requisitos diferentes. Você pode gerenciar suas predefinições apagando as que não precisa mais ou atualizando as existentes: carregue a predefinição, faça as alterações e salve com o mesmo nome. Todas as predefinições ficam armazenadas localmente no seu app do Figma atual (usando a API clientStorage do Figma) e continuam disponíveis sempre que você abre o painel de código do Bannerify em diferentes arquivos do Figma, o que facilita manter um código consistente em várias sessões de exportação.

Adicionar fontes personalizadas ao texto HTML editável

Use um arquivo de web font para cada peso e estilo usado no seu texto editável. Instalar uma fonte no Figma não a inclui no pacote de uma exportação HTML.

1. Obtenha os arquivos .woff2 ou .woff aprovados pela marca para uso na web.
2. Ative a exportação de texto em parágrafos. Deixe o texto editável desbloqueado no Figma.
3. No painel de exportação HTML, ative Inject Custom Code e escolha Add custom CSS styles.
4. Cole uma regra @font-face no campo de CSS, sem uma tag <style> em volta. Substitua a família de exemplo pelo nome exato da família usado no Figma e na declaração font-family do texto exportado e use o peso e o estilo reais da fonte.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Adicione uma regra separada para cada peso/estilo adicional (por exemplo, 700 para negrito ou italic para um arquivo itálico).
6. Exporte e descompacte o banner. Coloque os arquivos de fonte em uma pasta fonts ao lado do arquivo HTML de cada banner e depois compacte de novo todo o conteúdo desse banner. O Bannerify injeta o CSS, mas não copia esses arquivos de fonte locais para o ZIP. URLs de fonte relativas são resolvidas a partir do local da folha de estilo; ajuste o caminho se o CSS estiver salvo em outra pasta.
7. Teste o pacote em um servidor web local ou na pré-visualização da plataforma de destino, inclusive em um dispositivo sem a fonte instalada. Confira o carregamento da fonte, as quebras de linha e textos de substituição mais longos. Os arquivos de fonte contam para o tamanho do pacote, e o destino precisa permitir esses arquivos.

Em vez disso, você pode usar a URL HTTPS direta de um arquivo de fonte hospedado, se a sua plataforma de anúncios permitir requisições externas de fontes. O servidor de fontes precisa permitir o carregamento de fontes entre origens (cross-origin). Veja a referência de font-face do MDN.