Auto Layout do Figma de um jeito simplificado
Ah, o Auto Layout do Figma. Santíssimo seja.
Tanto se fala, e ainda mais se comenta sobre a problemática que é, enfim, entender como usá-lo.
Se você tem dificuldades, não se sinta só. Eu já estive aí (inclusive, não quer dizer que não volto) e quase arranquei meus cabelos em certos momentos.
Hoje, já mais entendida (não menos descabelada), comecei a refletir sobre coisas que eu gostaria que tivessem me ensinado/dito sobre o Auto Layout de um jeito mais simples. Então decidi fazer este artigo.
Espero que meu mini compilado possa te ajudar nesta jornada de uso da ferramenta, mas devo relembrar que não tenho o objetivo de simplesmente resolver todos seus problemas, e sim, talvez, te ajudar nos primeiros passos para finalmente entender no que você se meteu, no fim das contas.
Vamos lá?
Entenda por que precisa (ou deve) usar
Ninguém te obriga a usar o Auto Layout, da mesma forma que ninguém obriga a criar um frame/quadro toda vez que fará algo em um arquivo do editor (no caso, o Figma). São só ferramentas, ou seja, estão ali à disposição quando é PRECISO usá-las. Então por que usar Auto Layout?
Um dos princípios mais básicos a observar quando trabalhamos com desenho de interfaces, é o de consistência. Se precisamos fazer algo sempre de maneira manual, que demanda tempo — então, perdemos tempo — , nem sempre faremos igual às vezes que fizemos antes, então não teremos um padrão; não teremos consistência.
É de se esperar que lembremos das coisas mais facilmente quando são recorrentes (quando digo isso, é eu, você e qualquer outra pessoa), então, quando não se há padrão/consistência, a interface pode gerar dúvidas e fazer com que as pessoas percam tempo tentando entender como a plataforma funciona do que, realmente, usando-a.
Portanto, ferramentas que automatizam nossas necessidades/experiências, tornando-as mais fáceis e práticas de serem feitas e, ao mesmo tempo, também ajudam a resguardar a boa experiência daqueles que usarão o que estamos criando, são muito mais que bem vindas.
Relembrar é viver
Antes, se faz necessário refletir aspectos/conceitos básicos para mexer no Figma. Se você é muito fera nisso desde já, pule para a próxima seção do artigo (é a “O que ele faz?”).
1. Frame é quadro, sua tela de “pintura”.
Frame, artboard, que seja, tudo se trata de um quadro. Você pode, também, ter um quadro dentro do seu quadro, então terá um subquadro.
Por que o quadro 2 sumiu ao ser incluído no quadro anterior?
Porque o Figma tem uma configuração chamada “Clip content” (algo como “parte do conteúdo”) que, ao estar marcada, esconde o conteúdo que estiver fora da linha/delimitação do quadro superior (no caso, o quadro 1). É só desmarcá-la para tudo ficar visível.
2. Camadas (layers) existirão no seu quadro.
Afinal, se você quer fazer algum trabalho no Figma, precisa ter camadas.
Elas podem ser um texto, uma imagem, uma figura (quadro, retângulo etc.).
E elas podem estar dentro do quadro ou não.
3. Você pode agrupar tudo no seu quadro.
Você pode transformar camadas em grupos (dê um CTRL + G ou clique no botão direito do mouse e selecione “Group selection” (agrupar seleção)), da mesma forma que pode transformar seus quadros em grupos.
Os grupos, inclusive, são um tipo de camada. Enfim, é pura hierarquia.
4. TUDO É CAMADA
Então entenda que (quase) tudo no Figma se tratará de camadas. São os elementos que compõem seu trabalho, sua tela; um todo.
Agora, vamos ao que interessa (também).
O que ele faz?
Quando aplicamos o Auto Layout em uma camada (SHIFT + A ou clique no botão direito do mouse e selecione “Add auto layout”), ele cria regras de posicionamento para ela. Regras que, é claro, você quem definirá como funcionam.
Além disso, ele é também age como um grupo. Por isso, o que estiver dentro, é submisso a ele e suas regras.
MAS! Se um grupo é uma camada, então o Auto Layout (vulgo AL, como passarei a chamar agora) também é. Podemos editá-lo, pintá-lo, tracejá-lo etc.
Inclusive, uma das coisas que mais pesam quando estamos trabalhando com AL, é que é muito comum fazermos alterações na camada dele, mas achando que estamos editando as subcamadas.
É porque as linhas/delimitações nem sempre ficam separadas, muitas vezes ficam uma em cima da outra. Por isso, tente olhar à coluna de camadas e confirme se está mexendo na certa. Não quer dizer que deixará de confundir, mas ajudará quando perceber que algo de errado não está certo.
Agora, voltando às regras de posicionamento, entenda os tipos que o AL permite:
1) Direção (direction) da sequência
Faz com que as subcamadas sigam se posicionando de forma contínua para baixo ou para o lado (direito).
Aliás, já que o AL é uma camada, é perfeitamente possível ter uma subcamada dele mesmo. :) MAS! Vá com calma. Para começar a brincar com subcamadas com AL, é crucial entender sobre a regra de redimensionamento. Vamos chegar lá.
2) Posição/alinhamento (alignment) interno
Para entender com mais facilidade, pense em um texto (camada de texto no Figma).
Quando colocamos um texto, podemos alinhar à esquerda, no centro, para a direita. A ideia é a mesma, só há mais opções.
Podemos alinhar à esquerda, mas de forma que fique no centro. Podemos alinhar para a direita, mas de forma que fique no canto direito etc.
Tudo depende da linha da camada com AL, mas, afinal, essa regra só funciona se a camada puder dançar um pouco dentro da linha, certo? Veja que, na imagem, puxei a linha exatamente para isso. Se não há espaço, você aplica a regra e não causa efeito nenhum.
3) Espaçamento (spacing) entre subcamadas
Aqui, não tem segredo. Você pode determinar que haja um espaçamento entre as subcamadas. Ficar segurando Alt e posicionando? Aqui não! O AL faz no automático.
4) Limitação de preenchimento (padding)
Vale lembrar das margens quando fazíamos/fazemos trabalhos acadêmicos. É a mesma ideia.
Quando aplicamos essa regra, as subcamadas ficam afastadas das linhas/delimitação do AL, então criaremos, simplesmente, margens.
Se criamos margens, estamos impedindo/limitando que as subcamadas cheguem até certo ponto, ou seja, preencham até certo ponto (por isso “padding”).
Aliás, se não fizer sentido ter margens, OK! Zere e tá tudo certo. Também é possível deixar a margens só no topo, só nas laterais, enfim, do jeito que quiser.
5) Formas de redimensionamento (resizing)
Agora, concentração (mais, né), porque é onde a coisa se estende.
Naturalmente, quando lidamos com algum elemento no Figma, podemos alterar suas dimensões/tamanho conforme acharmos melhor. É o tal do W (Width = largura) e do H (Height = altura) na coluna direita (de customização). Além disso, na mesma seção, temos também como definir a posição do elemento, rotação etc.
Até aí, tudo bem, ninguém foi mordido (mas não espero que morda, mesmo). Acontece que, com a aplicação do AL, surge o tal redimensionamento.
“><” seria o redimensionamento na horizontal e o outro, na vertical (veja que, acima, temos, respectivamente, os campos de dimensões W e H). Ambos estão selecionados como “Hug” na imagem, mas, quando você abre a seleção, podem existir três opções:
- Fixed width/height (fixar largura/altura);
- Hug contents (hug = abraçar; contents = conteúdos) e;
- Fill container (preencher container/espaço).
Por que falei que “podem existir”? Porque, dependendo do elemento que esteja selecionado, seja um quadrado, vetor, texto ou o que for, uma ou outra opção não é aplicável por simplesmente não fazer sentido a ela. Explicarei mais adiante, porém, antes, vamos entender o que essas funções fazem:
5.1) Fixed width/height (fixar largura/altura)
É o que o próprio nome diz. A largura/altura do elemento não mudará independentemente do que aconteça.
Uma observação: quando olhar as imagens que insiro aqui, preste atenção à coluna de camadas. Veja que a camada selecionada é a de texto. A camada do AL (“Frame 2”), que inclusive está preenchida em preto, também está com o fixar/fixed.
5.2) Hug contents (abraçando os conteúdos)
A ideia é abraçar/estreitar a linha do elemento para encaixar o que quer que esteja dentro dele (texto, ícone, imagem etc.).
Você sabe que, na imagem anterior, o retângulo preto estava com o fixar. Se deixarmos o abraço/hug, fica assim:
Se deixarmos o texto abraçado também, olha que interessante:
O elemento se adapta. E essa é a mágica do Auto Layout. É por isso que amamos tanto.
5.3) Fill container (preencher container/espaço)
Se há espaço, ele será preenchido, caso você selecione esta função. Mas vamos pensar um pouco.
O retângulo preto está abraçando, então, se selecionássemos para o texto preencher, não faria sentido. Não o há o que preencher (até porque o retângulo está se adaptando ao tamanho do texto, que é o que está dentro dele).
Nosso texto também sequer é tão grande assim, então, mesmo que o retângulo tenha um tamanho fixo, o que o texto preencheria? Só o que ele pode, mesmo. Ficaria uma parte em texto e o resto, vazio. Mas veja que interessante:
Quando eu passo o ponteiro do mouse por cima da camada do AL, ele me mostra as delimitações (linhas azuis) que estão ali. Você pode ver que a linha do texto vai de ponta a ponta no retângulo. Então temos a certeza que o preenchimento/fill está ativado e que, se precisar digitar algo mais, a adaptação acontecerá normalmente:
“Ué. Por que o retângulo ficou maior, mas para baixo?” Ué digo eu. Só mexemos nos redimensionamentos na horizontal (W) até agora. Os da vertical prosseguem abraçando/hug, portanto o retângulo se adaptará na vertical. Inclusive, todo o raciocínio que demonstrei até agora, pode ser implementado na vertical, é claro.
Agora que você tá fera nos poderes do AL, deixa eu retomar dois pontos:
Por que nem sempre todas as opções de redimensionamento (fixed/fixo, hug/abraço e fill/preenchimento) aparecem?
Repito: porque não faz sentido ao elemento selecionado. Lembre-se do retângulo.
Por que ele teria a opção de preenchimento, se não está dentro de nenhum elemento que possa preencher? Então não faz sentido. “Mas está dentro de um quadro/frame…” só que o quadro não está com AL aplicado, então não se aplica. Bingo. :)
Por que era/é importante saber sobre redimensionamento antes de criar subcamadas que contenham AL?
Porque o Auto Layout é como se fosse uma trava. Ou seja, você só fará o que é permitido dentro dele. Se não souber como fazer para cada elemento ficar no lugar que deseja, pode acabar se decepcionando com o uso da ferramenta. Um passo de cada vez, certo?
Darei um exemplo prático. Criei um campo para escrever um texto (o tal do input/textfield).
Contarei um pouco sobre o que fiz:
- O título + campo de digitar se ordenam para baixo por causa da regra da camada-mãe do AL (“Campo”).
- Para que o campo a digitar mantivesse esse tamanho, deixei fixado (fixed).
- Os status e caracteres se ordenam para a direita por causa da regra da camada com AL “Status e caracteres”. Ou seja, só uma camada do AL pode “quebrar” o regramento da anterior (no caso, a “Campo”).
- Para que os caracteres ficassem de canto, fiz a camada “Status” para manter o ícone próximo ao texto de status, e a fiz preencher o espaço (fill). Então ela “empurrou” os caracteres para o final do container. Olha que estratégia interessante!
Resumindo: sem as regras de redimensionamento, seria o caos. Mas, francamente, precisa-se levar em conta todas as outras coisas que já vimos sobre AL: alinhamento, espaçamento etc. Estou considerando que você já entendeu isso.
Tem tanta coisa… Nem te conto…
Mentira, eu quero contar, mas o artigo viraria um livro se fosse o caso e sairia do que quero apresentar: algo simples. Se quiser se aprofundar, deixarei alguns links ao final, mas, sinceramente, com o que passei aqui, já dá para aplicar aos seus projetos e fazer coisas incríveis de boássa.
Contudo, antes de finalizar, posso dar meus pitacos? Tudo bem que ninguém pediu, mas…
Pitacos (vulgo dicas)
- Pode ser que suas primeiras tentativas criem tragédias visuais e tá tudo bem. É importante praticar sem se preocupar com a estética. Seu foco deve ser entender o funcionamento da ferramenta para depois criar algo visualmente bonito.
- Não sabe o que fazer para praticar Auto Layout? Tente fazer componentes comuns de uma interface como: botões, cartões/cards, acordeões/accordions etc. Se quiser exemplos, há esta lista: Workbench components
- Nomeie bem as suas camadas e subcamadas (e essa dica serve para tudo, não só para trabalhar com Auto Layout). Não escreva nada muito extenso ou genérico a um ponto que não entenda, de primeira, o que aquilo se trata. Acredite, faz muita diferença caso precise alterar alguma regra depois.
- Não aplique AL em qualquer coisa pela frente. Isso só complicará quando precisar definir as regras ou até alterá-las. Por exemplo: suponha que esteja criando uma tabela e o fundo será branco. Então deixe a camada-mãe com o fundo branco. Há quem selecione subcamada por subcamada do que está dentro da tabela para que haja o fundo branco. É realmente preciso essa trabalheira toda? Por isso, repense e facilite sua vida!
Cabou-se
Por hoje é só, queride. Conforme prometido, seguem alguns links para aprofundamento (se for do seu interesse, é claro):
- Interfaces dinâmicas e otimização de processos de UI com o autolayout do Figma
- Como usar o Auto Layout no Figma
- Using auto layout
- Explore auto layout properties
Espero que minhas palavras tenham sido úteis para ti, mas não deixe de compartilhá-las com outrem. Aliás, já que você está por aqui mesmo…
Conheça a comunidade: Damas de UI!
Para incentivar a interação de mulheres da área de UI Design para, também, combater a escassez de representatividade feminina do ramo, surgiram as Damas de UI.
Saiba mais em: linktr.ee/damasdeui
Além disso, vem se conectar comigo no Linkedinho! Clique aqui. A gente se vê por aí.
Um cheiro pro cê,
Eu, a Bea.
