Como criar e animar anúncios em banner em Figma | Jaz Infante | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como criar e animar anúncios em banner em Figma

teacher avatar Jaz Infante, Designer // AIGA Board Member

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Apresentação

      1:16

    • 2.

      Como criar anúncios de exibição estática

      9:17

    • 3.

      Como adicionar animação

      9:37

    • 4.

      Como exportar seus anúncios animados

      7:06

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

406

Estudantes

1

Projetos

Sobre este curso

Figma pode fazer muito mais do que prototipagem de design UX/UI. Você sabia que ele também tem alguns recursos muito legais para projetar e exportar anúncios de exibição?

Embora este curso não seja um mergulho profundo no Figma, ele mostra como usar este software para projetar e até animar anúncios de exibição inteiramente no Figma. Presumo que você tenha um conhecimento trabalho da Figma e mergulhe diretamente para criar anúncios de exibição. Mas me diga nos comentários se você quiser que eu faça um curso completo sobre os conceitos básicos de usar Figma!

O plugin que estou usando é Bannerify e pode ser instalado aqui: https://www.figma.com/community/plugin/796124491692147799/Banner-Studio

Conheça seu professor

Teacher Profile Image

Jaz Infante

Designer // AIGA Board Member

Professor

Hello, I'm Jaz! I'm a full-time visual designer and Board Member for the AIGA Los Angeles chapter. 

Visualizar o perfil completo

Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá e bem-vindo ao meu novo curso de Skillshare, como criar banners em Figma. Agora, eu passo muito tempo como designer fazendo anúncios de exibição. É onde a indústria está agora. Todos em todos os setores, quer você esteja vendendo sapatos, esteja vendendo software, seja B2B ou B2C, você criará anúncios de exibição. Você vai vender seus produtos online. E isso significa que você precisa ser exibido como você precisa de publicidade digital para fazer isso. Então, isso significa que, como designers, temos que ser realmente simplificados e ser realmente rápidos e eficazes na forma como projetamos esses anúncios de banner. Então, eu tenho um curso sobre projetar estes e lanche banner. Eu tenho um curso sobre desenhar estes no Photoshop. E agora eu tenho um curso sobre projetar estes em Figma é, partir de alguns meses atrás, eu aprendi que você pode realmente começar a fazer algumas coisas muito legais dentro Figma. Passei muito tempo em Figma projetando para uma UX coisas. Mas agora Figma tem algumas ferramentas realmente legais para projetar anúncios de exibição também. Então, vamos revisá-los hoje e adicionar outro arsenal ao seu, às suas habilidades de design de anúncios de exibição. Então vamos entrar e começar. 2. Como criar anúncios de exibição estática: Tudo bem, então eu estou aqui em Figma agora eu tenho esses anúncios realmente simples. Portanto, um estudo de caso, certo, diz aprender como o benefício de saúde mental de Laura está mudando vidas ou Genetech. É realmente simples design de anúncios de exibição sábio. Não é assim tão complicado, certo? Nós só temos um download agora e o cliente queria mostrar como seria o estudo de caso real. Então temos as duas primeiras páginas do estudo de caso. Os efeitos de fundo esses círculos externos e essas linhas diagonais aqui, isso é do guia de estilo da marca. Então combina com o que eles têm acontecendo em seu site. Então, assim, esta é a fonte deles também. Chama-se Gilroy. E as cores que estamos usando também são suas cores de marca. Então, basicamente, a maneira que você faz isso em Figma é realmente simples para apenas, para apenas, para apenas projetar anúncios estáticos como este. Você, cada um deles é essencialmente seu próprio quadro. E então eu tenho aqui o tronco dos anúncios de exibição mais comuns que nós teríamos. Então eu vou até aqui e vou criar uma moldura, certo? E simplesmente simplesmente arraste e solte, certo, já que agora eu tenho esse quadro e apareço no canto superior direito. Eu defini meu tamanho 2 para o que eu estou procurando. Então digamos que era um 300 por digamos trezentos, oitocentos e cinquenta é um tamanho bastante comum. Mas digamos que temos 300 por 500 AD que tivemos que fazer. Então eu disse isso aqui. Então, da mesma forma que eu faço no meu curso Photoshop, no meu curso de lanche banner, é realmente importante rotular e nomear suas camadas adequadamente para que você possa voltar e encontrá-las. Eu sempre rotulo todas as minhas pastas com o tamanho real do anúncio de banner porque torna mais fácil para a pessoa que estou entregando o addtwo exportá-lo e enviá-lo para onde quer que precise enviá-lo. Então aqui eu vou basicamente apenas tipo de copiar e colar meu nome para ele. Mas então eu mudaria isso para 300 por 500 núcleos. E daqui, é basicamente como o Photoshop. É como o lanche do Benner. É como qualquer outro software de design que você usa, não importa. Se você estiver em Figma. Estamos fazendo exatamente as mesmas coisas. Eu mudaria o preenchimento. Vou mudar isso para o fundo que tenho em tudo. Então agora eu tenho a cor da minha tela. E se você já tiver alguns de seus ativos já dispostos, você pode basicamente copiar e colar. Então eu poderia literalmente pegar tudo o que eu tenho neste banner. Basta copiá-lo, trazê-lo aqui, colá-lo, dimensioná-lo para que ele se encaixe na química em que estou trabalhando. E, em seguida, basta reposicionar alguns desses elementos para que eles trabalhem neste tamanho. Então eu posso arrastar isso até aqui. Vou fazer isso maior ou mudar o tamanho da fonte para ser um pouco menor para que ele se ajuste melhor neste espaço. Conserte o deixamento aqui. Talvez até um pouco menor. Eu não gosto. Eu não gosto de como esses benefícios são pendurados por si só. Então eu vou ter que ir bem pequeno sobre isso. Lá vamos nós. Sim, basicamente vou reposicionar essas coisas. Talvez escalar isso um pouco, certo? E essa é a essência básica disso. Então agora eu acabei de fazer um anúncio totalmente novo. Se você estava fazendo isso do zero, digamos que você, você não tinha nenhum dos elementos em si. Talvez você seja completamente novo na Figma. Então, como eu disse antes, você primeiro cria seu quadro. E então, uma vez que você tem seu quadro, eles precisam começar a adicionar elementos a ele. Então você pode entrar e adicionar texto, que será uma das primeiras coisas. Então você pode subir aqui, clicar em Texto, desenhar sua caixa de texto e, em seguida, começar a digitar. Se você sabe como usar qualquer software de design, você sabe como usar Figma, ele diz que é essencialmente exatamente as mesmas ferramentas, o mesmo tipo de processo de layout. Então você pode entrar aqui formato que deixou justificar. Você escolhe a sua fonte, toda a sua biblioteca de fontes disponíveis para você aqui também. Então você escolhe uma fonte que é horrível. Vamos falar com você muito em breve. Ok? Então você mudaria seu tamanho de fonte também. E o seu espaçamento de linha. Você tem tudo isso disponível para você também, sua cor. Você pode, você tem o controle deslizante aqui para tipo de encontrar a cor que você está procurando. Você também pode ajustar a transparência aqui. Depois de ter uma configuração de cores, ela a salva na cor do documento para que você possa reutilizar a cor. Digamos que eu tenha este azul marinho que estou usando para maioria dos meus documentos. Vou mudar isto para o meu azul marinho, certo? E agora estamos todos prontos para adicionar um botão. Uma das maneiras que você pode fazer isso é através da criação de um retângulo. Muito simples. Você só desenha seu retângulo. Escolha a sua cor. Vou entrar e ficar com o meu azul marinho. Por aqui. Você pode mudar o raio do canto. Então, como você pode ver em meus anúncios de exibição aqui, nós realmente temos um canto ligeiramente arredondado. Então eu disse que aqui vamos subir para um raio de quatro cantos, talvez cinco. Lá vai você. Adicionar texto a ele seria a mesma coisa. Faça sua caixa de texto onde quer que seu CTA esteja. Neste caso, é Download Now. Agora, para tornar isso muito menor, mude o preenchimento para esperar, vamos centralizá-lo e, em seguida, trazê-lo para baixo um pouco maior, bem ali. Muda para negrito. Incrível. Portanto, não é tão diferente de qualquer outro software que você usa, que você já usou antes. Para adicionar essas imagens. A maneira mais simples e direta é literalmente arrastar e soltar. Então, se você tiver essas imagens salvas em sua área de trabalho, você iria para sua área de trabalho. E, em seguida, basta arrastá-lo para Figma e ele vai trazê-lo automaticamente. Não há necessidade de importar, exportar ou algo assim. E então, como você vê, uma vez que você realmente arrastou e soltou essa imagem C, você pode ver em sua camada aqui que ela sabe que é uma imagem. E se você precisar substituir essa imagem, selecione-a e, em seguida, escreva aqui em seu preenchimento, você vai para Imagem. Se você precisar alterá-lo, você tem alguns, você tem alguns recursos de edição aqui. Você pode ajustar a exposição, você pode ajustar o contraste realmente básico. Não é tão robusto como o Photoshop. Será suficiente para algumas coisas. Mas se você digamos que o cliente decidiu que não gosta da imagem, quer alterá-la ou pode escolher Imagem. E então você escolhe entre qualquer coisa que você quiser. Digamos que eu escolha este. E deve ser preenchido automaticamente agora. E agora eu tenho essa nova imagem lá também. Então, é muito simples projetar tudo em Figma. Enquanto você conhece o Photoshop, desde que você conheça qualquer outro tipo de software de design, a espessura vai ser muito, muito intuitiva. E se você estivesse projetando anúncios estáticos, você chegaria tão longe quanto isso. E você basicamente acabou, certo? É aqui que você pára. E você só precisa exportar essas imagens como imagens JPEG estáticas. Então nós selecionaríamos todos eles. Eu descia aqui para exportar minhas cinco camadas diferentes. Digamos que vou guardá-los na minha área de trabalho. E agora está feito. Então, agora, se eu for para a minha área de trabalho, deixe-me sair da tela cheia aqui. Agora você vê todos os meus anúncios aqui já perfeitamente rotulados como eles deveriam estar lá, rotulados usando o que eu nomeei meu quadro de arte. E eles estão prontos e prontos, certo? E por isso é tão simples de projetar acrescenta em Figma. Mas Figma também tem alguns recursos muito legais e plugins que você pode usar para levar estes a um novo nível além de apenas torná-los anúncios estáticos. Então, no próximo vídeo, vamos rever como esse plugin se parece e o que ele faz com seus anúncios de exibição. Então fique atento. 3. Como adicionar animação: Tudo o que te mostrei até agora é muito simples e não é exatamente uma notícia que muda o jogo aqui. Essencialmente apenas projetar placas de arte dentro Figma, que é parcialmente teria sentado lá foi projetado para fazer. Mas a coisa realmente legal que figma tem agora é a capacidade realmente animar esses anúncios e exportá-los como ciganos e como HTML adiciona, a parte emocionante são os anúncios HTML. Uma vez que cada vez mais os anúncios de exibição estão se afastando apenas serem anúncios JPEG estáticos e precisando ser esses anúncios HTML5 dinâmicos que apenas tiveram um melhor desempenho e apenas obter mais retorno sobre o investimento para esses tipos de anúncios. Então vamos mergulhar em como fazer isso na Figma. Você vai precisar de um plugin chamado banner de Phi, a fim de fazer o que eu estou prestes a mostrar-lhe. Mas se você tem o plugin, essencialmente o que você faz é ir até aqui, você entra em plug-ins, e é chamado banner of phi, banners studio. Agora, melhor se phi é apenas um plugin muito legal e fácil de usar para Figma. Assim como acontece quando, uma vez que você o tem ativado e uma vez que você instalá-lo e, em seguida, tê-lo em execução e você clica e executá-lo. O que ele faz é que basicamente leva cada um de seus elementos em sua tela onde todas as diferentes coisas que você tem em cada uma dessas telas. E permite adicionar animações. Você não precisa fazer nenhum tipo de codificação. Você não precisa fazer qualquer tipo de coisa extravagante. Basta dizer o que você quer animar e quando. Então vamos dizer, vamos para o meu, vamos ver, vamos para vamos para isso. Mas, ok, então aqui, estou no meu 336 por 280 d.C. E, por padrão, tem essa animação de desvanecimento aplicada a cada efeito de camada única. Então, se eu clicar aqui e apenas pressionar play off the bat, ele já tem uma animação. Então eu poderia literalmente apenas levantar um dedo e apenas dizer exportar HTML ou exportar para Jeff e vídeo e terminar com isso. Se eu quisesse começar a mexer com ele. Bem, então é aqui que ele se torna exatamente como a animação de photoshops pátria que eu cobri em um dos meus cursos anteriores. E os banners lanche animação linha do tempo que eu também tenho um curso diferente em. É realmente apenas entender a linha do tempo, entender como a emoção funciona, e depois adicionar esses efeitos de animação. Então, digamos que a primeira coisa que eu quero voltar para aparecer é o texto que aprendeu como Lear como benefício de saúde mental está mudando. Então eu iria selecioná-lo e então dizer que eu quero, para, para, alimentar e dizer por que é uma habilidade e ver como isso se parece. Sim, então eu gosto mais da escala. Então eu quero que isso venha em primeiro lugar. Então eu vou mover este pequeno quarteirão todo o caminho para a frente. Então, agora, se eu jogar isso de novo, é a primeira coisa que aparece. E então já estou gostando mais disso. A próxima coisa que quero aparecer, vamos ver. Eu quero o download agora e o logotipo Lyra para, para aparecer um pouco mais cedo. Então eu vou para o meu botão aqui e vamos ver. Eu tenho que ir lá em cima. Sim, gosto melhor e farei a mesma coisa com o logotipo, quero que apareçam ao mesmo tempo. Então estes dois agora estão alinhados ao mesmo tempo. E eu não quero que eles se encaixem. Digamos que você tem uma biblioteca inteira de coisas que você pode fazer, você pode ficar realmente louco com isso. Este papel da esquerda, direita, fica um pouco louco. Se eu quiser comprar em C para piscar e ver como isso se parece. Talvez essa seja a jogada certa para algo em que você está trabalhando. Sabe, você tem um monte de coisas que você pode escolher fazer. Mas vamos ver, o que é girar 360. Isso é demais. Digamos que quero fazer, não sei. Eu meio que gosto da habilidade em sim, e eu vou fazer a mesma coisa com o logotipo viral. Dimensionamento. Sim. E agora quero as imagens dos dois casacos. Então eu tenho a capa do estudo e a página de estudo 2. Novamente, é por isso que é realmente importante nomear todas as suas camadas adequadamente. Porque quando você está fazendo isso, se você, se isso é apenas IMG traço 66 5 ou é, você sabe, eu estoque imagem Baba. Fica confuso ao que você está se referindo. Então rotule tudo para que você sempre possa encontrar exatamente o que você está procurando. Mas eu não quero que eles desapareçam imediatamente. Eu meio que quero que eles desapareçam e depois que eu receber o texto, então vamos dizer para mover isso aqui. E a mesma coisa que eu quero que eles alimentem, mas ao mesmo tempo, talvez apenas um pouco cambaleados. Lá vamos nós. Então, quando você toca mais uma vez, isso é um pouco que eu não gosto de como ele vem em muito mais tarde. Então vamos fazer isso. Vamos matar um pouco tarde demais. E então a última coisa é que eu quero que essas coisas de fundo apareçam ao mesmo tempo no início também. Eu quero que eles se encaixem. Vamos fazer uma era Puffin olhar como sim, eu gosto disso. Ok, então vamos mudar isso para Puffin. Lá vamos nós. Legal. Legal. E agora que estou olhando para ele, não gosto que o botão Download e um botão mentiroso apareçam antes do estudo de caso. Acho que deve vir depois do estudo de caso. Então vamos em frente e mudar isso para gostar e isso meio que vem aqui. Ok. Acho que terminamos, isso é bom para mim. Então agora eu tenho duas opções aqui, eu diria, e eu vou ter que passar e fazer isso para toda a minha exibição. E então eu fiz isso para o meu tamanho único. E agora eu passo e basicamente só tenho que refazer isso novamente para todos os meus tamanhos diferentes. Como isso. Você também pode simplesmente fazer, fazê-lo globalmente usando estas camadas de seleção rápida. Digamos que eu faça o texto, certo? Então ele vai rapidamente selecionar todas as minhas camadas, todas as camadas de texto, e eu posso mudar todas elas para o que eu tinha em que era habilidade em obrigado. Sim, escalando. E isso vai mudar todos eles para mim. Todos os diferentes terão, se eu entrar aqui, todos terão escala. E se eu mudar o tempo para isso também. Então eu acho que no meu original, vamos ver. Chegue cedo às 0. Então, sim, é, é, é uma maneira de, acelerar sua coisa e você pode realmente apenas fazê-lo aqui em baixo. Então você clica nele, é escala em 30 segundos e diz, aplicar animações em camadas. E agora está fazendo isso globalmente. Então você não precisa fazer isso individualmente. E posso fazer isso de novo para qualquer camada. Então, para o botão, faça a mesma coisa. Eu acho que eu tenho isso escala em e eu tinha ele habilidade em desde minha habilidade original um e em 1.1 segundos, deixe-me entrar em 0.1, aplicar a cinco coisas. Vamos aplicá-lo globalmente. Então é assim que simplifica suas operações para que uma vez que você tenha mais do que tudo, mais do que apenas um anúncio exibido aqui, eu tenha esses 12345. Às vezes, você está trabalhando com 10, 15, 20 tamanhos de anúncios diferentes. Portanto, você não vai querer percorrer individualmente e remapear cada um desses anúncios de exibição. Então, se você viu, se todas as suas camadas têm o mesmo nome, se você fizer a cópia e colar. Então, aqui você começa com um anúncio de exibição e você copia e cola todos esses ativos para o próximo tamanho. E então você passa, então você está essencialmente criando os mesmos elementos em todas as suas telas. Então, quando você entra no Banner, se eu Studio, você pode selecionar rapidamente suas camadas e você tem exatamente as mesmas camadas trabalhando em cada uma das coisas, cada um desses, esses anúncios de exibição. E você pode fazer esses efeitos globais. Poupa-te tanto tempo. Então, digamos. Então agora eu fiz isso em som, agora eu estou pronto para exportar. Então, neste próximo vídeo vamos falar sobre como exportar esses links, como adicionar seus links de URL. Qual o próximo passo é tomar estes e tipo de terminá-los fora para entrega. 4. Exportando seus anúncios animados: Agora, neste momento nós fizemos a parte difícil. Adicionar a animação e definir o seu tempo é o mais intensivo de tempo e trabalho como parte de todo este processo a partir daqui, exportar é uma brisa. Então vamos supor que já passamos e adoramos, ao contrário de nossos anúncios de exibição, gostamos da animação e estamos prontos para exportar. Nossa primeira opção é exportar como um GIF ou um vídeo. E então quando eu clico nisso e é isso que traz esse diálogo. E essencialmente a partir daqui, você pode fazer com que os banners sejam explorados como um GIF ou um vídeo. Se você escolher um GIF, você pode definir seu loop de reprodução infinito aqui. Digamos que você queira que a animação só carregue uma vez e depois pare. Você definiu isso aqui. Se você queria loop infinitamente, então você precisa ter isso selecionado. Então isso é infinitamente loop, e isso não é loop. Se você estiver fazendo vídeo, escolha seus quadros por segundo. Você pode fazer o mais rápido, o mais rápido que quiser, como você pode ver aqui. Ele tem algumas configurações dependendo do que você está fazendo. Portanto, se você recomendar que, se você estiver fazendo o Google Ads, você deve estar em 40 quadros por segundo. E então você escolhe sua qualidade de imagem. Isso é mais relevante para Jeff, mas também para qualquer tipo de vídeos estáticos que você tem. A qualquer momento imagens estáticas que você tem em seus vídeos, você pode escolher a qualidade aqui. E depois disso, você escolheria Exportar Jeff ou exportar MP4 e exportar web. E eu não vou fazer isso agora porque leva um tempo para fazer isso, para empacotar tudo. Mas essencialmente é tão simples como não pode ser apenas exportação e você vai, você está pronto para ir. Agora, se você exportá-lo como um arquivo HTML, é aqui que parte da magia realmente acontece. Agora, se fôssemos fazer a exportação como HTML, um diálogo diferente surge. Então, como você pode ver aqui, temos a opção de adicionar uma borda de um pixel a todos os nossos banners. Isto é no caso de você ter um fundo, se o seu fundo é branco ou você está preocupado de alguma forma com o seu fundo, tipo de correspondência com o plano de fundo do site. E você quer ter certeza de que é distinguível do fundo. Você pode adicionar uma borda de um pixel e isso só vai adicionar, como você pode ver nesta visualização, esta é uma borda muito simples para todos os seus anúncios de exibição. Você pode adicionar uma pré-carga ou animação a todos os seus banners. Isto é essencialmente como se fosse um tamanho de arquivo muito longo e maior. Você adiciona isso e ele apenas barril adiciona essa coisa para que as pessoas saibam que algo está carregando em sua extremidade. Minha regra geral é se você precisa de um freeloader, seu arquivo é muito grande e seu, se o seu design é muito complicado, eu geralmente não mexer com nada disso. mesmo que com o Geoff e o vídeo. Você tem a opção de loop infinitamente dos melhores. Então, se você alternar isso, os banners vão jogar através da animação que ele vai voltar para o início e loop novamente. Às vezes você quer isso e às vezes você não. Então você tem a opção de qualquer maneira de ter um jogo através de uma vez e, em seguida, ficar, ou eu vou jogar através de uma vez e, em seguida, loop novamente. Quanto ao empacotamento real do arquivo, você tinha a opção de incluir um JPEG de backup para todos os seus banners. Eu recomendo isso como um cofre. Mantendo em caso de algum motivo seu anúncio é incapaz de carregar, você tem um JPEG estático backup como certificando-se de que, como uma forma de certificar-se de que seus banners I à prova de bala e ele vai carregar não importa o quê. Você tem a opção aqui para alternar duas imagens de arcos para telas de retina. Isso é cada vez mais comum como exibição, medida que as crianças obtêm cada vez mais alta resolução. Então, está se tornando prática muito mais comum ter telas Retina. E então você pode comprimir suas imagens. Eles geralmente não os comprimem. Mas se novamente, você precisa reduzir o tamanho do arquivo por qualquer motivo, sim, a opção de compactar suas imagens aqui e alternar a qualidade para elas. Agora, aqui está o recurso mais emocionante deste plugin, as configurações de saída de código. Então, se você clicar neles, você pode ver aqui que você tem todas essas opções diferentes para como você deseja exportar esses anúncios HTML. Isto é uma mudança de jogo. Isto é dentro de Figma que você pode apenas fazer isso com um clique em Figma. Então, digamos que seu empregador ou seu cliente está fazendo anúncios do Google e eles serão, o arquivo HTML5 para o Google Ads vai ser diferente do que dizer que HTML5 L para DoubleClick, gerente de campanha, para sísmico, para Yandex, para Almirante. Todos usam uma plataforma diferente, então a capacidade de exportar especificamente para essa plataforma é crucial. Então, digamos que, para esse propósito, nossos gerentes de campanha usando o DoubleClick. Então, usamos o clique duplo. E agora é aqui que você colocaria no link para o qual deseja que seus anúncios sejam acessados. Então, digamos que o meu seria www.health.com. Está bem. E incluir indivíduos em arquivos para cada banner? Algumas pessoas dependendo novamente, você teria que confirmar com seu cliente ou seu empregador como eles realmente carregam isso em seus gerentes de campanha. Alguns deles o que arquivos individuais para cada anúncio de banner individual. Alguns deles querem apenas um grande arquivo zip, descobrir de que maneira eles preferem. E então você faz isso aqui. Então agora vou clicar em Exportar cinco batedores. E então vamos esperar enquanto ele gera todos esses banners para mim. Ótima. E agora eu posso apenas clicar, baixar o arquivo zip, escolher para onde eu quero que ele vá e clicar em Salvar. Então, agora, se eu entrar na minha pasta de downloads, eu tenho meu arquivo aqui com todos os meus anúncios individuais como falha individual. Se eu clicar nesta pasta HTML de índice, você verá todos os meus anúncios coletivamente para que eu possa vê-los todos. Certifica-te de que tudo parece que está a jogar da forma que é suposto. O que é ótimo. Deixe-me voltar para a pasta. Agora, se entrarmos aqui, como eu disse, temos as pastas individuais. Temos a pasta index.html que para o banner individual, temos as imagens. Então estes são basicamente todos os links, todos os diferentes componentes de nossos anúncios de exibição. Que é a maneira como você criaria um pacote no InDesign onde você tem todos os links, fontes e tudo mais. Html funciona da mesma maneira. Tínhamos que ter uma pasta empacotada de todos esses ativos diferentes. Nós temos alguns JavaScript e CSS para styling e , em seguida, nosso backup JPEG caso as coisas não carreguem corretamente. E é isso. Então você acabou de criar na pasta HTML5 ou HTML5 adicionar em Figma sem a necessidade de saber qualquer tipo de codificação.