Masterclass Figma: do zero à criação de uma Landing Page

O mercado de UI - Conhecendo o Figma

Apresentando o instrutor e a masterclass

Bem-vindos à primeira aula da Masterclass de Figma aqui na Alura! É um prazer tê-los aqui. Caso ainda não me conheçam, permitam-me apresentar. Meu nome é Mateus Villain, sou Designer de Produto e professor da Escola de UX e Design na Alura. Ministro cursos sobre experiência do usuário, interface do usuário, writing, research, entre outros. Muitos desses cursos acabam abrangendo a maravilhosa ferramenta sobre a qual falaremos hoje: o Figma.

Audiodescrição: Mateus é uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. O cabelo é curto, enquanto a barba é longa, cobrindo praticamente metade do pescoço. Usa óculos de armação de madeira. À sua frente, há um microfone sustentado por um braço articulado. Veste uma camiseta verde. Atrás dele, há uma estante com alguns livros e uma máquina de escrever. Atrás da estante, há uma grade com alguns crachás pendurados e também algumas camisetas.

Explorando o Figma e suas funcionalidades

Nesta primeira aula da Masterclass, vamos nos concentrar em conhecer essa ferramenta, mas não apenas em introduzi-la. Vamos além, discutindo para que serve, quem a utiliza, como a utilizamos, seus benefícios, desvantagens, concorrentes e profissionais envolvidos. Tentaremos desvendar tudo o que pudermos nesta primeira aula, fazendo um reconhecimento, e depois, na próxima aula, começaremos a criar um projeto no Figma, que vocês podem acompanhar conosco.

Já estamos com o navegador aberto, e vamos explorar o que é o Figma. Figma é uma ferramenta com cerca de 10 anos, cujo foco principal é trabalhar com produtos digitais. É uma plataforma onde podemos nos cadastrar, abrir uma conta e começar a construir produtos, desenvolvendo a interface visual desses produtos. Podemos criar aplicativos, sistemas, sites em versões móveis, para tablets, desktops e até mesmo para smartwatches. É uma ferramenta que nos permite exercer nossa criatividade para construir qualquer tipo de produto digital.

Destacando as vantagens do Figma

Um dos grandes atrativos do Figma é que ele não exige que gastemos dinheiro para usá-lo. Isso já o coloca à frente de muitos concorrentes. Embora tenha planos pagos, o Figma oferece um modelo freemium, semelhante ao Spotify, onde algumas funções são gratuitas e outras requerem assinatura. No entanto, mesmo no plano gratuito, podemos construir um site ou aplicativo sem pagar nada, o que o torna acessível para muitas pessoas, empresas e freelancers.

Além do preço, o que mais chama a atenção no Figma? Ele é uma ferramenta colaborativa, permitindo que compartilhemos arquivos e editemos simultaneamente com outras pessoas. Isso agiliza o processo de entrega de produtos, pois podemos trabalhar em diferentes partes de um projeto ao mesmo tempo, mantendo a padronização e comunicação entre as equipes.

Comparando o Figma com outras ferramentas

Comparando com outras ferramentas, como o Adobe XD, que foi descontinuado, e o Sketch, que é exclusivo para Mac e pago, o Figma se destaca por ser acessível em diferentes sistemas operacionais e por não exigir download, podendo ser usado diretamente no navegador. Isso o torna a ferramenta mais acessível para prototipagem de interfaces de usuário.

O Figma também oferece recursos para design systems, permitindo que empresas mantenham a padronização de sua identidade visual em todos os produtos. Ele evolui constantemente, trazendo atualizações que facilitam a gestão de componentes, estilos e códigos dentro da ferramenta.

Introduzindo o FigJam e Figma Slides

Outra coisa: talvez já tenhamos ouvido falar do famoso Miro, do site Miro.com. Miro é uma ferramenta que chamamos de ferramenta de quadro branco. Para que serve? Imaginemos o seguinte: podemos fazer um paralelo com o mundo real. Pegamos um quadro físico onde podemos escrever, colocar post-its, adicionar anotações, e todos podem planejar. Isso é o Miro. Miro é um quadro, mas digital e infinito. E lá podemos fazer muitas coisas, desenvolver informações com aquele vídeo interessante que está sendo mostrado. E é colaborativo. Figma entendeu a importância disso, como as pessoas fazem planejamento online em conjunto, e não apenas entre designers. E é até um gancho, porque vamos falar sobre isso a seguir. Então, trouxeram uma ferramenta dentro do Figma para que as pessoas façam esse tipo de planejamento. Chamam de FigJam. Vamos abri-la e mostrar. FigJam está dentro do próprio Figma, e é outro tipo de arquivo que as pessoas podem criar. E pela interface, é muito parecida com o Miro. Já usamos as duas ferramentas, e claro, somos parciais porque gostamos muito do Figma. Não é por acaso que é o nome da nossa gata. Mas FigJam é um caso de discussão. Para nós, FigJam é muito melhor, tem muito mais funcionalidades, e possui uma série de recursos extras que os usuários podem implementar, que não são nativos do Figma, e isso é totalmente incrível. Figma permite isso, tem uma comunidade interna. Para que possamos adicionar plugins, e assim fazer muitas coisas, adicionar funcionalidades extras, interagir com muitas pessoas. Tudo o que fazíamos no Miro, podemos fazer no FigJam, e ainda podemos fazer um pouco mais, o que para nós é muito interessante.

E há outra coisa que gostaríamos de mencionar, dissemos que havia duas coisas. Vamos nos lembrando. E esta é mais recente. Fazer apresentações é algo que fazemos o tempo todo. Tanto designers, como PMs, como POs e outros. E o que fazemos? PowerPoint, Google Slides, Canva... Por que não fazer no Figma? E essa é a nova iniciativa, a nova atualização que chegou desde o ano passado. Figma Slides. É uma ferramenta que, vamos ver, queremos ser muito sinceros aqui. Já usamos PowerPoint, usamos muito PowerPoint, usamos Google Slides, que é o que menos gostamos, nunca usamos Canva, e já fizemos slides usando o próprio arquivo de design do Figma. Esta ferramenta de slides do Figma nos pareceu sensacional. Achamos simples de usar, tem vários modelos bonitos, mas deixando de lado os modelos, porque muitas vezes gostamos de criar nosso próprio modelo, ainda assim a encontramos muito prática. Porque realmente foi pensada para a experiência do usuário. Entenderam, e isso é o interessante do Figma, observar as ferramentas que as pessoas já usam, entender os pontos positivos e negativos, esse processo de benchmarking (comparação de desempenho) que conhecemos, e pensar em como fazer uma ferramenta de slides que as pessoas queiram usar e que seja eficiente e rápida em seu trabalho. E nasceu o Figma Slides, o que é muito bom e é um acréscimo importante. Podemos usá-la por enquanto de forma gratuita, mas o plano do Figma é torná-la paga em alguns meses, que custará, se não me engano, 2 ou 3 dólares por mês. Não é um valor muito elevado, mas vale a pena mencionar. É uma ferramenta que se tornará paga e, em princípio, todos os planos que o Figma tem estão apenas em dólares. Talvez haja em outras moedas, mas não em reais brasileiros.

Identificando os usuários do Figma

Bom, dito isso, falamos do Figma, mencionamos as grandes virtudes que tem; acreditamos que alguma dúvida que possa surgir é: quem realmente usa o Figma no dia a dia? Quem cria contas nessa ferramenta? Quem a usa de verdade? O que a empresa espera que use o Figma? Bem, a primeira e mais óbvia são nada mais nada menos que os designers. Figma foi pensado inicialmente para designers, para que as pessoas pudessem criar protótipos, criar interfaces, criar design systems (sistemas de design). Assim, esse é o grande público do Figma. Os designers. E Figma oferece uma série de recursos que já mencionamos. Formas, elementos, componentes, colaboração. É maravilhoso. Assim, não podemos deixar de falar tanto da parte de design, porque é óbvio que Figma foi feito para designers. É uma ferramenta para criar interfaces. Mas sabe quem mais pode tirar muito proveito do Figma? Os product managers (gerentes de produto). Sim, eles mesmos estão lá falando sobre isso. Têm uma seção dentro, em algum lugar aqui. Funções, cargos. E têm esses três menus: Design, engenheiros e product managers. Gerentes de produto. Então, por que um PM usaria Figma? Já mencionamos agora uma ferramenta. FigJam. Um PM não vai construir telas. Isso é trabalho do designer. Então, por que o PM se envolve no Figma? Precisa de uma ferramenta para ver os protótipos. Ver as navegações. Fazer validações. Entender como está o avanço, a evolução do produto. E além disso, poder escalar. Ajudar no planejamento. Usar alguns recursos que não são apenas de prototipagem para colaborar com o designer que está trabalhando no Figma. Então FigJam é uma ferramenta maravilhosa para isso. A pessoa pode ir lá. Pode fazer o planejamento. Colocar seus comentários. Colocar seus post-its. E fazer muitas coisas que planejam a construção e escalonamento do produto.

Facilitando a navegação e interação no Figma

O que mais? A parte de navegação. Comentamos. Podemos usar Figma no celular para ver, por exemplo, como está o protótipo. Como está a navegação. Se estamos fazendo um site para desktop, por exemplo. Também podemos navegá-lo. Como se já tivesse sido desenvolvido. Isso é muito bom para mostrar a um cliente. Se estamos fazendo um site para uma empresa da nossa cidade e ainda não começamos a desenvolvê-lo, ou não passamos para uma pessoa desenvolvedora para que comece a programar. Mas o cliente quer ver. Quer ver como está. Vamos ser honestos. Vamos. Deixe-nos abrir a parte inicial. Para fazer o paralelo com aquele vídeo. Se mostrarmos ao cliente todas essas telas separadas, pode ser que entenda que esta é a página inicial. Essa é a página de serviços. Essa é a página que fala da empresa. Etc. Pode entender. Pode não ficar claro. Mas não é muito bonito mostrar à pessoa todas as páginas soltas assim. É muito mais agradável, concorda? É muito melhor mostrar a experiência. A navegação. A fluidez. Mesmo antes de o código estar pronto. Para o PM é o mesmo. Porque o PM não necessariamente terá o conhecimento em design. Não terá o mesmo insight que nós sobre a organização que o designer tem ao interagir com Figma. Assim, mostrar ao PM como está a navegação. A interação. A fluidez. É tão bom quanto mostrar a um cliente. Porque ele está lá à frente da coordenação do produto.

Utilizando o sistema de comentários do Figma

O que mais? Figma tem uma ferramenta muito boa de comentários. Que é quase semelhante a um fórum. Por exemplo. A pessoa comentou com uma Andrea. Colocou um comentário há duas horas. Colocou um comentário dizendo algumas coisas. As pessoas podem responder. Fazem como se fosse um fio dentro desse comentário. Tipo Twitter. Tipo o próprio fio do Facebook. Blue Sky, etc. Podem fazer um fio. Discutir dentro desse comentário. Podem compartilhar visões. Podem anexar imagens. E podem resolver esse comentário. É como se fosse uma tarefa. Aqui acreditamos que coloquemos um exemplo. Talvez o formato deste item com essas flores. Com este 1 dólar por ano. Não ficou melhor. Poderíamos pensar em outra maneira de mostrar essa informação. Discutimos nesse comentário. E quando se resolve, há esse ícone de check. Que é para resolver o comentário. Que é realmente como um fórum. Como se fosse uma abertura de ticket. Mas funciona como uma forma de comunicação assíncrona. Muito, muito eficaz.

Integrando desenvolvedores ao Figma

E pessoal, o PM não é a única pessoa que vai usar Figma. É uma loucura pensar que uma ferramenta de interface não possa incluir uma pessoa desenvolvedora. E o curioso é que até há algum tempo Figma era uma ferramenta à qual as pessoas desenvolvedoras só entravam para ver o protótipo. Como ficou a tela. Para transformar esse visual em código. Não é que isso não aconteça hoje. Obviamente a grande utilidade que as pessoas programadoras têm no Figma é ver como ficou o resultado do produto para convertê-lo em código. A grande diferença é que agora Figma realmente pensa em todas as pessoas desenvolvedoras. Comentamos que o público principal são os designers. Obviamente é o público maior da ferramenta. Mas de dois anos para cá, isso é muito bom. A empresa Figma começou a pensar muito mais em como as pessoas desenvolvedoras também podem aproveitar muito bem essa ferramenta. Então a coisa é assim. A pessoa desenvolvedora entra no Figma não vai criar a interface para editar, para mover blocos. A menos que crie sua própria conta e edite lá. Mas coloquemos no contexto de uma empresa. Não vai entrar no Figma para criar uma interface, para editar, para mover elementos. Mas Figma deu a essa pessoa desenvolvedora recursos para que tenha mais praticidade ao ver as especificações do produto para tomar o que precisa e levá-lo ao código. Por exemplo, existe um novo recurso. Já está instalado. Chamado DevMode ou modo desenvolvedor. Que até mostra um fragmento aqui. Veja. Mostra informações de padding (preenchimento), largura, altura, espaçamento. Tem preview (pré-visualização) de código. Se colocarmos cores, se colocarmos elementos de tipografia, dá todas as especificações. Qual é o hexadecimal que usamos, qual é o tamanho de fonte, qual é a altura de linha, se usamos algum estilo de texto. Mostra tudo para essa pessoa desenvolvedora. Toda a informação que para nós são especificações de design para a pessoa desenvolvedora se tornam informações de código. E o mais interessante é que essa ferramenta não precisa se limitar apenas à web. Como se mostra aqui, mostrou um fragmento. Clicou aqui e está mostrando as opções de estilo para CSS. Essas são opções de estilo para navegador. Mas podemos mudar para SwiftUI que, se não nos enganamos, é para aplicativos da Apple, iOS, e Compose talvez seja para Android. Podemos estar enganados. Mas a ideia é que a pessoa desenvolvedora não precisa ver apenas a web. Se é um aplicativo, pode mudar para o código para um sistema operacional específico para Android, para iOS, para web. Fica genial essa forma de mudar. Isso é genial.

Outra coisa maravilhosa, e esta está abaixo, e é uma das melhores. A integração que fizeram com VS Code. VS Code, por se não souber, é um editor de código. Como se fosse o bloco de notas do seu computador, mas com recursos para que a pessoa desenvolvedora escreva código e seja mais fácil trabalhar, implantar e outros. Figma criou uma integração com VS Code, onde a pessoa desenvolvedora pode abrir esse editor de código em um painel da ferramenta. Pode ver o protótipo, clicar nos elementos, ver quais são as especificações e já colocá-lo no código ali mesmo. Assim não precisa estar minimizando janelas, abrindo uma, fechando outra, compartilhando tela. Tudo fica em uma única ferramenta. Então vemos como seu pensamento não está orientado apenas a designers. Está orientado a todo mundo e está se orientando a todo aquele que trabalha com produto digital. Deixou de ser apenas uma simples ferramenta para fazer interfaces. É todo um ecossistema. Por isso hoje não há nenhuma ferramenta como Sketch, Adobe XD ou outra que compita de frente com Figma.

Analisando a popularidade e demanda do Figma

Gostaríamos de trazer algo bastante interessante. Muitas pessoas perguntam: Figma é realmente uma boa ferramenta? Vale a pena usar? As empresas pedem Figma? Poderíamos chegar e dizer sim, Figma é a melhor ferramenta. E acreditariam. Mas é muito mais factível, e nós como designers também, mostrar dados. Assim, estamos em UXtools.co por se quiser acessar. E em 2023 publicaram uma pesquisa sobre o uso de ferramentas. E separam aqui algumas categorias: inteligência artificial, UI design, prototipagem básica, prototipagem avançada, whiteboarding digital, que é o que mencionamos antes, e várias outras. Veja, já deixamos aberto em UI design, vamos abrir algumas mais, mas verá a disparidade que Figma tem em relação a outras ferramentas, sejam concorrentes diretos ou não. Veja, as ferramentas mais populares de UI design. Pessoal, não há comparação. Figma é a ferramenta principal, a mais usada de todas. Sai com um número de 2254 na primeira posição, e depois está Photoshop em segundo lugar com 138. E é até engraçado mencionar porque Photoshop ainda, embora não esteja focado em criar interfaces, e nem recomendamos usar porque é muito pesado, ainda há empresas que o usam por comodidade, por estar no ecossistema Adobe provavelmente, e é curioso porque está até acima do Adobe XD. Isso provavelmente se deve ao fato de que Adobe XD foi descontinuado e Photoshop continua lá. Mas não há comparação possível. O concorrente mais próximo, Sketch, está abaixo com 114. Não compete, não compete de forma alguma. E se falamos de UI design e passando para prototipagem básica, os números falam por si, Figma domina de longe. Prototipagem avançada, o mesmo. E aqui vemos outras que estão um pouco à frente de outras. Sempre vemos a barra mais curta, em prototipagem avançada há algumas ferramentas que são. Poderíamos dizer a verdade. Protopie é uma ferramenta maravilhosa para prototipagem avançada. A questão é que está muito mais focada nisso, em prototipagem avançada. Por isso há muitas pessoas que a usam. Mas entra a praticidade. Já estamos no Figma, criando os protótipos, as interfaces do nosso produto e já nos oferece recursos para prototipagem. Talvez não sejam tão bons quanto os do Protopie, mas o fato de que já estamos na mesma ferramenta adianta e facilita muito. Assim, continua estando muito à frente das demais. Vamos clicar em Digital Whiteboard e talvez FigJam esteja lá. Talvez. Demos apenas uma olhada nesta pesquisa. Não abrimos tudo, para que vejamos juntos. E nos surpreende. Dizíamos, totalmente subjetivo, nossa opinião, que FigJam é melhor que Miro. Bem, como dissemos, os dados falam por si. E isso é algo muito bom, porque Miro está no mercado há muito mais tempo que FigJam. E é uma ferramenta realmente boa. Não vamos menosprezar o Miro. É uma ferramenta realmente maravilhosa. Mas é preferência por comodidade, por praticidade. Se já estamos no Figma, nos oferece, já usamos. Mais prático. Design System. Acreditamos que em Design System não há nenhuma que ganhe. Figma é de fato a melhor ferramenta para isso. Há outras mencionadas aqui, nem todas elas estão focadas em criar design systems. Algumas apenas documentam, armazenam o que criamos. Como por exemplo, Storybook, Digital Whiteboard, mas Figma está lá. Está à frente de todas as demais. E há algumas onde talvez Figma nem apareça. Por exemplo, testes de usabilidade. Imaginamos que Figma não vai aparecer. Não aparece. Google Meet, UserTesting. Aí são outras ferramentas. De fato, Figma não é a melhor ferramenta para fazer testes de usabilidade, porque não oferece esses recursos. Mas na parte de prototipagem, design, interface, não há quem faça sombra. Assim, como dizemos, os números falam por si.

Considerando quem deve usar o Figma

E pessoal, quem? Que não convém usar Figma? Acreditamos que vale mencionar esse tema também. Falamos de designers, PMs, desenvolvedores, programadores. Há alguém para quem não valha a pena usar Figma? Pois, acreditamos que vale a discussão, mas não há uma pessoa ou cargo específico que não deva usar. Claro, se seu trabalho está totalmente fora do produto digital, obviamente não faz sentido usar Figma. Isso fica fora. Mas quando entra no âmbito do produto digital, e a pessoa... Bem. O foco da empresa não está no digital agora, não está no planejamento, há algo mais que não podemos pensar agora, talvez Figma realmente não seja a ferramenta. Mas se o objetivo é construir um produto digital, e quando falamos de tecnologia, todas elas vão pela mesma linha, não há por que não usar Figma. E podemos até começar com a versão gratuita, se a empresa está começando, por exemplo, uma startup e não tem dinheiro para se manter 100%. Usa o gratuito, está mais que suficiente. Assim, não excluiríamos a possibilidade de que profissionais usem Figma de verdade.

Concluindo a aula e incentivando o aprendizado contínuo

Gostaríamos de levantar outra questão aqui. Já vimos que Figma é a ferramenta que as pessoas mais usam para interface, design system, protótipo. Então é fácil entender que sua demanda é muito alta. Não abrimos LinkedIn, abrimos Google, também para mostrar que Google tem essa ferramenta de ofertas de emprego, sempre lembre-se de colocar "vagas" no final, mas colocamos Figma vagas. Aqui pegou por Rio de Janeiro, provavelmente porque estamos usando VPN, por isso não tirou nosso estado de Santa Catarina, mas podemos escolher a região, mudar, e aparecem várias de São Paulo, de todo o Brasil. Se clicarmos em alguma, veremos que algumas são da própria Figma, da empresa Figma. Vamos excluir essas específicas, mas podemos ver que todas são um pouco parecidas. Temos desenvolvedor front-end com foco em UX, temos designer UX UI, estágio UX UI, UI UX, estagiário UI UX, desenvolvedor de interfaces pleno, designer UI UX, UI UX, PD, que é product designer, a parte de customer experience, o que mais temos? Web designer. Vemos que seguem uma mesma linha de pensamento, tudo com o mesmo sentimento, não vamos abrir uma por uma aqui, mas a demanda é real. As empresas, e atenção, a empresa não busca necessariamente o profissional que conhece Figma. Busca o profissional que entende de UX, que entende de UI. Mas a consequência do trabalho dessa pessoa, obviamente, vai vir no Figma. É a ferramenta que a maioria das empresas vai usar, compete com outras, é mais prática, mais acessível. Assim, sim, diríamos que, se vamos nos especializar em uma ferramenta, aprendê-la a fundo, Figma é a que devemos dominar. Hoje domina o mercado e no estado em que Figma está, em seu crescimento, e a falta de comparação com outras ferramentas, em nossa opinião, acreditamos que é muito difícil que outra empresa ou ferramenta surja e se destaque acima do Figma. E podemos fazer um paralelo com Photoshop. Existem outras ferramentas de edição de imagem, fotografia, como por exemplo GIMP. GIMP é uma ferramenta grandiosa, magnífica. Muitas pessoas usam GIMP, sobretudo quando não estão em Mac ou Windows, e editam as imagens lá. Mas não há comparação. Comparar GIMP com Photoshop, é o mesmo que comparar Figma com Sketch. Não há comparação, é muito maior, tem mais atualizações, a empresa entende que é uma ferramenta importante e que precisa continuar evoluindo, continuar escalando. Assim, sim, Figma é a ferramenta que as empresas consideram que devemos aprender, é importante para muitas pessoas, em uma época era apenas para designers, hoje também é para desenvolvedores, para PMs, para gestores. Assim, tem sua relevância. Por isso recomendamos muito aprender Figma, e recomendamos assistir às próximas aulas desta Masterclass, acompanhar este caminho conosco e com nossa gatinha, que está aqui impaciente enquanto repetimos seu nome várias vezes. Pobrezinha. E isso é tudo. Esperamos que tenham gostado desta primeira aula. Nos vemos na próxima, onde construiremos uma landing page (página de destino) dentro da ferramenta. Prontos? Nos vemos então. Obrigado!

Mergulhando no Figma - Criando uma Landing Page

Recapitulando a primeira aula

Antes de começarmos a criar uma landing page, vamos recapitular o que vimos na primeira aula da Masterclass. Foi uma aula de cerca de 40 minutos, na qual abordamos muitos tópicos. Na primeira aula, além de nos apresentarmos e apresentar minha gata chamada Figma, conhecemos a ferramenta Figma, uma poderosa ferramenta para design de interfaces e prototipagem. Comparamos com concorrentes como Sketch e Adobe XD, e até fizemos uma brincadeira com o Photoshop. Vimos que é a ferramenta mais usada no mundo, preferida pelas empresas globalmente. Discutimos sobre quem utiliza a ferramenta e quem pode se beneficiar dela.

Nesta aula, diferente da anterior, vamos abrir a ferramenta. Já estou com o Figma aberto na minha conta pessoal, com vários arquivos, incluindo arquivos da Alura. Vamos criar uma landing page juntos. Já tenho um projeto aberto, e o processo será bem direto. A página não é muito longa, mas cobre muita informação e resultados.

Processo de criação

Quando estamos aprendendo a usar uma nova ferramenta, é interessante recriar algo que já conhecemos dentro da ferramenta, para entender os recursos utilizados na criação de uma interface. Vou criar um novo arquivo na minha conta, chamá-lo de Projeto Landing Page, e começar a trabalhar nele.

Primeiro, vou usar o atalho Shift+R para habilitar as regras no Figma, que ajudam a alinhar e posicionar elementos. Vou marcar a primeira "dobra" da minha landing page, que é tudo o que vemos ao acessar um site sem rolar a página. Isso ajuda a entender quais elementos são relevantes e devem estar na parte superior.

Adicionando elementos

Vou adicionar um bloco de texto com a frase "Controle todas as suas finanças com praticidade", usando a fonte Inter, padrão do Figma. Em seguida, adicionarei outro texto: "Cadastre-se e baixe nosso aplicativo. Deixe para trás uma vida de complicações financeiras."

Agora, criaremos um botão "Criar uma conta". Vou ajustar o tamanho do botão ao texto e criar um retângulo para o fundo do botão, usando a ferramenta conta-gotas para pegar a cor desejada. O texto será branco, e ajustarei o raio das bordas para deixá-lo mais arredondado.

Adicionando logotipos e ícones

Para adicionar logotipos, como o do Nubank, podemos usar o recurso de inspecionar elemento no navegador para copiar o código SVG do logotipo e colá-lo no Figma. Isso garante que o logotipo mantenha sua qualidade, independentemente do tamanho.

Criando seções e blocos

Vamos criar uma seção com o título "Mais economia, menos preocupação". Usaremos um texto maior para o título e um texto menor para a descrição. A seguir, criaremos blocos com ícones e textos explicativos, duplicando elementos para facilitar o processo.

Finalizando a interface

Para finalizar, adicionaremos um bloco azul com um botão "Criar uma conta", que já temos pronto. Vamos ajustar espaçamentos, sombras e alinhamentos para garantir que a interface esteja visualmente agradável e funcional.

Com isso, concluímos a construção da nossa landing page no Figma. Na próxima aula, faremos melhorias e ajustes finais.

Criando uma conta

Vamos criar uma conta. A linha está agradável, com 72 a 80 pixels, perfeito e centralizado. O passo a passo para o sucesso é curto e simples. Tomamos nosso bloco e podemos começar a inserir as informações. É muito parecido, há muito copy & paste (copiar e colar) aqui também. Vamos pegar novamente esses dois blocos. Eles estão a 64 pixels de distância, então os trazemos para cá. É um bloco muito parecido com este. Poderíamos duplicar tudo isso, mas já criamos esta seção, então é mais fácil apenas mudar a cor aqui. A linha volta, 64 pixels, o mesmo aqui, os dois alinhados na parte superior. O passo a passo para o sucesso é curto e simples. Vamos aumentar um pouco a largura. Moveremos o texto para reescrevê-lo. Siga nossa guia fácil e descomplicada para transformar sua vida financeira em apenas alguns cliques.

Voltamos aqui, lembrando, 16 pixels? Sim, 16. Perfeito. Agora precisamos criar esses três blocos aqui. Vamos colocar um frame (quadro), cor branca, e reduzir a opacidade. Desta vez, faremos este modelo aqui, reduzindo para cerca de 24 pixels. O tamanho do número parece maior? Vamos colocar 48 para não ficar absurdamente grande. Mude para 01, aqui, perfeito. Está dentro do frame? Ainda não. Vamos colocar o texto lá. Agora entrou. Temos um título e um subtítulo. Um pouco maior, e "abra sua conta aqui", acho que uns 18 e 16 pixels. Este 18 em negrito e este em 16, em regular. Abra sua conta. E "sua conta", não "sua conta". Este sobe um pouco. Vamos colocá-lo aqui para poder reescrever também. Crie uma conta totalmente grátis ou, se preferir, escolha um de nossos planos premium (premium). Aumente só um pouco. Leve para cá. Maravilha. Se deixarmos assim, fica bom? Sim, fica bom. Aqui colocaremos uns 8 pixels, pode ser. Sabemos que está mais separado do número. Então deixamos assim. Acho que está bom. É questão de centralizar tudo. Este não tem sombra, mas está arredondado. Então vamos arredondar agora. 32, porque este também está arredondado. Então 40 pixels de arredondamento. Colocamos aqui, duplicamos aqui e duplicamos ali. Perfeito. Tem uma largura um pouco maior, mas deixaremos assim e depois ajustamos. Mudaremos para 02 e 03, e mais tarde mudamos o texto.

Criando o rodapé

Agora fazemos o footer (rodapé). Duplicar o logo novamente. Aumentar um pouco aqui. Duplicar, deixar nessa distância. Veja que nem mudamos, porque é um projeto de exemplo. Então está bem. Soluções, 18 pixels. Acho que seguiremos a mesma propriedade daqui, 18 pixels no título e 16 pixels nos links abaixo. Aqui mais separado, uns 16 pixels pode ser. Perfeito. Soluções, colocaremos assim, link. Texto do link, para fazê-lo um pouco maior. E duplicamos bastante, em 8 pixels. Duplicar, duplicar, duplicar, 1, 2, 3, 4, 5. Perfeito. Agruparemos, duplicaremos tudo isso duas vezes. Estão bastante separados, então boa distância. Do outro lado temos "siga-nos". Pegamos este texto de "Soluções", "siga-nos". Colocamos aqui, todos ficam alinhados na parte superior. Este ficará alinhado por aqui, no canto. E tem os ícones de redes sociais que já estão aqui também. Mateus, pegamos esses ícones de redes sociais da mesma forma que os outros? Claro, mas sabe o que podemos fazer também? Voltar à parte inicial do Figma. Ir para Explore Community, explorar a comunidade. E podemos buscar, por exemplo, Social Media. Esperar carregar, e veja. "Social Media Icons and Logos". Foi este que pegamos. Podemos clicar para abrir no Figma, ele perguntará qual projeto. Escolhemos Alura. Vamos para recentes e lá está o arquivo. Esperar carregar. E aqui estão todos os logos de várias redes sociais, tanto em modo claro quanto escuro, o que é ótimo. Só fizemos Ctrl+C e Ctrl+V no projeto. Então estão aqui, todos bonitos. Vamos pegá-los e arrastá-los para baixo. Cuidado que não estão no canto. Assim, estão aqui. Desta forma. Selecionar tudo e subir um pouco. Veremos se podemos deixá-los na mesma altura que a imagem. Mais ou menos assim. Pronto! Maravilha! Aí está. O projeto, digamos, em seu núcleo, está pronto. Mas podemos começar a melhorar alguns aspectos que facilitam a gestão, a coordenação e a modificação aqui.

Trabalhando com estilos e variáveis

Se precisássemos, por exemplo, mudar a cor de todo o projeto. Já não é azul, agora é outra cor. Ah, esquecemos o botão aqui! Duplicamos. Fazemos isso. Trazemos o botão para cá. O texto se mantém. Criar uma conta. Isso é. Criar uma conta. Mudamos para branco. Selecionamos o texto e mudamos para azul. Simplesmente invertemos suas cores. Genial! Agora sim. Mas como dissemos, se tivéssemos que mudar a cor de todo o projeto, o que faríamos? Selecionaríamos o botão, mudaríamos para, não sei, laranja ou vermelho, não sei que cor seria. Mudaríamos aqui também. E depois mudaríamos aqui. Muito trabalho! Existe uma forma no Figma para mudar toda a cor do projeto de uma maneira muito mais prática, inclusive todos os outros estilos. Que é registrando-os dentro do nosso Figma. Então veja. Estamos usando vários estilos de texto com o mesmo tamanho, que é esse 40 pixels em negrito, com a fonte Inter, com outras propriedades de texto já selecionadas. Poderíamos deixar todas registradas de uma vez, usando estilos e variáveis. Veja. Comecemos pelos estilos, que é super simples. Podemos criar estilos de texto, estilo de cor, estilos de efeitos e estilos de grid (grade). Criemos um estilo de texto. Text. Podemos dar... Ah! Fechamos sem querer. Vamos de novo. Estilos de texto. Ele abrirá esta janelinha. Podemos colocar um nome. Chamaremos, por exemplo, título 2. Podemos colocar uma descrição, dizer para que serve. Opcional. Vamos colocar... Achamos que estamos usando 40 pixels neles. 40 pixels. Bold (negrito). Podemos colocar uma altura de linha aqui. E veja, trabalha com vários tipos de tamanhos. Um é porcentagem. Poderíamos colocar em pixels também, por exemplo, 40px. Muda para 40. Mas o Figma trabalha muito bem com porcentagens. Colocaremos uns 120%. E criar estilo. E ele registrou ao nosso lado. Como aplicamos? Selecionaremos um título. Vamos a esses elementos. O Figma nos mostra alguns estilos de bibliotecas grandes, como o do Google. Desabilitaremos isso. Está o do Google, o Simple Design System que o Figma traz por padrão. Quando criamos um arquivo novo, isso vem por padrão. Agora só está nosso título 2. Selecionamos. Não mudou nada? Mateus, não mudou nada? Mudou. Mudou. Já vemos que na tipografia aparece nosso título 2. Visualmente não mudou. Por quê? Porque colocamos as mesmas propriedades que já estávamos usando. Mas se tentarmos mudar neste subtítulo, mudou. Tomou essa nova propriedade. E o bom é que antes podíamos tocar o tamanho, a altura de linha, o espaçamento entre caracteres, a fonte, de forma livre. Quando colocamos um estilo, desabilita essas mudanças livres e fica fixo nesse estilo que colocamos. Podemos selecionar este, selecionar o de baixo, ir a esses quatro pontinhos para aplicar um estilo de texto. E bem, aplicamos. E podemos fazer o mesmo com os outros. E há uma forma ainda mais prática. Porque quando vamos a Text Styles, em Local Styles, clicamos para criar um estilo de texto, temos que colocar cada um manualmente. Mas se já temos um texto com as propriedades, podemos até modificar aqui, por exemplo, para 150% nossa altura de linha, vamos ao botãozinho que usamos para aplicar estilos, clicamos em Mais e nem mostra opções. Por quê? Está tomando as definições do texto que selecionamos. Chamaremos, por exemplo, subtítulo. Pode ser. Criamos estilo e já o adicionou, já o vinculou. Selecionamos nossos outros subtítulos, este também, podemos selecionar este também, aplicou. Este se reduziu um pouco. Podemos, por exemplo, desvincular? Podemos. Podemos colocar outro tamanho? Podemos. Podemos criar outro estilo? Por exemplo, como podemos chamar isso? Se aos outros chamamos de subtítulo, renomeamos. Este será subseção. Este sim será subtítulo. Ah! Subtítulo. Sabemos escrever, está difícil. E este será o título. Título 1. E aqui podemos reorganizar, deixar bonito assim. Tudo perfeito. E aqui já nos mostra algumas opções. Podemos até mudar aqui também para, achamos que é 120% o que estamos usando, perfeito. E isso é muito bom. E o que dissemos, se precisássemos mudar a cor do texto, mudaríamos em cada lugar? Não, mudaríamos apenas nesses lugares que registramos. E com a tipografia, é o mesmo. Título 2, veja. Se tivermos que mudar o tamanho do texto, note que muda em todos ao mesmo tempo. Isso é o que facilita. Tudo muda de uma vez. Até ficou bem com fonte serifada. Mas não a deixaremos assim. Deixamos como estava antes. Perfeito. Para registrar estilos de texto, é assim. Se quisermos registrar estilos de sombra, mesmo enfoque, veja. Chamaremos de sombra. Selecionaremos todos os elementos que usam sombra, que achamos que são apenas estes. Vamos e aplicamos a sombra. Quando vamos aplicar estilo, não mostrará estilo de texto, não mostrará estilo de cor, não mostrará estilo de grid. Se formos a efeitos e clicarmos para aplicar, só mostrará estilos de efeito. Neste caso, só a sombra que registramos. O que mais? Podemos registrar estilos de cor também. Mas a recomendação do Figma é registrar nossos estilos de cor como variáveis. Então podemos criar uma nova variável, criar uma variável de cor. Podemos pegar este hexadecimal, selecionar esta corzinha. Perfeito. E podemos chamar, por exemplo, cor primária ou só primária. Cor primária. Mais fácil identificar. Cor primária. Perfeito. Como mudamos agora? Em cada lugar que estivermos usando, selecionamos, selecionamos aqui, aqui, aqui, e vamos e aplicamos cor primária. Essa é uma forma e não está mal, mas estamos aqui para facilitar seu processo, aprender a usar Figma. Selecionaremos a landing page. Deixe-nos lembrar. A cor aqui é 4747D7. Selecionamos nossa landing page. E veja. Quando selecionamos, nos mostra todas as cores que estamos usando. Preto, branco, nosso... É roxo ou azul? É azul. O azul, um cinza claro que achamos que é do fundo, o branco com opacidade, há verde e outras cores. Se selecionarmos aqui, podemos mudar a cor do nosso site inteiro de uma forma muito prática. Bem? Aqui também temos o botão de aplicar estilo. Então clicamos e selecionamos nossa variável, e já a aplicou em tudo. Se formos e mudarmos a cor, mudou em todos ao mesmo tempo. Adoramos esse efeito de ir mudando cores. Achamos tão bonitos. Mas voltemos ao azul. Podemos criar um novo? Sim. Podemos criar um branco. Deixamos nesta cor. E em todos os lugares que são brancos na nossa interface, aplicamos branco. Perfeito! E podemos trabalhar com algumas cores mais para melhorar a harmonia neste produto. Por exemplo, em todos os textos aqui, estamos usando um preto puro, o 000. E não é o mais recomendável, porque contrasta muito com cores claras, pode causar um pouco de desconforto visual. Então podemos usar um cinza escuro. É o mais recomendado. Podemos vir às nossas cores. Podemos, por exemplo, adicionar uma cor. Chamaremos, por exemplo, cor titular. Colocaremos um cinza puxando para azul mais escuro. Cor titular. Cor titular. E depois faremos... Vejamos. Cor de corpo. O que queremos dizer com cor de corpo? O "body text", o texto do parágrafo, isso é. Será também puxando para azul, mas mais fraco, talvez assim, mais para o cinza. Assim. Achamos que fica bem. Selecionamos todos os títulos, selecionamos este que está em branco e colocamos nossa cor de corpo. Perfeito! Visualmente parece que não mudou muito, mas clareou um pouquinho. Isso ajuda bastante. Pegaremos todos os outros. Inclusive estes pegaremos também. Genial! Agora, todos os demais. Vamos. Pegamos este. Este também. Há alguns mais. Ali os do link. Vejamos como ficou. Para nós ficou genial. Gostamos. Gostamos muito do resultado. Inclusive as setinhas aqui. Cor de corpo? Colocamos cor de corpo. Perfeito! Vamos. Os textos dos links colocaremos em cor titular e os links, de fato, em cor de corpo. "Cor de corpo", que nome feio. Mas é o que temos por agora. Sinta-se à vontade para colocar nomes diferentes. Não se prenda aos nomes que usamos aqui. E nesta jogada, com as variáveis, já facilitamos muitas coisas. Já colocamos variáveis em boa parte da informação. Falta um preto. Não conseguimos encontrar onde está esse preto, esse 000 na nossa interface. Como o localizamos? Vê essa bolinha? Se deixarmos o cursor em cima, nos diz que ainda há 12 lugares usando essa cor. Clicamos neles. E aqui nos localizou. Um é o ícone do Next, que não vamos tocar. Outros são esta descrição, todos esses pequenos textos e o ícone do X, que também sabemos que é preto. Então desconsideramos o X e o Next. Pegaremos este. Este é cor de corpo. Este colocaremos cor titular. E este, cor de corpo. Fonética está bem. Cor de corpo. Bem. Achamos que agora sim ficou tudo. Não, ainda há algum. Ah, aí está. O do Next e o da outra coisa. Esse não vamos tocar. Bem? Podemos ver todas as outras cores. E aqui podemos personalizar. O verdinho do Next, que sabemos qual é. O roxo do Nubank. Podemos pegar, por exemplo, criar um novo e chamá-lo de background. E será exatamente a cor de fundo do nosso site. Agora pegaremos o que achamos que é este. Background. Mudou outro mais. E vamos personalizando e aplicando tudo em elementos, estilos, variáveis registradas. Isso não é obrigatório, mas é extremamente essencial, porque é o ponto que facilitará seu processo mais adiante. E, claro, na dinâmica real, quando estamos construindo um produto digital, ao mesmo tempo que criamos a interface, já estamos criando estilos e variáveis. Fizemos neste modelo passo a passo, coisas pequenas ocorrendo devagar para ir pegando a construção pouco a pouco. Isso é totalmente normal. Além de registrar esses elementos de texto, cor, sombra, etc., também podemos fazer a grid. Queremos colocar uma grid para melhorar o alinhamento do nosso produto. Veja. Onde está a grid dentro da nossa interface? Está nos mostrando todas as cores, todos os preenchimentos. Está o layout grid. Adicionar e vamos para grid de colunas. A grid de colunas é uma forma de posicionar os elementos e organizá-los dentro da interface. A grid mais comum e conhecida é a de 12 colunas, que dividirá nossa página em 12 colunas e facilita o posicionamento. Colocaremos uma margem lateral de uns 120 pixels. E o gutter? O gutter é o espaço que há entre cada coluna. Colocaremos em 24 pixels. Perfeito. E agora o que fazemos? Vamos alinhar as coisas. Veja que há coisas fora da grid. Selecionamos, movemos um pouco para a direita, aqui movemos um pouco para a esquerda. Aqui o mesmo. Aqui também moveremos. O mesmo aqui. Movemos justo, bonito. Isso está tudo bem, porque está dentro da grid. Tudo jóia. Mas podemos fazer o seguinte: Uma parte fica aqui. Podemos até aumentar um pouco assim, mas deixemos cada um bem alinhado desta forma, talvez. Ou podemos inclusive colocar todas, aumentar para que tomem, por exemplo, três colunas. Inclusive aumentamos aqui, deixamos no centro. Podemos duplicar para facilitar. Duplicamos uma aqui, outra aqui, e outra aqui. Pronto! Não estão alinhadas, mova mais para cá. Está descentrado, colega. Bem! Não estão dentro da grid, mas estão tomando todos os blocos. Não é grande coisa. Mostramos mais como podemos fazer. Mas deixaremos como estava antes. Não há problema se alguns elementos saem da grid, é totalmente comum. Mas temos outra forma de arrumar. Mostraremos já. Ajusta aqui também. Este tem que vir mais para cá, este mais para dentro. Vemos que os espaçamentos estão um pouco desordenados, mas já organizaremos isso. Está difícil alinhar este. Agora sim. Alinhado? Perfeito! E este também. Venha mais para cá. Suba um pouco. Perfeito! Também podemos guardar a grid como um estilo. Não é necessário. Deixaremos fora. Só guardamos como estilo quando vamos usar em várias páginas, em muitos lugares diferentes. Aqui, como é só esta página, não faz falta. E só estamos usando a grid uma vez, então não há problema. O que faremos para facilitar nossa vida é trabalhar com Auto Layout. Auto Layout é um recurso, um dos mais famosos do Figma, um dos mais importantes. Nos ajudará a organizar e posicionar os elementos e a... Como diríamos? Automatizar, de fato, a interface para que seja muito mais prático para nós. Veja que aqui podemos mover livremente nossos textos, têm uma altura específica, uma distância específica. Podemos selecionar tudo isso, aplicar Auto Layout ou Shift A do teclado e não muda nada. Mas veja que em nossas camadas, se converteram em outro tipo de grupo. Agora podemos reposicionar o alinhamento, modificar a distância, podemos adicionar um espaço tanto horizontal quanto vertical. E podemos inclusive, se selecionarmos esses dois e os colocarmos como Fill Container, ou seja, preencher o espaço do conteúdo, se aumentarmos a largura ou a reduzirmos, o espaço do nosso texto se modificará automaticamente. Então aqui já podemos alinhar tudo na nossa coluna, deixar tudo ordenado. Podemos aplicar outro Auto Layout aqui, aumentar este espaçamento para uns 40 pixels. E aqui podemos dar outro Auto Layout, deixar esses dois centrados bonitos também. Em vez de ter um espaço fixo entre eles, vamos colocar um espaço automatizado. Veja! E assim podemos mover nossos elementos. Podemos colocar um Fill Container aqui. Que bom! Quando movemos, eles se esticam, o texto se ajusta na linha e isso facilita muito nosso processo. Se alguma vez precisássemos reduzir ou aumentar por tamanho de dispositivo, se precisássemos mudar a largura e reduzir nossa landing page, tudo isso seria muito mais prático para nós. Colocamos em Auto, mas colocaremos uns 80 pixels de separação e sempre manterá esse respiro. Inclusive podemos colocar Auto Layout aqui também. Vamos ocultar isso. Podemos ocultar nossa grid com esse olhinho ou com Ctrl Shift 4 do teclado. Podemos colocar um Auto Layout no nosso... neste prototipinho, chamemos de app. Podemos colocá-lo manualmente ou pedir ao Figma que tente usar sua inteligência artificial para aplicar o Auto Layout por nós, com os atalhos Ctrl Shift Alt A. Vamos precisar de muitas mãos. Muitas mãos para isso, porque é um atalho difícil. Mas aplicou o Auto Layout por nós. Podemos fazer o seguinte, deixaremos nossa grid outra vez. Queremos colocar espaços iguais em todos os lados. 40 pixels em cada lado. Perfeito. Pronto! Está em Fill Container para preencher todo o espaço de conteúdo. Isso significa que se aumentarmos, o texto se expandirá também. Mas deveríamos ter deixado nossa flecha no outro canto. Podemos fazer isso: Ctrl Shift A aqui também. Aqui tem que aumentar para lá. Deixou um espaço de 122 pixels. Agora sim na outra, também 16 pixels. Então, perfeito. Agora veja que bom, com a grid, bonito. E aqui já melhoramos muito a posição, a interface do nosso protótipo. Faremos o mesmo com os elementos de baixo. Veja. Deixe-nos tirar a grid. Tiramos a régua sem querer. A régua é Shift R. Ctrl Shift A. Funcionará? Sim. Até funcionou bem, mas aqui colocou dentro de outro layout e aumentou toda a largura. Queremos que fique menor neste aspecto. Pode ser? E o texto gostávamos de ter "menos preocupação" só embaixo. Ah! Pronto! Neste formato, veja que tudo está em grupo. Colocamos tudo em grupo. Um grupo maior, cada um desses elementinhos é um grupo. Poderíamos convertê-los em frame, ficaria muito melhor, mas podemos deixá-los em grupo, não há problema. Ativamos nossa grid. Perfeito. Aqui já está alinhado. Se reduzirmos ou aumentarmos, não está acontecendo o que gostaríamos que acontecesse, que é o quê? Veja. Podemos selecionar cada um desses três e dar-lhes Fill Container. Cada um tem esse espaço de 41 pixels, que foi o que colocamos antes, o que mostramos com Ctrl+D. Reduziremos para 40 pixels. Aqui também está com Fill Container. Agora, se movermos, irá reposicionando. Faz uma quebra nos nossos textos. Porque provavelmente não têm Auto Layout. Não têm. Se fizermos isso, Shift A nesses, já virão com Fill Container. Cada um dos outros também. Shift A para adicionar Auto Layout. Agora sim, veja que se quebram bonito. Nossos ícones são o problema. Se os mudarmos para Frame, vamos testar. Mude para Frame. Pronto. Mude este e este para Frame. Tire a grid. Maravilha! Pegaremos o hexadecimal, eliminaremos o retângulo de cada um desses, esse fundo. Agora selecionaremos o Frame dos ícones, adicionamos o preenchimento e adicionamos a cor. O mesmo para cada um desses dois. Adicionamos preenchimento. Agora só falta colocar o arredondamento, achamos que são uns 16 pixels. Perfeito! Agora podemos testar outra vez. Ainda se reduz. Temos que investigar por que acontece. Vejamos. Está se quebrando aqui. Podemos ajustar para 56 pixels. Podemos tirar esse grupo grande, transformá-lo em ou não tirar o grupo grande. Podemos só transformá-lo em Auto Layout e de grupo se converte em um Frame com Auto Layout com 24 pixels de distância como estava, com Fill Container que podemos colocar aqui. Podemos simplesmente duplicar, apagar esses dois e agora sim que Auto Layoutamos tudo, podemos modificar, podemos aumentar e tudo está no seu lugar. Veja, Auto Layout está aqui só para facilitar. Aqui embaixo, Auto Layout, selecionamos isso de novo. Auto Layout outra vez. O que fizemos aqui? Achamos que Auto Layoutamos demais. Selecionamos algumas coisas incorretas. Seleciona tudo outra vez, CTRL SHIFT A, Auto Layout para nós. Está colocando Auto Layout só dentro deste texto? Por que faz isso? Deixe-nos selecionar tudo para ver. Ah, é porque não estão juntos. Saímos, fazemos o mesmo processo de antes. Se a informação não está junta, a tiramos da Landing Page, fora do Frame e a colocamos de volta. Agora sim. O resultado inesperado foi que estava fora. Estava em outro lugar. Ajusta aqui. Esses dois textos ficam juntos com 16 pixels de separação e tudo o mais já está bonito e os textos aumentando. Podemos colocar Auto Layout em cada um desses blocos? Sim, mas queremos acelerar porque já levamos mais de uma hora de aula. E já vimos o quão simples é o processo. Aqui também, vamos. Ctrl Shift A, vejamos o que faz. Fez o mesmo que acima. Esticou todo o texto, mas o processo já conhecemos. Só reduz aqui desta forma e embaixo segue a mesma jogada, mas faremos uma coisa diferente aqui. Voltamos o Layout a apenas um. Todos esses textos já estão com nosso Fill Container, então só aumentaremos um pouco a largura. Ctrl+C. Selecionaremos esses dois e usaremos o atalho Ctrl Shift R. O que é isso? O Figma substituirá esses dois pelo elemento que está no nosso Ctrl+C. Veja. Que bom. Substituiu tudo automático. Podemos selecionar esses dois. Shift A. Não ficou com Fill Container? Colocamos. Pronto. Agora estão se ajustando sozinhos. Colocaremos um espaço de 24 pixels entre cada um. Nossos ícones entrarão em Auto Layout também para se alinharem horizontalmente. Agrupamos outra vez "siga-nos". Selecionamos todos. Auto Layout. Colocaremos um espaço de 80 pixels entre cada um. Podemos reposicionar? Não. Este está priorizando Fill Container para preencher todo o conteúdo e algo é que Auto Layout, quando encontra elementos repetidos mais de uma vez na fila, tem a opção de duplicar. Duplica por nós. Isso é muito bom. Agora sim podemos ajustar a largura. Tudo se move perfeitamente. Subimos um pouco. Posiciona bonito. E maravilha. Agora é questão de ajustar os espaçamentos, mas ainda não finalizamos o projeto. Falta uma coisa mais que temos que mostrar para melhorar o protótipo, nossa apresentação: os componentes e alguns recursos de interação que o Figma tem. Mas isso ficará para a próxima aula da Masterclass. Esperamos vê-lo lá então. Obrigado!

Finalizando a Landing Page - Toques finais na interface

Resumindo a aula anterior e ajustando o projeto

Na última aula da nossa masterclass, faremos um breve resumo do que vimos anteriormente. Iniciamos nosso projeto, focando principalmente na parte de estilo, variáveis e como registramos isso no Figma para facilitar o processo de reutilização de recursos e elementos que usamos com frequência. Muitas vezes, é uma questão de "Ctrl+C" e "Ctrl+V" ao criar a interface no Figma, pois muitas interfaces são semelhantes, como no caso das métricas, valores, botões e quadros com números. Portanto, há muito material reutilizável.

Ainda temos alguns recursos que queremos comentar nesta última aula. Antes de tudo, queremos ajustar o projeto para deixá-lo o mais parecido possível com o modelo do screenshot. Deixar 100% igual é difícil, pois não estamos vendo os estilos, mas queremos aproximá-lo ao máximo. Algo que nos incomoda são as diferenças de espaçamento entre blocos e seções. Por exemplo, entre a seção "mais economia, menos preocupação" e a próxima seção, há um espaço de 125 pixels, enquanto entre "as pessoas confiam em nosso método de organização financeira" e a seção abaixo, o espaço é de 96 pixels. Isso não está harmônico, parece aleatório e desordenado. Queremos corrigir isso e ajustar alguns auto layouts, substituindo textos onde não fizemos no vídeo anterior.

Organizando e ajustando o layout

Vamos organizar um pouco. Sabemos que tudo está em frames, então podemos criar um auto layout para dois textos. Vamos criar um novo auto layout para todo o bloco. Entre os dois textos, há um espaço de 8 pixels, que podemos reduzir para 4, mas parece apertado, então deixaremos 8. Podemos criar um novo estilo de parágrafo com 150% e aplicar. Para o texto de 18 pixels, chamaremos de título 3. Os nomes ficam a critério de cada um. Aplicamos o estilo e movemos os outros também.

A questão de ajustar o auto layout já foi feita, e temos nosso frame com o texto. Podemos renomear para text e 01. É uma questão de replicar para os outros. Gostamos de copiar e colar o texto, substituindo o conteúdo sem recriar o bloco ou refazer os auto layouts. Isso mantém a consistência.

Ajustando espaçamentos e explorando componentes

Se a linha se cortar, podemos resolver adicionando um "Enter" para igualar o número de linhas ou alinhando-os no topo. O espaço entre cada um é de 133 pixels, mas no screenshot parece menor, talvez 24 pixels. Podemos ajustar o frame container para preencher o espaço, aproximando-o do que está na imagem. Ajustamos o espaço para 64 pixels, melhorando a organização.

Vamos ajustar os espaços. A linha que vimos no início do projeto divide a parte superior, o primeiro fold. Queremos que o usuário veja isso ao acessar a landing page. Podemos deixar a seção "mais economia, menos preocupação" próxima à linha, para que, ao fazer o primeiro scroll, o usuário veja a seção e a barra abaixo, criando a sensação de mais conteúdo. Isso o incentivará a explorar mais.

Criando e utilizando componentes

Incluímos tudo em ordem. Não temos auto layout para modificar, mas podemos adicionar para definir propriedades corretamente. Podemos aplicar estilos de parágrafo e título 3, ajustando o espaçamento para 24 pixels. Podemos melhorar o espaçamento reduzindo o conteúdo com a função de reescrita do Figma, tornando o texto mais curto e sucinto.

Para o footer, ajustamos o espaçamento horizontal para 80 pixels, mantendo a consistência. Verificamos os frames e ajustamos o espaçamento para 8 pixels. Criamos um grupo para os links, renomeando para links, e aumentamos o espaçamento para 24 pixels. Usamos o atalho Ctrl Shift R para substituir. Ajustamos o layout para centralizar e manter o alinhamento.

Explorando propriedades de texto e variantes

O próximo passo é trabalhar com componentes, que são formas de reutilizar elementos existentes em outro modelo de interface. Componentes são conjuntos de elementos, como botões, que são usados várias vezes na interface. Criar um componente é simples: selecionamos um elemento e clicamos no ícone de losango na barra de design. O atalho no Windows é Ctrl Alt K. Em Mac, pode ser Command Option K.

Componentes têm bordas roxas, indicando que são diferentes de elementos normais, que têm bordas azuis. O componente principal, ou main component, é separado e organizado, enquanto os componentes reutilizáveis são usados na prática. Alterações no componente principal afetam todos os filhos, mas alterações nos filhos não afetam o principal.

Melhorando a transcrição

Uma coisa que podemos fazer com este componente é criar uma propriedade para texto. Entendemos que, tratando-se de um botão, "criar uma conta" não será o único texto utilizado nele. Na verdade, deveríamos colocar, neste caso, um texto por padrão, um texto genérico. Note que mudou aqui embaixo também, e para cada lugar que o utilizarmos, podemos escrever esse novo texto. Podemos clicar várias vezes até selecionar o texto e mudar para "criar uma conta", mas há uma maneira mais fácil: criar uma propriedade de texto no nosso componente. Selecionamos a caixa de texto, vamos ao painel de design, e veremos uma barra com o nome do nosso texto. Clicamos no botão ao lado para aplicar uma propriedade, adicionamos, e já nos vincula a uma propriedade de texto. Podemos dar um nome, chamá-lo de "texto do botão", e já tem o valor que estava selecionado, que é "button". Criamos a propriedade, e agora, quando formos ao componente, temos esse espaço para atualizar nosso texto. Podemos simplesmente escrever ali, clicando no botão, sem precisar clicar várias vezes e desgastar o clique esquerdo do mouse. Fazemos apenas uma vez e mudamos aqui, o que é muito mais prático para nós.

Criando variantes e ajustando interações

Vamos fazer o seguinte: daremos um "Ctrl+C", atualizamos também, e se algo parecer errado, como um fundo branco em um botão porque o fundo da seção é azul, podemos corrigir. Primeiro, deveríamos ter colocado de volta nosso "color primário". Desvincular um botão ou componente nunca é a melhor opção, pois se mudarmos uma estrutura visual que seja diferente do principal, a menos que seja algo configurável como o texto, haverá problemas. O que poderíamos fazer é criar um novo botão ou componente. Poderíamos, por exemplo, escrever "button", transformá-lo em componente, e colocar um fundo branco e azul. No entanto, há uma forma mais prática: criar uma variante, ou seja, um componente com estilos diferentes. Selecionamos o componente principal, clicamos no botão, adicionamos uma variante, e criamos uma segunda vista no botão. Temos uma nova propriedade, que chamaremos de "modo de cor". A primeira será a principal, e a segunda, chamaremos de "branca". Mudamos para cor branca e azul, e agora, quando usarmos este botão, além do texto, teremos um modo de cor que podemos mudar para "branca". Ainda temos a propriedade de texto do botão, que podemos editar, preservando e mudando os estilos.

Criando componentes e organizando o projeto

Podemos criar componentes em mais lugares. Vamos criar um componente desta área, colocá-la dentro de um frame branco para visualizá-la, e sabemos que o texto sempre é variável. Chamaremos de "título" e "descrição", transformando em componente. Criamos a propriedade de texto, chamamos a primeira de "título" e a segunda de "descrição". Quando usarmos, já temos nossos dois campos, e podemos substituir aqui mesmo. Incluímos no meio, mas notamos que os ícones são diferentes. Precisamos mudar esses ícones, mas não temos uma propriedade; teríamos que criar várias variantes para cada ícone diferente. Isso é uma possibilidade, mas faremos de outra maneira. Vamos selecionar todos os ícones, deixá-los em um canto, e transformá-los em componentes. Em vez de clicar para criar componente, o que os transformaria em um único componente, clicamos na flechinha e temos três opções: criar componente, criar múltiplos componentes ou criar um component set. O component set transforma todos em um componente com três variantes, enquanto criar múltiplos componentes transforma cada um em componentes separados. Agora que são componentes separados, renomeamos: "nota", "porquinho" e "documento". Deixamos em um canto, selecionamos o ícone, substituímos pelo ícone componentizado, e fazemos algo interessante: permitimos que este componente seja substituível na interface. Quando a pessoa interagir com nosso componente, poderá substituir o ícone. Selecionamos o elemento, aplicamos a propriedade, e podemos definir valores preferidos, mas não incluiremos outros ícones. Chamamos de "ícone", e agora podemos substituir. Adicionamos onde está, e substituímos o ícone por "porquinho". Duplicamos, substituímos o texto, e agora só mudamos o ícone para "documento". Criamos outro elemento componentizado dentro do projeto. Podemos fazer o mesmo com outros elementos, mas não continuaremos aqui, pois o processo é sempre o mesmo. Em alguns casos, seriam apenas propriedades de texto.

Apresentando o projeto e interações no Figma

Para dar um aspecto mais interessante ao projeto, organizamos bem nossos componentes. Criamos uma separação no Figma, e se criarmos uma página cujo nome seja apenas um espaço ou três traços, criamos um divisor. Criamos uma nova página chamada "componentes", arrastamos para baixo do divisor, colamos nossos componentes e os deixamos separados. Podemos colocá-los dentro de uma seção, que é como uma área que engloba frames, componentes e grupos. Mudamos o fundo para cinza claro, tiramos a borda e arredondamos as esquinas. Organizamos bonito, deixamos separado, e voltamos à página 1, renomeando para "protótipo". Podemos colocar em uma nova página de referências, e algo interessante é que o Figma permite apresentar o projeto a outras pessoas, como ao cliente, para que antes de ser desenvolvido, a pessoa já tenha uma ideia de como está o resultado. Podemos fazer uma apresentação clicando no botão de play no canto superior direito, e uma nova aba se abrirá na ferramenta. Carrega um pouco, e há uma razão para usarmos o mockup de MacBook de 14 polegadas. O Figma tem alguns mockups onde podemos colocar predefinições de dispositivos que a ferramenta já traz. Na aba prototype, temos uma série de dispositivos com os quais podemos trabalhar. Podemos mudar de MacBook de 14 polegadas para 16, mas fica mais curto, pois fizemos na resolução de 14. Podemos mudar a cor, mas isso é secundário. Deixamos em silver, e foi por esse fator que decidimos usar o MacBook de 14 polegadas, para ter essa imersão e ver como fica no dispositivo de verdade. Podemos fazer scroll para baixo e ver como está nosso site, e ver até mesmo como fica nosso primeiro fold de verdade, vendo em um computador real. Quando a pessoa chegar, verá isso, já pode clicar em "criar uma conta", pode descer e ver mais informações. Tudo isso fica muito bacana e poderíamos dar mais cara ao projeto adicionando um pouco de interação, micro interação.

Criando interações e finalizando a masterclass

Quando passamos o cursor sobre elementos, por exemplo, nos estilos, vemos que ao passar o cursor, ele fica com um fundo cinza mais claro, indicando que é um elemento interativo, que tem clique, que podemos fazer alguma ação com ele. Com os botões é igual: normalmente passamos o cursor e muda de cor, e o Figma permite fazer isso. Vamos aos nossos componentes e podemos criar propriedades novas, variantes novas para fazer essas interações. Primeiro, criaremos uma nova propriedade de variante e a chamaremos de "estado". O estado que já temos é o padrão, e duplicamos essa variante para o lado, mantendo dentro do quadrante do componente. Renomeamos de estado padrão para hover. Hover é o nome que damos ao efeito de passar o cursor sobre os elementos e ocorrer alguma ação, alguma micro interação. Mas aqui está igual, e precisamos que algo diferente aconteça. Neste caso, desvinculamos a cor, deixamos mais escuro, e registramos o hexadecimal em nossas variáveis de cor, chamando de "cor primária 2". Colocamos o hexadecimal, e agora, como criamos essa interação, essa micro interação entre elas? Vamos à aba de protótipo, e no painel temos algumas opções novas: em vez de opções de estilo, temos opções de interação. Passando o cursor sobre o componente, aparece um botão de mais que podemos clicar e arrastar; uma seta nos seguirá e podemos soltá-la na variante ao lado, e aparece uma aba de interação. Temos várias interações: click, drag e a de hover está aqui, na terceira linha. Enquanto estiver fazendo hover, muda para, e atualiza automaticamente para nós; antes estava em on click e Navigate to; quando muda para while hovering, o Figma já passa para change to automaticamente. Então muda para, e já está o componente selecionado: modo de cor principal e o estado hover, e podemos adicionar uma animação, colocamos dissolve e o que vai acontecer é que vai mudando aos poucos, diluindo a cor. Feito. Podemos testar isso no projeto, já se abriu uma nova aba, passamos o cursor e já ocorreu a interação; se descermos, também está ocorrendo. Poderíamos fazer mais ações: por exemplo, aumentar o espaço 20 pixels e ver que aumentou, ficou com um aspecto distinto. O Figma não é uma ferramenta focada em animações complexas, por isso às vezes dá esse aspecto um pouco estranho, mas em geral funciona muito bem. O que ainda não temos é para esse branco aqui; podemos fazer da mesma forma, change to, dissolve, tudo correto. Passamos o cursor, escurece, mas não fica bem, um azul escuro sobre um azul normal, então duplicamos, e esse cinza parece bom, será? Vamos testar. Apenas mudamos a direção porque ao duplicar veio com hover também; tiramos, mudamos a direção da seta para baixo, e testamos. Ficou muito imperceptível. Então faremos o seguinte: criaremos uma nova variável de cor, chamaremos de cinza, e deixaremos de branco para uma tonalidade mais azulada, algo assim, testemos. Tudo é tentativa e erro. Perfeito, agora parece bom. Não sei, faremos mais escuro. Vejamos. Um pouco assim. Agora ficou bom, mais escuro quando passamos por cima, mas esse não é o único modelo de interação com o cursor que podemos ter: também poderíamos fazer uma de pressão, ou seja, quando pressionamos um elemento, que faça uma ação, como dar um clique, ou que possa ser arrastado. Podemos criar uma interação semelhante à do hover, por exemplo, clarear a cor, escurecer, adicionar alguma outra propriedade visual. Duplicamos a primária, chamamos de pressed, porque é o estado comumente chamado de pressed ou active. Arrastamos uma seta para cá, mudamos de on click para while pressing. Já mudou aqui, tudo correto, dissolve. E agora vamos criar uma cor primária 3, de fato, arrastamos isso para cima, cor primária 3. Copiamos o hexadecimal e colamos aqui embaixo para ter referência da cor e fazer mais escuro que o anterior. E substituímos agora cor primária 3, substituído. Parece que é pouco mais escuro, mas na prática aqui vemos ao clicar se nota bastante. Para mim, talvez no vídeo também se note, deixaremos mais escuro ainda. Faremos mais escuro. E adicionaremos uma sombra. Será? Testemos. Adicionamos uma sombra aqui, uma sombra padrão que conhecemos, vejamos. Com sombra não gostamos, feio, tiramos a sombra, mas agora o escurecer ficou muito mais potente, agora sim ficou bacana, genial. Perfeito, está maravilhoso, para nós está mais que genial, faremos o mesmo com o de baixo também, criaremos essa interação padrão branca, aqui não mudamos para hover, mudamos para pressed e só precisamos criar agora um cinza 2, nomes feios mas está mais que perfeito para que possamos reconhecê-lo, duplicamos para baixo, fazemos mais escuro, mudamos para cinza e agora testamos, onde? Aqui, se não adicionarmos a interação não funcionará, while pressing, perfeito, agora sim. Ops, agora ficou incrível, maravilhoso. Já funciona perfeitamente, gostamos muito do resultado, para nós está espetacular. Se tivéssemos outras páginas aqui, no caso de uma landing page sabemos que normalmente uma landing é uma página única, e quando clicamos no botão vamos para outra página. Então se tivéssemos mais páginas aqui, poderíamos fazer uma navegação, por exemplo, de uma página para outra, onde pegamos nosso botão e o arrastamos para outra página e só fará a navegação. Podemos até, não sei, mudar a direção dos elementos aqui, só para testar e ver que mudou, mudou de página. Podemos produzir isso, mas neste caso estamos falando de uma landing page, não é necessário. Poderíamos colocar um link aqui, selecionar nosso botão e colocar um link, não é necessário, estamos falando de um protótipo, é tudo questão de design, de planejamento. E para nós o resultado do nosso protótipo agora está mais que perfeito. O que comentamos também sobre a parte de comentários que as pessoas podem deixar dentro do Figma: geramos um comentário e as pessoas podem criar mais informações a partir desse comentário; nós o resolveremos, e se quisermos compartilhar com outras pessoas, é questão de clicar com o botão direito, copiar link e compartilhar com quem quisermos para que possam usá-lo. O importante é sempre clicar no botão de compartilhar e mudar essa aba de anyone para can view, para que qualquer pessoa possa ver, e aí sim, copiamos o link e enviamos para quem quisermos, e temos nosso protótipo da landing page muito bem produzido.

Esta foi nossa masterclass, para falar mais de UI, para falar um pouco mais de Figma, é um processo que vemos, tem bastante, há muitos recursos; nos focamos em uma landing page, este exercício de recriar uma interface que já existe é um grande exercício, recomendamos fazê-lo com sites, com empresas que gostamos; muitas pessoas fazem com Nubank, é uma prática muito boa, e não façam apenas em desktop: façam em app, façam em móvel também, e distribuam sua criatividade. Esperamos que tenham gostado, e nos vemos por aí. Obrigado!

Sobre o curso Masterclass Figma: do zero à criação de uma Landing Page

O curso Masterclass Figma: do zero à criação de uma Landing Page possui 156 minutos de vídeos, em um total de 4 atividades. Gostou? Conheça nossos outros cursos de UX 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:

• O mercado de UI
• Mergulhando no Figma
• Finalizando a Landing Page