Boas-vindas a mais um curso de Figma da Alura. Caso ainda não nos conheçamos, vamos nos apresentar. Meu nome é Matheus Fellain, sou Product Designer, especialista em Design System e autor do livro "Design System Além do Layout", publicado pela Casa do Código aqui da Alura. Sou professor e já ministrei muitas aulas na Alura sobre Design System, Figma, UI, UX, Writing, entre outros temas.
Audiodescrição: Matheus é uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. O cabelo é bem curto, enquanto a barba é longa, cobrindo praticamente todo o pescoço. Matheus usa óculos de cor amadeirada e veste uma camisa roxa clara. À sua frente, há um microfone sustentado por um braço articulado. Atrás, há uma estante com livros e bonecos. Além disso, há uma grade com crachás de eventos pendurados e, abaixo deles, uma costela-de-adão verde e vistosa.
Neste curso, vamos nos aprofundar em aspectos além da UI (User Interface), que tanto trabalhamos no Figma. Vamos discutir sobre Figma Bus e Figma Slides. Ao longo da formação, é importante saber que na Alura temos uma formação completa de Figma. Este não é o primeiro curso; já estamos no quarto curso dessa formação.
Neste curso, caso ainda não conheçamos bem o Figma e queiramos aprender mais sobre as ferramentas, Auto Layout, componentes e bibliotecas, é importante conferir outros cursos anteriores. No entanto, eles não são pré-requisitos para este curso, pois abordaremos um modelo diferente, o Figma Bus. Esta parte do Figma é voltada para a criação de artes para redes sociais, propagandas e impressões.
Vamos trabalhar em alguns projetos dentro do Figma Bus para criar arte para redes sociais, desenvolver um template e utilizar uma planilha para criar várias artes simultaneamente. Além disso, teremos uma parte do curso dedicada ao Figma Slides. Vamos entender como essa ferramenta se assemelha a outras ferramentas de slides conhecidas, como PowerPoint e Google Slides, e explorar os recursos de inteligência artificial que ela oferece. Também aprenderemos a conectar o Figma Slides com o Figma Design, realizar apresentações e conhecer as novidades e recursos disponíveis.
Após o lançamento do Figma Slides, muitos preferem utilizá-lo em vez de outras ferramentas, devido à sua qualidade superior. Este curso será um grande guia para nossa carreira, ajudando-nos a nos tornarmos especialistas na ferramenta e expandir nossos horizontes dentro do Figma, sem a necessidade de baixar outras ferramentas ou abrir várias abas no navegador. Tudo isso pode ser feito em uma única plataforma.
Estamos confiantes de que este curso será perfeito para nós, e esperamos nos encontrar no próximo vídeo. Até lá!
Ao longo da formação, já exploramos muitos dos recursos de design que o Figma oferece. Inclusive, abordamos o Figma Make e o DevMod, que, apesar de estarem relacionados à parte de design, são mais voltados para a equipe de engenharia, ou seja, para pessoas programadoras. Agora, vamos nos afastar completamente do modelo de design do Figma, de construção de protótipos, interfaces, aplicativos e sites, e nos direcionar para um lado mais voltado ao marketing.
Com o Figma aberto, tudo o que precisamos fazer é clicar para criar uma nova aba. Ele nos perguntará qual tipo de arquivo desejamos criar, e selecionaremos o quarto tipo, o Figma Bus, que ainda está em fase beta, ou seja, em construção e testes antes de sua versão oficial. Ao clicar, o Figma Bus será carregado. Caso seja a primeira vez que acessamos com nossa conta, provavelmente aparecerá um aviso explicando o que é o Figma Bus. Podemos fechar esse aviso e, em seguida, será exibida uma janela que nos perguntará com qual template desejamos trabalhar. O Figma Bus é mais voltado para marketing, sendo útil para campanhas, artes para mídias sociais e propagandas.
Ele nos oferece alguns tamanhos de templates padrão para redes sociais, como o post padrão para Instagram (1080 por 1350), post padrão para Facebook (1200 por 630), para o X (antigo Twitter) (1200 por 675) e o modelo retangular grande das propagandas do Google, chamado Google Large Rectangle Edge (336 por 280 pixels). Ao selecionar um deles, um arquivo em branco será criado nesse tamanho para começarmos a trabalhar.
Além disso, há templates próprios do Figma, de diversos tipos, tamanhos e casos de uso, como cartas, banners para Twitter, posts para X/Twitter, stories e propagandas para Instagram. Todos esses templates são padrões editáveis, criados pelo Figma. A presença de muitos modelos de stories indica que o Figma Bus é bastante utilizado para esse fim.
Na aba de explorar dentro do Figma Bus, temos menus que podemos selecionar. O menu de social filtra apenas os templates de redes sociais, mostrando casos de uso para Twitter, Instagram, LinkedIn e YouTube, entre outros. No menu de ads, encontramos templates para propagandas, como as do Instagram, LinkedIn e Google. Há também modelos finos, como o skycrapper, que provavelmente aparecem em blogs.
No menu de impressão, encontramos templates para pôsteres, geralmente no tamanho de uma folha A4. Em categorias mais amplas, como negócios, o Figma reúne vários modelos de templates para vendas, promoções, eventos e celebrações. Podemos adicionar qualquer um deles ao Figma Bus para edição, permitindo modificar texto, posição, imagem e cor.
Na parte esquerda, temos o menu de ferramentas, onde interagimos bastante. Há um cursor, uma mão e um balão de comentário, já conhecidos da ferramenta de design do Figma. Podemos visualizar nossos bus e artes, acessar o painel de templates e adicionar novos ao nosso projeto. Também há opções de texto, permitindo adicionar textos normais ou com fontes combinadas, criando artes interessantes. Todos os textos são editáveis e utilizam fontes gratuitas do Google Fonts.
Além da parte textual, podemos adicionar mídias, como imagens e vídeos. O Figma Bus está vinculado ao Unsplash, um banco de imagens gratuito, permitindo arrastar qualquer imagem para dentro do projeto, onde será carregada e substituída conforme necessário.
Dentro desta próxima opção, temos inserções. Aqui, por exemplo, encontramos vários adesivos que são bibliotecas de componentes inseridas na comunidade do Figma. A equipe do Figma disponibiliza esses componentes no Figma Bus para que possamos utilizá-los. São como adesivos que podemos arrastar e usar. Podemos identificar que são componentes pela borda roxa. Podemos inseri-los à vontade e utilizá-los conforme necessário. Existem muitos disponíveis, e podemos buscar por mais.
Há também uma área de formas, semelhante às que já usamos no Figma, mas com algumas formas mais abstratas que não conseguimos criar facilmente, como balões de conversa, que são muito utilizados para fluxogramas ou para indicar algo específico em uma interface.
Em seguida, temos a área de plugins, que dispensa grandes apresentações. A comunidade do Figma oferece uma série de plugins e funcionalidades adicionais que podemos inserir. Muitos deles funcionam para o Figma Bus, e alguns são exclusivos para ele.
Nas duas últimas opções, temos uma área para editar o conteúdo da nossa arte sem precisar clicar e editar manualmente várias vezes, o que facilita bastante a manipulação do conteúdo. A última opção permite fazer o upload de um arquivo, como uma planilha CSV, e criar várias artes automaticamente. Vamos explorar esse recurso na próxima aula, pois acreditamos que seja o melhor recurso do Figma Bus.
Com essas apresentações feitas, este é o Figma Bus. No próximo vídeo, vamos criar uma arte com um modelo. Nos vemos lá!
Vamos começar criando uma arte interessante que, em algum momento, já vimos em perfis no LinkedIn: uma capa personalizada da empresa. Isso é muito bacana, pois mantém uma consistência e harmonia entre os colaboradores da empresa. Vamos criar uma arte de capa do LinkedIn para o Code Connect no Figma Buzz.
Para começar, com o Figma Buzz aberto, vamos pesquisar por "LinkedIn cover" e ver o que aparece. Temos quinze exemplos de capas disponíveis. Lembrando que temos um asset do Code Connect ao lado. O Code Connect utiliza tons de verde mais escuros para contraste. Não encontramos nada exatamente parecido, mas gostei de um modelo verde que, apesar de pequeno, parece interessante. Vou adicioná-lo para ver melhor. Ele não possui um logotipo, mas tem dois textos. Podemos modificar isso.
Achei um modelo alaranjado interessante também, com um logotipo no topo. Já vi modelos parecidos, com mais arte em destaque e um texto menor para destacar o logotipo da empresa. Este modelo possui o logotipo da Acme, um título grande no meio e o site no final. Precisamos atualizar a identidade visual, mas acho que é um bom ponto de partida.
Vou apagar o primeiro modelo que criamos e começar a trabalhar neste. Vou modificar o texto central. Pensei em algumas ideias e gostei de "Tecnologia que conecta as pessoas". Isso faz sentido com o nome da marca. No final, vou mudar o link para codeconnect.dev, que acho mais charmoso do que .com.
Vamos substituir o logotipo. Estou editando o texto pelo campo de edição de conteúdo. Normalmente, no design, iríamos na parte de preenchimento para substituir a imagem, mas no Figma Buzz, fazemos isso pela parte de conteúdo, o que é mais dinâmico. Vou clicar em upload e selecionar o logotipo do Code Connect na área de trabalho. Substituímos a imagem, mas está pequena. Vou aumentar e ajustar o espaço do contêiner usando o teclado para diminuir a seleção sem alterar a imagem. Com o alt, diminuímos os dois lados ao mesmo tempo. Assim está ótimo.
Podemos atualizar a identidade visual. Estou pensando em usar a imagem em branco e o fundo em verde. Vamos fazer alguns testes. Vou escurecer o fundo usando nosso guia de estilo. Vou pegar a mesma cor de preenchimento e aplicá-la no final. Agora, vou trabalhar nos quadrados.
Eles estão com duas cores diferentes. Não há necessidade disso, então vamos deixar todos com a mesma cor. Vou pegar o mesmo verde que ficou com um acabamento legal. Vou aplicar essa cor nos dois textos, substituindo o preenchimento.
Não gosto muito da fonte atual do site. Vou experimentar uma fonte monoespaçada para ver se fica mais interessante. A fonte Google Sans Code é uma opção que gosto bastante, pois é mais agradável visualmente. Temos também uma fonte específica para o Code Connect, que é a Prompt, disponível no Google Fonts. Vou substituir a fonte atual, Plus Jakarta Sans, por Prompt. O estilo bold não ficou estranho, mas o espaçamento está negativo. Vou ajustar para um valor maior. Antes estava em -4, agora no zero. Se aumentar um pouco o texto, com três palavras em cima, ficará mais interessante. Precisamos garantir que ele não fique encostado na borda, então vamos ajustar o espaçamento para 29 pixels de cada lado, garantindo um respiro consistente.
Nomeamos o arquivo como linkedin_cover e podemos exportá-lo para a máquina e fazer o upload no LinkedIn. O interessante é que, ao criar para o LinkedIn Profile Banner, se quisermos mudar para outro tipo de arte, não precisamos criar uma nova página ou refazer o modelo em outro tamanho. Essa é uma das vantagens do Figma, que quero mostrar. Trabalhamos com um template e uma medida específica para uma rede social. Se quisermos mudar, podemos interagir com outros tipos de cover, como o do Twitter. Ele aplica as mudanças sem distorcer a imagem, apenas ajustando o espaçamento e a ilustração.
Claro, precisamos ter atenção a pequenos ajustes, mas o Figma adapta bem a arte de um tamanho para outro. Por exemplo, ao mudar para o banner do YouTube, que é maior, ele ajusta o espaço e as seleções. Poderíamos resolver pequenos problemas com o auto layout, que facilita o trabalho. Esse conceito de auto layout é abordado no primeiro curso da formação. Caso ainda não tenha assistido, recomendo que veja.
Nos encontramos na próxima aula. Até lá! Valeu!
O curso Figma: Além do UI com Figma Buzz e Figma Slides possui 131 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Matricule-se no plano PLUS e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Mobile, Programação, Front-end, DevOps, UX & Design, Marketing Digital, Data Science, Inovação & Gestão, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Para estudantes ultra comprometidos atingirem seu objetivo mais rápido.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
