Frame pai rotacionado desalinha as camadas
Isso costuma acontecer quando o frame pai foi rotacionado para algo diferente de 0 graus (por exemplo, “-90” ou “180”) antes de o conteúdo ser adicionado, o que desalinha a posição das camadas filhas. Para resolver, crie um novo frame sem rotação com as mesmas dimensões e copie ou arraste as camadas filhas do frame rotacionado original para o novo frame.
Caixa delimitadora da camada de texto (cortes)
Outra coisa que pode desalinhar ou cortar uma camada de texto é quando o tamanho da caixa de texto não corresponde ao tamanho do próprio texto. Por exemplo, se houver várias linhas de texto, mas a altura da “caixa delimitadora” for muito pequena, o posicionamento ficará deslocado. Para resolver, ajuste a altura da caixa delimitadora ao tamanho do conteúdo do texto.
SVGs com sombra borrados no Safari
Existe um problema conhecido com SVGs que têm sombras projetadas no Safari: ele rasteriza o vetor em pixels, e o resultado fica menos nítido.
Uma sugestão da discussão acima é separar a sombra e o botão/conteúdo em duas camadas diferentes; assim, a camada do botão por cima, sem sombra, continua sendo renderizada como um SVG nítido no Safari, e a camada de baixo serve apenas para adicionar a sombra atrás dele.
Outra opção é substituir, pelo plugin, o formato de imagem só dessa camada do botão de CTA por “PNG” e também substituir a escala dessa camada por @2x retina. Assim, o CTA é exportado como uma imagem PNG 2x, continua nítido e evita o problema das sombras em SVG no Safari.
Cores e degradês dos GIFs parecem granulados
Os GIFs são um pouco diferentes das imagens JPG/PNG normais, porque só podem ter no máximo 256 cores. Se você usa imagens muito detalhadas ou degradês com muita variação de cor, é normal que o GIF não fique tão nítido nem tenha a mesma fidelidade de cor das imagens originais, por causa dessa limitação do formato GIF.
A transparência não aparece nos GIFs
O formato GIF aceita apenas 0% ou 100% de opacidade, nada entre esses valores. Isso significa que você pode ter um GIF animado com o fundo totalmente transparente por trás de elementos totalmente opacos e visíveis. Ou seja, as camadas precisam ser totalmente transparentes ou não; qualquer camada com opacidade abaixo de 50% fica transparente, e qualquer camada com opacidade acima de 50% fica opaca.
Como marcar GIFs transparentes no Figma. Por padrão, suas exportações em GIF não incluem transparência. Se o seu GIF precisar de transparência, adicione a palavra transparent em qualquer parte do nome da camada no Figma.
Onde hospedar arquivos de vídeo .mp4
Para adicionar vídeos ao Bannerify, o plugin carrega qualquer URL que aponte diretamente para um arquivo .mp4. Infelizmente, URLs do Vimeo/YouTube ou links de players na web não funcionam nesse caso. Uma boa opção para hospedar vídeos é o Backblaze B2: você pode criar uma conta gratuita com 10gb de armazenamento grátis e, se criar um bucket de armazenamento público, poderá copiar e colar os links dos vídeos que enviar e usar esse link do .mp4 no Bannerify. Outra opção popular de hospedagem é o Dropbox, que permite fazer upload do seu arquivo .mp4 e usar esse link no plugin Bannerify; o Bannerify troca automaticamente ?dl=0 por ?raw=1 para garantir que o link aponte direto para o arquivo de vídeo (e não para o player do site do Dropbox).
Linha branca fina em volta das imagens exportadas
Às vezes, algumas imagens têm uma linha branca fina e discreta nas bordas. O Figma faz isso quando uma camada não está posicionada em um valor de pixel inteiro (por exemplo, Y: 156.76 ou X: 56.3), e essa linha de subpixel acaba entrando automaticamente na exportação. O Bannerify tenta arredondar esses valores automaticamente nas camadas que permitem redimensionamento pela Figma Plugin API, mas, para resolver o problema manualmente (se necessário), confira se todas as posições das suas camadas estão em valores de pixel inteiros.
Banners em alta resolução não exportam para MP4
Se você exporta banners em alta resolução para vídeo MP4 pelo plugin, às vezes o Figma atinge o limite de 2gb de memória e não consegue renderizar o arquivo de vídeo diretamente em .mp4. Para contornar isso, exporte seus banners do Bannerify no formato WebM e depois converta os arquivos .webm exportados para .mp4 fora do Figma com o transcodificador de vídeo Handbrake.
O Google Ads não valida os banners
Há alguns motivos comuns para um banner HTML não ser enviado ou validado pelo Google. Normalmente, o tamanho do arquivo do banner é grande demais, ou as dimensões do banner não correspondem exatamente aos tamanhos “padrão”. Você pode usar estes serviços para validar seus banners para o Google Ads ou o DoubleClick antes de enviá-los.
O banner HTML exportado não anima nem reproduz no navegador
Se o banner HTML exportado parecer congelado, não animar ou funcionar na pré-visualização do Bannerify, mas não quando você abre o arquivo HTML exportado no navegador, verifique se há algum bloqueador de anúncios ou extensão de privacidade ativa no navegador. Algumas extensões podem impedir que arquivos HTML locais ou relacionados a anúncios funcionem corretamente. Desative temporariamente a extensão para o arquivo de pré-visualização local, abra a exportação em outro navegador ou faça upload do banner para o seu ambiente normal de pré-visualização/staging e teste lá.
Arquivos sem extensão no app para desktop do Figma no Windows
Existe um problema conhecido no app para desktop do Figma (só no Windows), que também acontece nas exportações normais de arquivos do Figma. Ao salvar o arquivo, pode aparecer o rótulo “all files”. Se você ignorar isso e continuar clicando em “Save”, o arquivo ainda deve ser salvo com a extensão correta e abrir normalmente depois de baixado no seu computador. Se mesmo assim o arquivo for salvo sem extensão, você pode renomeá-lo e adicionar manualmente a extensão correta ao nome do arquivo.
O validador HTML do Google converte em PNG elementos SVG com sombra projetada (no upload pelo celular)
Por algum motivo, ao enviar o .zip de um banner para o DCM Validator pelo navegador de um dispositivo móvel (por exemplo, um iPhone), o validador converte automaticamente em PNG qualquer elemento SVG que tenha sombra projetada, e ele fica mais pixelado na pré-visualização.
Imagens exportadas pixeladas
Se você exportar banners enquanto as imagens no Figma ainda estão carregando progressivamente, elas podem sair pixeladas, porque a imagem não tinha terminado de carregar no arquivo do Figma antes da exportação. Para resolver, confira se todas as imagens carregaram 100% e estão nítidas no arquivo do Figma antes de exportar seus banners com o plugin Bannerify. Para ajudar ainda mais, você pode usar o recurso “Downsizer” do TinyImage para reduzir seus preenchimentos de imagem ao tamanho das camadas, o que diminui o tamanho dos arquivos e faz com que carreguem muito mais rápido no seu arquivo do Figma.
Adicionar atributos aria-hidden='true' às camadas
Se você precisar incluir atributos aria-hidden por motivos de acessibilidade, pode fazer isso camada por camada incluindo aria-hidden no nome da camada no Figma; assim, aria-hidden="true" é adicionado automaticamente a esse elemento HTML quando os banners são exportados para HTML.
Pode ser necessário usar uma VPN na China
Atenção: se você estiver na China, o servidor de contas pode estar bloqueado pelo “Grande Firewall da China”. Se aparecer um erro de ativação mesmo com uma chave válida, provavelmente você vai precisar usar uma VPN para resolver o problema.
'An error occurred while loading the plugin environment'
Isso pode acontecer no app para desktop do Figma se a configuração de depuração Use Developer VM estiver ativada por engano. Para garantir que ela esteja desativada, clique com o botão direito em qualquer lugar do canvas do Figma, passe o mouse sobre Plugins, depois sobre Development, e confira se a opção Use Developer VM está desmarcada. Depois de desmarcá-la (sem o ícone de visto ao lado), execute o plugin do Figma novamente e ele deve funcionar normalmente.