Figma: componentes, auto layout e máscaras

Auto layout - Apresentação

Se você achou que teria apenas um curso de Figma na Alura, você achou errado! Este é o segundo curso da maravilhosa formação de Figma da Alura.

Caso você ainda não me conheça, deixe-me apresentar. Sou Mateus Villain, instrutor da escola de UX & Design e continuarei sendo seu parceiro e professor ao longo desta jornada que você está traçando para aprender a utilizar o Figma, a maior ferramenta de interface de usuário e prototipagem do mundo!

Audiodescrição: Mateus é uma pessoa de pele branca, cabelos, olhos, sobrancelhas e barba castanho-escuros. Seu cabelo é bem curto e sua barba é longa e cobre todo o pescoço. Ele usa óculos de armação redonda dourada e está de blusa de moletom azul estampada. À sua frente, um microfone apoiado em um braço articulado. Ao fundo, uma grade com quadros vintage pendurados e uma estante com enfeites, jogos de videogame, uma máquina de escrever e um console Super Nintendo.

O que vamos aprender?

Neste curso, continuaremos do ponto em que paramos no primeiro curso, em que aprendemos as ferramentas essenciais.

Vamos aprimorar nosso conhecimento na construção do nosso projeto, a Fast Task, que é um projeto de checklist de lista de tarefas, onde podemos colocar nossas tarefas de trabalho, tarefas pessoais, listas de compras, etc.

Vamos continuar desenvolvendo e aprendendo vários recursos muito importantes para aprender a usar o Figma. Podemos, inclusive, dizer que as ferramentas mais importantes estão neste curso.

Já que avançamos muito no curso anterior, agora vamos incrementar nosso projeto, trabalhar com mais agilidade e aprender processos de nível intermediário a avançado.

Vamos conferir mais complexidade ao nosso projeto, trabalhando com recursos e funcionalidades como Auto Layout e componentes, dois dos recursos mais importantes do Figma.

Para quem é este curso?

É importante ressaltar que este curso não é destinado apenas para pessoas designers.

Se você é uma pessoa programadora, Product Owner ou Product Manager, ou trabalha em qualquer outra área que não seja design, mas tem interesse em aprender a usar o Figma e conhecer mais esta ferramenta e seus recursos, você está no lugar certo!

Inclusive, se você tiver dúvidas ao longo do percurso, o fórum e o Discord estão abertos. A equipe da Alura e outras pessoas estudantes poderão te ajudar!

Esperamos encontrar você no próximo vídeo para entendermos de forma mais aprofundada o que vamos estudar neste curso.

Até lá!

Auto layout - Visão geral

Antes de adentrarmos no conteúdo de fato, vamos conferir uma visão geral do que estudaremos ao longo do curso.

Aula 1: Auto Layout

Na primeira aula, logo após este vídeo, vamos começar a estudar sobre Auto Layout que, conforme comentamos, é um dos recursos mais importantes do Figma.

É possível que você já tenha ouvido falar ou até mesmo interagido com ele, mas ainda não sabe muito bem como utilizar.

Então, não se preocupe! Nessa primeira aula, já vamos entrar na prática, sem muita teoria ou conceitualização. Vamos abrir o nosso Figma e começar a praticar!

Existem recursos extras para que você possa colocar na sua conta, começar a entender melhor, praticar e estudar como funciona esse recurso, que facilita muito a automatização de layouts. Assim, você poderá tornar o seu design muito mais fácil, ágil e responsivo!

Aula 2: Componentes

Quando tivermos aplicado o Auto Layout em toda a nossa interface, vamos falar sobre um dos recursos mais importantes do Figma: os componentes.

Vamos aprender, em detalhes, cada aspecto dos componentes. Abordaremos todas as propriedades, falaremos sobre variantes e um pouco sobre documentação. Vamos destrinchar literalmente tudo o que for possível sobre esse recurso do Figma nesta aula.

Aula 3: Bibliotecas e recursos

Ao finalizar todos os nossos componentes e a nossa interface com Auto Layout, a partir da aula 3, vamos começar a melhorar nosso projeto dentro do Figma.

Trabalharemos um pouco mais com bibliotecas compartilháveis e teremos uma breve exploração de design systems.

Também vamos conhecer o Figma Community, uma plataforma de comunidade dentro do Figma para conhecermos outras pessoas, arquivos e recursos extras.

Aula 4: Camadas e vetores

Na quarta aula, vamos falar sobre alguns recursos bem importantes e úteis do Figma e que poucas pessoas abordam, os boolean groups e as máscaras, que outras ferramentas de design como Photoshop, Illustrator e Corel Draw já possuem.

Aula 5: Cocriação e funções extras

Na nossa última aula, vamos finalizar a estrutura melhorada do nosso projeto. Primeiro, vamos estudar um pouco sobre cocriações, como o Figma se comporta para compartilhar o projeto com outras pessoas, sejam designers, sejam pessoas desenvolvedoras.

Também vamos criar novas interfaces para aprimorar o nosso projeto, baseado em todos os conceitos que estudamos ao longo das aulas anteriores.

Fórum e Discord

Ressaltamos que vamos estudar bastante conteúdo e é normal surgirem dúvidas ao longo desse processo. Por isso é que estamos no fórum e no Discord!

Nossos canais estão abertos para responder as suas dúvidas, então não as guarde para si! Faremos todo o possível para te ajudar.

Nos encontramos no próximo vídeo para começar a estudar sobre Auto Layout. Até lá!

Auto layout - Entendendo o Auto layout

Vamos começar a estudar o Auto Layout. Para isso, vamos abrir o Figma e, num arquivo de rascunho, inserir duas formas retangulares. Até agora, nada de extraordinário.

A premissa do Auto Layout é, de fato, o que o nome sugere: automatizar as interfaces com as quais estamos trabalhando. Ele possui vários recursos que auxiliam na agilização da construção e melhora de desempenho de nossos protótipos.

Primeiramente, para ativar o Auto Layout, é necessário selecionar as duas formas e clicar no símbolo de adição (+) ao lado de "Auto Layout" no menu lateral direito da tela. Feito isso, algumas opções surgirão para nós. Vamos distinguir cada uma delas.

Vamos começar pela segunda opção, "Horizontal gap between items", ou seja, o espaço horizontal existente entre os elementos.

Nesse caso, quais são os elementos do nosso Auto Layout? São o Retângulo 1 e o Retângulo 2, conforme indicado na camada - Rectangle 1 e Rectangle 2.

Como atribuímos Auto Layout aos elementos com esse espaçamento, ele já identificou que existem 142 pixels de distância entre os retângulos e marcou isso para nós no input da ferramenta. Podemos mudar esse espaçamento digitando os números e ele fará essa mudança automaticamente para nós, sem precisar mexer com o cursor.

Abaixo, temos dois campos adicionais para controlar o padding do nosso elemento com Auto Layout. O da esquerda serve para controlar o padding horizontal e o da direita o padding vertical, mas também podemos controlar cada um individualmente.

O padding é, basicamente, uma margem colocada em todas as laterais do elemento selecionado.

Então, na horizontal (ou seja, esquerda e direita), estamos com um padding de 59 pixels. Na vertical (ou seja, lado superior e inferior), estamos com um padding de 49 pixels.

Também podemos controlá-los livremente, passando o cursor do mouse em cima do elemento com Auto Layout e clicando na barra de contorno.

A finalidade desses espaçamentos é definir uma margem de respiro entre a base da interface e seus elementos. Se colocarmos um frame totalmente branco atrás, poderemos visualizar melhor a que essa margem se refere.

Acima do campo de espaçamento entre os itens, existem algumas setas. Elas servem para identificar se queremos que a organização dos nossos elementos seja na vertical (um em cima do outro) ou na horizontal (um ao lado do outro, como estava antes).

Essas setas já estavam como padrão anteriormente porque já tínhamos atribuído Auto Layout a esses elementos um ao lado do outro. Existe ainda uma terceira opção: uma seta para baixo. Ela faz com que os elementos façam uma quebra.

Um exemplo prático dessa funcionalidade é quando temos diversos cards de produtos na Amazon, no MercadoLivre, em que temos três em cada linha e várias colunas. É isso que podemos fazer aqui.

Mantendo a versão anterior, onde estávamos com o nosso Auto Layout somente na horizontal, vamos adicionar mais quadrados. Observem que se usarmos o atalho "Ctrl + C, Ctrl + V", ele aumenta a quantidade de quadrados dentro do frame, expandindo-o.

Se selecionarmos a opção Wrap (indicada pela seta curva para baixo) e diminuirmos a largura do frame com Auto Layout, observem que ele começa a quebrar.

Tudo continua dentro de um frame, um grupo só, mas ele começa a quebrar essas informações, seguindo o espaçamento que já tínhamos definido anteriormente. Entretanto, ele nos dá um novo campo para poder controlar não só o espaçamento horizontal, como também o espaçamento vertical.

Isso facilita muito na adaptação e controle dos elementos que temos dentro de nosso produto e que usaremos bastante na nossa interface.

Temos também algumas opções de posicionamento do Auto Layout, que é basicamente utilizando a grade ao lado do Wrap. Temos diferentes opções, como o "Align Top Left" (alinhar ao canto superior esquerdo), o padrão utilizado para a maioria dos elementos que automatizamos com Auto Layout.

Todas as opções combinam o alinhamento vertical ao horizontal: alinhar ao topo à esquerda, centro ou direita; alinhar ao centro à esquerda, centro ou direita; alinhar à parte inferior esquerda, central ou direita. Esses posicionamentos funcionam de acordo com o tamanho do frame e dos próprios elementos.

Ou seja, podemos posicionar os nossos elementos dentro do frame com Auto Layout da melhor forma para a nossa interface.

Há mais um detalhe extremamente importante sobre o Auto Layout: as opções de controle de responsividade. Com elas, determinamos se um elemento é fixo, se ele se ajusta ao conteúdo e automatiza a largura ou altura, ou se ele vai se preencher com o conteúdo.

Um exemplo dessa responsividade pode ser observado num botão. Para isso, vamos inserir um texto "Botão" de 16 pixels no nosso frame. Com ele selecionado, vamos utilizar o atalho de aplicação do Auto Layout: "Shift + A".

Quando fazemos isso para um elemento que não tem espaçamento ou padding, ele sempre aplica o padrão de 8 pixels para todos os aspectos de layout.

Vamos acrescentar cor ao botão, que pode ser um laranja ao fundo, e aumentar o padding para 16 px.

Observem que agora temos um campo "Hug" na aba lateral direita. Clicando nele, poderemos ver: "Hug Contents". Isso basicamente significa que estamos abraçando a caixa laranja ao redor do texto, que é o conteúdo do botão.

Ou seja: ele vai entender que está usando um padding de 16 pixels na horizontal e na vertical, que ele também está usando um espaçamento de 8 pixels, que vai sempre respeitar quando inserirmos um novo elemento aqui dentro. E sempre que inserirmos alguma informação nova dentro dessa caixa, ele vai expandi-la, sempre seguindo essas mesmas propriedades. O mesmo acontece para a altura da caixa.

Agora, se definirmos uma largura fixa ou "Fixed Width", vocês já devem imaginar que, se continuarmos escrevendo, o texto vai bater nessa margem e não vai continuar crescendo, porque a largura agora está fixa. É diferente do Hug, que bloqueia o campo de largura.

Então, se chegarmos no final do campo, o texto quebra, não está mais aumentando o tamanho do meu bloco, mas o Hug Content na altura ainda existe. Portanto, ele continua quebrando para baixo, apenas não continua seguindo para a direita.

Já o "Fill Container", semelhante ao Hug Content, bloqueia o valor da largura e da altura, mas o que ele realiza os mesmos cálculos e percebe que o frame em questão está usando 16 pixels de padding horizontal e vertical e também segue o mesmo espaçamento entre os itens. A regra é que ele tem sempre que preencher o conteúdo, sem nunca deixar um espaço vazio.

Então, se aumentarmos manualmente o tamanho do frame, significa que a largura desse bloco de texto vai se adaptar para preencher o frame.

Se inserirmos novas informações dentro do Auto Layout, como um quadrado, os elementos dentro dele vão se readaptar para preencher esse espaço.

É bem fácil de trabalhar, mas é necessário prática. Por isso, no "Para Saber Mais" após este vídeo, há um link extremamente útil: o Playground do Auto Layout. Nele vocês podem pegar um arquivo do Figma criado pelo instrutor para praticar o uso dos recursos dessa ferramenta.

No próximo vídeo, vamos começar a aplicar esses conhecimentos no nosso projeto. Até lá!

Sobre o curso Figma: componentes, auto layout e máscaras

O curso Figma: componentes, auto layout e máscaras possui 136 minutos de vídeos, em um total de 42 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:

• Auto layout
• Componentes
• Bibliotecas e recursos
• Camadas e vetores
• Cocriação