Praticando Figma: auto layout

Auto layout - Apresentação

Olá! Boas-vinda ao Praticando auto layout!

Meu nome é Matheus Villain, sou Product Designer e instrutor na Escola de UX e Design. Estou aqui para fazer uma revisão sobre auto layout antes de mergulharmos nas atividades e exercícios práticos dessa ferramenta.

Audiodescrição: Matheus se descreve como uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuro. O cabelo é bem curto, enquanto a barba é longa, cobrindo quase todo o pescoço. Ele usa óculos de armação redonda na cor marrom-claro e veste uma camiseta branca. À sua frente, há um microfone sustentado por um braço articulado. Ao fundo, há uma parede com grade, onde vê-se crachás pendurados. À frente da grande, uma estante com livros e uma máquina de escrever, iluminados por tons de azul.

Agora, vamos à revisão para entender melhor essa ferramenta tão essencial do Figma!

O que é o Auto Layout e Como Ativá-lo no Figma

O auto layout é uma funcionalidade que automatiza e simplifica o ajuste de interfaces na ferramenta, seja para a criação de sites, aplicativos ou qualquer outro tipo de interface.

Para começar a utilizá-lo no Figma, você pode selecionar um elemento único ou dois elementos e clicar no botão "Use auto layout" no menu de design, também acionado pelo atalho "Shift + A".

Opções de Largura e Altura no Auto Layout

Ao ativar o auto layout, diversas opções se tornam disponíveis. Ele oferece novas formas de trabalhar com largura e altura. Por exemplo, ao selecionar um elemento sem auto layout, o Figma permite manipular livremente essas dimensões. Porém, com o auto layout ativado, você pode escolher entre três configurações: Fixed, Hug Contents e Fill Container.

Vamos demonstrar cada uma dessas opções. Para isso, utilizaremos um quadrado grande e adicionaremos um bloco de texto dentro dele, nomeando-o como "Textinho" e ajustando a cor para preto para facilitar a visualização. Também aumentaremos o tamanho do texto para 40. Em seguida, selecionaremos ambos os elementos (o quadrado e a caixa de texto dentro dele) e aplicaremos o auto layout.

• Configuração Fixed

Com o auto layout ativado, será criado um frame 1 com largura e altura definidas como Fixed. Isso é indicado pelos números exibidos em branco, correspondentes à largura e altura(campos "W" e "H", respectivamente), que permitem ajustes manuais.Ao clicar nos campos de largura e altura, aparecem as opções Fixed Width e Fixed Height. Quando as dimensões estão fixas, elas permanecem constantes, a menos que sejam ajustadas manualmente.

• Configuração Hug Contents

No entanto, é possível criar uma configuração dinâmica utilizando a opção Hug Contents. Ao definir a largura e a altura como Hug Contents, o tamanho do frame se ajusta automaticamente ao conteúdo interno. Além disso, o número que representa as dimensões fica mais claro do que no modo Fixed.

Ao posicionar o cursor sobre o elemento, o Figma exibe claramente o que é o Content (conteúdo). Traduzindo para o português, Hug Contents significa "abraçar conteúdo". Isso significa que, ao aplicar essa configuração ao frame, ele ajustará automaticamente sua largura e altura para acomodar o conteúdo interno.

Por exemplo, ao modificar o tamanho ou a quantidade do texto, o frame se ajustará dinamicamente para acompanhar essas alterações. A largura do frame 1 será ampliada ou reduzida para acomodar o conteúdo, e o mesmo ocorrerá com a altura, caso o texto se estenda para múltiplas linhas.

Esse comportamento não se restringe apenas a textos. Se inserirmos, por exemplo, um quadrado vermelho dentro do frame 1 configurado com auto layout, o frame também se ajustará. Ele expandirá ou reduzirá sua largura e altura conforme as dimensões do quadrado forem alteradas. Essa funcionalidade se aplica a qualquer elemento inserido no frame.

• Configuração Fill Container

Além do Hug Contents, existe a opção Fill Container, que está disponível apenas para elementos internos de um auto layout. Essa configuração permite que o elemento preencha todo o espaço restante do container.

Vamos demonstrar isso utilizando o quadrado vermelho. Quando configuramos o quadrado para Fill Container, ele preenche automaticamente o espaço restante dentro do frame proporcionalmente. Caso aumentemos a largura do frame, o retângulo se ajustará proporcionalmente. O mesmo comportamento ocorre ao alterar a altura do frame.

Ajustes de Padding e Gap

O Figma também oferece suporte ao uso de Padding, que representa a margem ao redor do conteúdo. É possível ajustar o Padding tanto horizontal quanto verticalmente, controlando o espaço ao redor dos elementos.

À direita do Padding, há um símbolo representando as laterais de um elemento. Ao clicar sobre ele, é possível controlar cada margem individualmente.

No Figma, também é possível controlar o espaço entre os conteúdos de um frame. Por exemplo, ao duplicar o elemento quadrado vermelho, você verá que há um espaço padrão de 8 pixels entre eles. Esse espaço é conhecido como Gap, que define a distância entre os elementos dentro do frame.

Se ajustarmos o valor do Gap, pode criar mais ou menos "respiro" ao redor dos elementos, aumentando a clareza visual ou ajustando o layout de acordo com a necessidade.

Direção dos Elementos no Auto Layout

Além disso, o Figma permite controlar a direção dos elementos no frame utilizando os símbolos de seta:

• Horizontal: Representado por uma seta para a direita, os elementos são posicionados lado a lado, da esquerda para a direita.
• Vertical: Representado por uma seta para baixo, os elementos são dispostos um sobre o outro, de cima para baixo.
• Wrap (Quebra): Representado por uma seta curvada para a esquerda, os elementos são organizados em uma linha horizontal até atingir o limite da largura do frame. Quando não há mais espaço, o próximo elemento é automaticamente movido para uma nova linha.

Explorando o Modo Wrap

Vamos explorar melhor o modo wrap duplicando os elementos para que tenhamos cerca de 5 retângulos. Em seguida, é necessário desativar o Fill Container, pois o wrap não funciona quando essa configuração está ativa. O motivo é simples: o Fill Container preenche todo o espaço disponível, impedindo que os elementos "quebrem" para uma nova linha. Então, vamos definir as dimensões como fixas.

Agora que o wrap está ativado, vale observar um detalhe interessante: ao usar as direções horizontal e vertical, o Figma exibe apenas um campo de Gap. No entanto, ao ativar o wrap, um segundo campo de Gap aparece. Isso ocorre porque o Figma reconhece que agora é possível ajustar tanto o espaço lateral (esquerda e direita) quanto o espaço superior e inferior, já que os elementos podem quebrar de linha.

Se reduzirmos a largura do frame, os elementos começam a quebrar para a linha de baixo. Esse comportamento continua até que os elementos não possam mais ser dispostos em várias linhas, formando, então, uma única coluna.

Alinhamento e Grid no Auto Layout

Perceba também que, ao diminuir o tamanho, os elementos ficam centralizados. Esse alinhamento central é resultado da grid que aparece ao redor. Com ela, é possível posicionar os elementos em diversas partes da tela, como no canto superior direito, superior esquerdo, inferior central, lateral esquerda, no meio, entre outros. Existem várias opções de alinhamento disponíveis!

Por exemplo, ao ajustar o alinhamento para a esquerda, todos os elementos são movidos para esse lado. Isso acontece porque o auto layout fixa a posição dos elementos, bloqueando sua movimentação livre. Diferente do espaço comum do Figma, onde é possível mover os itens livremente, o auto layout mantém os elementos alinhados, evitando que eles se desloquem para qualquer lugar, o que ajuda a garantir um layout mais organizado.

Além disso, se deixarmos apenas um item e aumentarmos o espaço ao redor, podemos observar como funciona o sistema de posicionamento do auto layout, o que oferece diversas possibilidades para explorar alinhamentos e organização de elementos.

Conclusão

Essa foi a nossa revisão sobre auto layout. Se tiver dúvidas, estamos à disposição. Bons exercícios e uma excelente prática. Até mais!

Sobre o curso Praticando Figma: auto layout

O curso Praticando Figma: auto layout possui 14 minutos de vídeos, em um total de 12 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