Como usar o layout automático no Figma

Auto Layout é uma ferramenta essencial para todo designer e usuário do Figma. Este recurso permite fazer alterações como redimensionar ou reposicionar molduras e objetos. O Auto Layout permitirá ajustar a altura e o peso de um elemento, por exemplo, com uma configuração automática, cortando seu trabalho pela metade.

Como o tamanho da tela muda de acordo com o dispositivo ou navegador que o usuário utilizará para acessar o site, o Auto Layout faz com que os elementos dentro dos frames se ajustem a essas alterações. Isso faz com que o layout e a estrutura pareçam mais precisos e em sinergia. Continue lendo para aprender como usar o Auto Layout no Figma e seus recursos.

Usando Layout Automático

Para usar o Auto Layout e todos os seus recursos, você deve primeiro adicioná-lo a um quadro no qual está trabalhando, que pode ser um novo quadro ou um com conteúdo, objetos e componentes. Depois de selecionar o quadro ou os objetos, veja como adicionar o Auto Layout a ele:

• Pressione “Alt + A” no teclado (funciona em Mac e Windows).
• Clique com o botão direito nos objetos ou componentes e clique em Auto Layout (você deve adicionar este recurso a cada componente, pois é impossível em massa).
• Toque no ícone de adição ao lado da opção “Layout automático” no menu do Figma.

Além de adicionar Auto Layout ao seu porta-retratos, você pode fazer várias coisas, desde empilhar quadros até duplicar, organizar e remover objetos.

Adicionando e Removendo Objetos

Adicionar objetos ao seu quadro é bastante simples. Você só precisa pegar o objeto que deseja adicionar e seguir o indicador. E se você for remover um, arraste-o de volta e pressione delete. Se você optar por adicionar um objeto maior que o quadro pai, você precisará evitar as configurações padrão do Figma para poder fazer isso. Você pode fazer isso segurando o botão “Ctrl” para Windows e “Command” para Mac.

Duplicando objetos

Se quiser adicionar dois ou mais objetos idênticos ao quadro, você pode duplicá-los, o que é um recurso útil de Camada Automática. É assim que você pode fazer isso:

1. Toque no objeto que deseja duplicar.
   
2. Segure os botões “Ctrl” e “D” simultaneamente se você tiver Windows.
   
3. Para Mac, duplique segurando os botões “Command” e “D”.
   

Organizando Objetos

Se você não gosta da aparência da sua moldura e da organização dos objetos e componentes dentro dela, você pode reorganizá-los. Se você mesclou duas camadas, você deve ignorar as configurações padrão do Figma pressionando “Ctrl” para Windows e “Command” para Mac para acessar a opção de seleção profunda e mover o componente da camada inicial. No entanto, se for um quadro, você pode selecionar um objeto e movê-lo para outro lugar, semelhante a adicionar objetos, ou usar a tecla de seta.

Níveis de layout automático

Outro recurso do Auto Layout é combinar mais quadros em um para criar uma interface mais complicada, onde você pode sobrepor diferentes níveis de Auto Layouts, como botões e linhas de botões, uma postagem e uma linha do tempo. Cada nível permite adicionar mais um objeto ao seu quadro. Os níveis de botões e linhas de botões são horizontais, enquanto uma postagem é uma camada vertical onde você pode inserir descrições, imagens, etc.

Quando você empilha dois quadros, eles se fundem e ganham as propriedades de um quadro pai. Isso permite ao usuário implementar objetos ajustáveis. Você pode pegar um e colocá-lo em outro para unir dois quadros. Para fazer isso, você deve:

1. Escolha uma moldura e tudo o que deseja adicionar a ela.
   
2. Pressione “Shift + A” para adicionar um quadro de Layout Automático.
   

Funções de layout automático

A opção Auto Layout no Figma tem muitas propriedades ou funções valiosas, desde direção e ordem de empilhamento até espaçamento, redimensionamento e alinhamento. Esta seção falará sobre cada uma dessas funções com mais detalhes.

Direção

Como o nome sugere, direção refere-se à ordem dos objetos em um quadro. Ao usar o Auto Layout, os objetos podem ser colocados:

• Verticalmente – Os objetos são colocados no eixo y. Esta opção é adequada para listas, menus, feeds de notícias, etc.
• Horizontalmente – Objetos e componentes no eixo x (botões, ícones, etc.).
• Posição de quebra – Os objetos são definidos em múltiplas colunas e linhas.

Ordem de empilhamento

Você pode escolher a ordem de empilhamento que melhor se adapta ao seu quadro. Esta é uma mudança visual apenas porque a ordem de empilhamento permanece a mesma (se for 1,2,3, permanece 1,2,3 mas com ajustes visuais). Quando os objetos estão empilhados uns sobre os outros, você pode escolher qual deles ficará por cima. Então, por exemplo, se você tem três coisas marcadas como 1, 2 e 3, você pode 1 ou 3. É assim que você pode fazer isso:

1. Escolha o quadro Layout automático.
   
2. Navegue até a opção Layout automático à direita da tela.
   
3. Toque nos três pontos horizontais para abrir opções avançadas.
   
4. Encontre a opção “Empilhamento de tela”.
   
5. Escolha “Primeiro em cima” ou “Último em cima”.
   

Posição Absoluta

Outra propriedade do “Layer Flow” é uma posição absoluta, além da ordem e direção do empilhamento. Este recurso permite colocar um objeto onde quiser, ignorando os limites do quadro. Veja como habilitá-lo:

1. Pegue um objeto e coloque-o dentro da moldura.
   
2. No menu do lado direito, próximo aos valores de “X” e “Y”, toque no ícone que lembra um quadrado sem bordas com um sinal de mais dentro.
   
3. Mova o objeto ao longo das linhas do quadro.
   

Configuração de lacuna

Existem alguns recursos que você pode ajustar quando se trata de espaçamento, como espaço. Você tem duas maneiras de alterar a lacuna: automaticamente e digitando uma lacuna específica. Se você deseja que sua lacuna seja o maior possível, você deve selecionar a configuração automática no menu Layout automático. Mas se você for inserir seus valores, digite-os nas caixas atribuídas.

Além disso, a configuração do intervalo pode ser definida para todas as direções. Se seus ícones forem apenas horizontais e verticais, você poderá selecionar um espaço horizontal entre eles. No entanto, se eles estiverem em uma posição de quebra, você poderá ajustar as configurações de espaço vertical e horizontal.

Configuração de alinhamento

Depois de configurar os recursos de direção, preenchimento e espaço, você poderá ajustar o alinhamento do objeto filho no quadro, pois esse recurso depende das configurações de espaçamento. Você não pode alterar o alinhamento de cada objeto, mas escolha um padrão oferecido no menu do Layout Automático. Você pode clicar na grade 3×3 no menu e selecionar o alinhamento desejado. Isso pode ser feito com as teclas de seta ou botões WSAD no teclado.

Além disso, você pode escolher a configuração automática aqui para alternar os alinhamentos horizontal e vertical como uma linha. Com valores específicos, você pode ter todas as nove opções (canto superior esquerdo, canto inferior esquerdo, esquerda, direita esquerda, canto inferior direito, etc.).

Você também pode ajustar o alinhamento do texto habilitando esta opção no menu e segurando o botão “B”.

Redimensionar

As opções de redimensionamento do Layout Automático têm muitas propriedades adicionais, como abraçar conteúdo, opção de preenchimento de contêiner, ajuste de largura e altura, dimensões, etc. Você pode selecionar a opção automática se quiser que seus valores sejam fixos, mas isso limita as possibilidades. Para redimensionar, é recomendado definir seus valores.

Você pode selecionar um valor fixo ou defini-lo com as dimensões máximas ou mínimas possíveis para largura e altura. O conteúdo do Hug permite ajustar o tamanho de um quadro com base no objeto filho, enquanto a opção de preenchimento do contêiner redimensiona um objeto de acordo com o quadro pai.

Criação de molduras exclusivas com layout automático

O Auto Layout, como um dos recursos essenciais do Figma, pode ajustar sua moldura e objetos e compartimentos dentro dela de acordo com sua preferência. Suas propriedades e características são múltiplas, permitindo criar um produto adequado e elegante. Auto Layout é uma ferramenta fundamental que você deve dominar antes de trabalhar no Figma.

Qual função de Auto Layout você mais usa? Deixe-nos saber na seção de comentários abaixo.