Vídeo tutorial: adicione popups de texto rico a banners HTML do Figma

Este vídeo mostra como adicionar popups sobrepostos de texto rico a banners HTML do Figma usando o plugin Bannerify.

Se o seu banner precisa de um popup sobreposto com texto rico rolável (e que possa ser fechado), aberto ao clicar em uma camada específica da linha do tempo, selecione as camadas que vão acionar o popup em cada um dos banners e escolha as opções de animação na seção Generate Popup Overlay Disclaimers da janela de ações em massa, na parte inferior do plugin (ela aparece quando várias camadas estão marcadas na linha do tempo).

Quando estiver satisfeito com as configurações de animação do popup, clique no botão Create Popup Links. O plugin cria automaticamente um componente “Popup” (com uma camada de texto e um botão de fechar) na página do Figma e vincula cada uma das camadas selecionadas como gatilho para esse novo componente Popup, usando o recurso nativo de link de Prototype do Figma.

Você pode alterar o conteúdo da camada de texto, ajustar o tamanho da fonte e mudar os preenchimentos de cor sólida do fundo do popup, do ícone de fechar e da camada de texto.

Ao exportar seus banners HTML, o plugin procura automaticamente esses links de Prototype do Figma e o componente Popup para o qual eles apontam, e gera os gatilhos clicáveis e o código do popup sobreposto no conjunto final de banners exportados.

Personalizar os estilos da barra de rolagem

Se você quer personalizar o estilo da barra de rolagem das camadas de texto truncado com rolagem ou do texto de popups sobrepostos, ative Inject Custom Code nas configurações de exportação HTML e cole isto no campo Custom CSS.

:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

Altere os valores no início para atualizar a cor da barra de rolagem, a cor da trilha, a largura, a altura e o raio dos cantos. Alguns navegadores e dispositivos móveis ainda podem renderizar as barras de rolagem com o estilo nativo do sistema, mas o CSS é aplicado sempre que o cliente permite estilos personalizados de barra de rolagem.

Observação: este componente foi pensado para ser extremamente simples, com apenas uma camada de texto (para o aviso legal) e o botão de fechar. Fique à vontade para personalizar o conteúdo do texto, os estilos de fonte e as cores, mas qualquer outra personalização ou camada adicional pode quebrar o HTML exportado.