Guia do layout automático

Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos

Disponível no Figma Design e no Figma Sites. Você também pode acessar o layout automático no modo Design no Figma Slides e no Figma Buzz.

Qualquer pessoa com acesso de editor a um arquivo pode usar o layout automático

O layout automático pode ser aplicado em quadros para que os designs respondam dinamicamente às mudanças de conteúdo, economizando tempo e tornando seus designs responsivos e adaptáveis.

Os elementos em um quadro com layout automático são organizados automaticamente em um quadro com base na direção, espaçamento, preenchimento, alinhamento e outras propriedades de layout automático. Quando o conteúdo é alterado ou elementos são adicionados, removidos ou redimensionados, o layout se ajusta automaticamente sem necessidade de reposicionamento manual.

Utilize o layout automático para criar designs responsivos, como:

• Botões que aumentam ou diminuem à medida que você edita o rótulo do texto
• Listas que se adaptam conforme itens são adicionados, removidos ou ocultos
• Caixas de bento e painéis
• Uma página da web que se ajusta a diferentes tamanhos de telas

Adicionar layout automático

Para começar a usar o layout automático nos designs, selecione uma ou mais camadas e pressione ⇧ Shift A ou clique em Adicionar layout automático na barra lateral direita. O Figma tentará determinar qual fluxo de layout automático (vertical, horizontal ou em grade) você deseja usar. Você pode mudar para um fluxo diferente a qualquer momento.

Saiba mais sobre como ativar/desativar o layout automático nos designs.

Escolha um fluxo de layout automático

Após o layout automático estar sendo utilizado em um quadro, você pode escolher entre três opções para determinar o fluxo e a disposição dos objetos no quadro:

• Vertical
• Horizontal
• Grade

Horizontal e vertical

A opção Vertical posiciona os objetos em seu quadro ao longo do eixo Y. Todos os objetos que você adicionar, remover ou reordenar seguirão o eixo Y. Por exemplo: vários itens de lista em uma lista de tarefas ou publicações em um feed de notícias ou linha do tempo.

A opção Horizontal posiciona os objetos no seu quadro ao longo do eixo X. Qualquer objeto que você adicionar, remover ou reordenar seguirá o eixo X. Por exemplo: uma linha de botões ou ícones em um menu de navegação móvel.

Quando a opção horizontal estiver selecionada, Quebra de linha se torna disponível. Quebra de linha desloca qualquer objeto que transborde para a próxima linha em seu quadro.

As opções de layout automático horizontal e vertical também possuem propriedades adicionais, como redimensionamento, espaçamento, alinhamento e outras.

Saiba mais sobre os fluxos de layout automático horizontal e vertical.

Grade em versão beta aberta

A opção Grade organiza objetos em colunas e linhas, permitindo a criação de galerias, caixas de bento e layouts de painéis que responde e se redimensionam para diferentes tamanhos de quadros.

Ao contrário da configuração de quebra de linha para fluxos horizontais e verticais, os objetos em uma grade não são transferidos para a próxima linha. Em vez disso, eles são posicionados em uma "grade" e têm a opção de se estender por várias linhas ou colunas.

Quadros com layout automático de grade também terão propriedades adicionais, como redimensionamento de colunas e linhas, abrangência e muito mais.

Saiba como usar o fluxo de layout automático de grade.

Ajuste as propriedades de espaçamento

Os tipos de propriedades disponíveis em seu quadro com layout automático dependerão de qual fluxo de layout automático estiver sendo utilizado. No entanto, todos os fluxos compartilham algumas propriedades-chave de espaçamento:

Espaçamento é o espaço vazio ou em branco entre a edge de um quadro pai com layout automático e seus objetos. Você pode definir o espaçamento interno de maneira uniforme, vertical e horizontalmente, ou ter valores diferentes para espaçamento superior, direito, inferior e esquerdo.

O Espaçamento entre é a distância ou distribuição entre objetos em um quadro com layout automático. Use o valor numérico para especificar exatamente a distância que você quer que os objetos tenham entre si. Ou, para quadros com layout automático verticais e horizontais, você também tem a opção de definir o espaçamento entre os itens como Automático, para que os objetos tenham a maior distância possível entre si.

Ajuste a responsividade com o redimensionamento

Uma das funções mais poderosas do layout automático é sua capacidade de fazer com que os objetos adaptem suas dimensões às configurações e aos objetos ao seu redor usando a propriedade de redimensionamento. Você pode definir o comportamento de redimensionamento em um quadro pai com layout automático para determinar como ele é redimensionado com base nas alterações feitas em seu conteúdo e vice-versa.

As configurações de redimensionamento podem ser aplicadas nos eixos X e Y usando os menus suspensos de largura e altura no painel direito.

Quando você passa o mouse sobre uma opção de redimensionamento no menu suspenso, linhas aparecem no canvas para indicar como a caixa de delimitação do design será redimensionada e alterada.

Propriedade de redimensionamento	Pode ser aplicado a…	Comportamento de dimensões
Envolver conteúdo	Quadros com layout automático	O objeto redimensiona-se com base em seus objetos filhos
Preencher contêiner	Objetos filhos de quadros com layout automático	O objeto preenche todo o espaço disponível
Largura/altura fixa	Ambos	O objeto permanece fixo
Largura/altura mínima	Ambos	O objeto é igual ou superior ao mínimo
Largura/altura máxima	Ambos	O objeto é igual ou menor que o máximo

Envolver conteúdo

Use envolver conteúdo em qualquer quadro com layout automático, para que ele mantenha as menores dimensões possíveis em torno de seus objetos filhos, respeitando os valores de espaçamento.

Por exemplo, suponha que você tenha uma camada de texto com 40 px de largura dentro de um quadro que utiliza layout automático. O espaçamento do quadro é definido como 10 px nos lados esquerdo e direito. Como o redimensionamento está definido para Envolver conteúdo, a largura do quadro é de 60 px. Se a camada de texto for atualizada e agora tiver 50 px de largura, a largura do quadro mudará para 70 px.

O recurso Envolver conteúdo só pode ser aplicado a quadros com layout automático.

Preencher contêiner

Camadas definidas para Preencher contêiner se estendem para ocupar todo o espaço disponível em seu quadro pai, respeitando quaisquer valores de espaçamento.

O recurso Preencher contêiner pode ser aplicado apenas a objetos filhos de quadros com layout automático e não está disponível para quadros de nível superior.

Os objetos filhos de um quadro com layout automático também serão definidos como Preencher contêiner se forem redimensionados manualmente para o espaço disponível total do quadro pai.

Largura ou altura fixa

Defina uma largura ou altura Fixa em uma camada para garantir que suas dimensões permaneçam fixas e inalteradas, independentemente das alterações nos valores de espaçamento ao redor e nos objetos filhos, pais ou irmãos.

A opção Fixa pode ser aplicada a qualquer quadro com layout automático e seus filhos.

Se você redimensionar manualmente uma camada ou especificar um valor para o campo de largura ou altura, a propriedade de redimensionamento será definida como Fixa no respectivo eixo.

Por exemplo, digamos que você tenha um componente de botão que usa layout automático, e sua largura esteja definida como Envolver conteúdo. Se você inserir um valor como 125 no campo de largura, a propriedade de redimensionamento mudará para Largura fixa.

Dimensões mínimas e máximas

Defina a largura e a altura mínimas ou máximas para qualquer quadro com layout automático e seus filhos.

• Abra o menu suspenso Largura para encontrar Adicionar largura mínima e Adicionar largura máxima
• Abra o menu suspenso Altura para encontrar Adicionar altura mínima e Adicionar altura máxima

Selecione uma opção no menu suspenso Largura ou Altura. No novo campo exibido, insira um valor ou use o menu suspenso para aplicar uma variável numérica.

Se um objeto contiver uma configuração mínima ou máxima, seu respectivo ícone de largura ou altura ganhará duas linhas, uma de cada lado. Você pode passar o mouse sobre esses ícones para visualizar os limites de dimensão no canvas.

Quando você desmarcar e selecionar novamente um objeto, seus campos de dimensão mínima e máxima ficarão ocultos no painel direito. Para acessá-los novamente, clique no ícone de largura ou altura.

Para remover uma configuração mínima ou máxima, abra o menu suspenso Largura ou Altura e escolha Remover mínima e máxima.

Ignorar layout automático

Um objeto com Ignorar layout automático ativado é excluído de um fluxo com layout automático, mas continua no quadro com layout automático. O objeto e seus irmãos ao redor se ignoram, mesmo ao serem redimensionados e movidos.

Assim como a posição absoluta no CSS, um objeto que ignora o layout automático pode ser colocado exatamente onde você quiser em relação ao seu contêiner primário.

Os objetos com a opção Ignorar layout automático ativada são tratados como objetos em um quadro normal. Isso significa que você pode aplicar restrições para determinar como eles respondem quando o quadro pai com layout automático é redimensionado. Outras configurações de layout automático, como opções de redimensionamento e layout, não estão disponíveis para esses objetos.

Você pode fazer com que um objeto ignore o fluxo de layout automático executando uma das seguintes ações:

• Selecione um filho de um quadro com layout automático e clique no painel direito
• Arraste um objeto para um quadro com layout automático enquanto pressiona  ⌃ Control.

Aninhar quadros de layout automático

O verdadeiro poder da capacidade de resposta do layout automático surge ao combinar comportamentos de redimensionamento em quadros aninhados com layout automático.

Aninhamento refere-se ao ato de colocar uma camada dentro de outra camada, como colocar um botão dentro de um componente ou uma forma dentro de um quadro.

Aninhar um quadro com layout automático dentro de outro quadro com layout automático permite combinar opções de layout automático horizontal, vertical e de grade para criar interfaces complexas. Os quadros aninhados terão propriedades de pai e filho, cada quadro com seu próprio espaçamento separado e valores de espaço entre, permitindo-nos criar layouts multidimensionais com elementos que fluem em diferentes direções e arranjos.

Aprenda a criar fluxos com layout automático multidimensionais.

Considerações com outros recursos

Restrições

Para aplicar restrições a objetos filhos em um quadro com auto layout, é necessário que o objeto ignore o fluxo de layout. Como alternativa, use a propriedade de redimensionamento para definir como os objetos se comportam quando o quadro, ou os elementos dentro dele, são redimensionados.

Ainda é possível aplicar restrições ao quadro com auto layout, se ele estiver dentro de um quadro comum.A seção Restrições e as opções de redimensionamento serão exibidas, permitindo que você defina as restrições do quadro de layout automático e o comportamento de redimensionamento de qualquer objeto dentro dele.

Por exemplo: digamos que temos um aplicativo de registro de hábitos onde cada hábito possui uma tela de análise com um histórico de calendário das conclusões dos hábitos e um painel na parte inferior para anotações em qualquer dia específico. Essa tela utiliza layout automático, mas o painel de notas não segue o fluxo do layout automático. Podemos usar as restrições Inferior e Esquerda e direita para garantir que o painel de notas responda corretamente quando o quadro pai for redimensionado.

Saiba mais sobre restrições.

Componentes e instâncias

Como os componentes são quadros, você pode adicionar layout automático a eles. Você precisará adicionar o layout automático a cada componente individualmente. No momento, não há uma maneira de adicionar layout automático em lote.

Ação	Componente principal	Instância
Ajustar o espaçamento interno vertical e horizontal	✓	✓
Ajustar o espaçamento entre	✓	✓
Reordenar as camadas	✓	✕
Adicionar novas camadas	✓	✕
Excluir ou remover camadas	✓	(Oculta apenas a camada)

Protótipos com layout automático

Há algumas coisas a considerar ao criar protótipos com layout automático.

As transições de animação inteligente não consideram o plano de fundo de um quadro. Se você quiser usar uma transição Deslizar ou Avançar com animação inteligente, será necessário adicionar um plano de fundo. Você pode criar um retângulo dentro de um quadro regular e colocar seu quadro com layout automático dentro dele. Saiba mais sobre transições de deslizar e avançar.

Para aplicar o estouro de rolagem a um quadro, é necessário que o conteúdo se estenda além dos limites dela.

Como as dimensões de um layout automático primário são orientadas por conteúdo, ele será redimensionado para caber nos objetos. Para replicar o comportamento de rolagem, você precisará colocar o auto layout dentro de um quadro comum.

Camadas de texto, altura máxima e máximo delinhas

As camadas de texto não podem ter uma altura máxima e um número definido de máximo de linhas. Adicionar uma altura máxima definirá o máximo de linhas como Automático. Definir o máximo de linhas como um número removerá a configuração de altura máxima da camada.

Saiba mais sobre máximo de linhas.

Redimensionamento de texto

As camadas de texto também têm suas próprias propriedades de redimensionamento. Em um quadro com layout automático, isso pode produzir alguns resultados úteis.

Se quiser que seus quadros de layout automático sejam completamente fluidos, desaconselhamos o uso de caixas de texto de tamanho fixo. As camadas de texto de tamanho fixo não serão redimensionadas para acomodar seu texto, o que pode causar sobreposição entre camadas em um quadro de layout automático.

Saiba mais sobre o redimensionamento de texto.

Guia de atalhos do teclado

Atalhos básicos

Ação	Mac	Windows
Adicionar layout automático	⇧ Shift A	⇧ Shift A
Sugerir layout automático	Ctrl ⇧ Shift A	Ctrl Alt ⇧ Shift A
Remover auto-layout	⌥ Option ⇧ Shift A	Alt ⇧ Shift A
Editar o espaçamento interno em todos os lados (no painel direito)	⌘ Command + Clique no campo de entrada de espaçamento interno	Ctrl + Clique no campo de entrada de espaçamento interno

Na caixa de alinhamento

Clique na caixa de alinhamento no painel direito e pressione as seguintes teclas para:

Ação	Mac e Windows
Definir alinhamento	↓ / → / ← / ↑
Definir o alinhamento para borda	W / A / S / D
Ativar ou desativar alinhamento da linha de base	B
Ativar ou desativar o espaçamento entre	X

No canvas

Use estes atalhos de teclado ao arrastar as alças na tela para:

Ação	Mac	Windows
Definir o espaçamento interno em lados opostos	⌥ Option	Alt
Definir o espaçamento em todos os lados	⌥ Option⇧ Shift	Alt⇧ Shift
Definir o espaçamento interno ou o espaçamento com deslocamento grande	⇧ Shift	⇧ Shift

Use esses atalhos de teclado e clique em áreas específicas em um quadro de layout automático para: 

Ação	Mac	Windows
Inserir valor de espaçamento interno em lados opostos	⌥ Option + Clique na área de espaçamento interno	Alt + Clique na área de espaçamento interno
Inserir valor de espaçamento interno em todos os lados	⌥ Option⇧ Shift + Clique na área de espaçamento interno	Alt⇧ Shift + Clique na área de espaçamento interno
Definir envolver conteúdo	Clique duas vezes na borda vertical ou horizontal	Clique duas vezes na borda vertical ou horizontal
Definir preencher contêiner	⌥ Opção + Clique duas vezes na borda vertical ou horizontal	Alt + Clique duas vezes na borda vertical ou horizontal

Recursos

Artigos

• Artigo: Alternar o layout automático em um design
  Pronto para começar a usar o layout automático? Aprenda a usar o layout automático em quadros e camadas para começar a tornar seus designs responsivos.
• Artigo: Utilizar os fluxos horizontais ou verticais no layout automático
  Descubra as propriedades disponíveis para os fluxos horizontais e verticais no layout automático.
• Artigo: Utilizar a grade no fluxo com layout automático
  Aprenda a trabalhar com colunas, linhas e células no fluxo de layout de grade.
• Artigo: Criar fluxos multidimensionais de layout automático
  Combine múltiplos fluxos de layout automático para construir componentes e telas totalmente responsivos.

Projetos e aprendizado prático

• Playlist de tutoriais do Figma: aprenda a criar designs e componentes flexíveis
  Essa playlist inclui tutoriais em vídeo que cobrem os fundamentos do layout automático, como aplicar o layout automático aos designs e tutoriais práticos para obter experiência.
• Arquivo da Comunidade: playground com layout automático
  Pegue uma cópia do arquivo de playground com layout automático para praticar enquanto aprende.
• Arquivo da Comunidade: playground de grade
  Pegue uma cópia do arquivo de playground com layout automático de grade para praticar enquanto aprende.
• Projeto: crie um cartão responsivo com layout automático e restrições
  Nesse projeto, aprenda a criar um design de cartão responsivo para um aplicativo de podcast usando layout automático, restrições, componentes e ferramentas de forma.