Adicionar layout automático a um design

Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos

Usuários com acesso do tipo editor a um arquivo podem adicionar layout automático a quadros e objetos

Use o layout automático para criar designs responsivos que se expandem para preencher o espaço todo, são reduzidos para caber e se adaptam conforme o conteúdo muda. Por exemplo:

• Crie botões que aumentam ou diminuem à medida que você edita o rótulo do texto
• Crie listas que se adaptam à medida que os itens são adicionados, removidos ou ocultados
• Combine quadros de layout automático para criar interfaces completas

Os quadros com layout automático têm propriedades diferentes dos quadros normais. Ao aplicar o layout automático, você verá algumas alterações no painel direito. Não é possível fazer o seguinte em quadros de layout automático:

• 🚫 Adicionar grades de layout ao quadro
• 🚫 Aplicar restrições a qualquer objeto em um quadro de layout automático, a menos que o objeto tenha a posição absoluta ativada
• 🚫 Usar a seleção inteligente em qualquer objeto dentro do quadro

Adicionar layout automático

Você pode adicionar layout automático a um quadro ou a uma seleção de objetos. Isso inclui:

• Quadros novos ou vazios
• Quadros com conteúdo existente
• Componentes e conjuntos de componentes
• Grupos ou outras seleções de camadas e/ou objetos

Existem algumas maneiras de adicionar layout automático a uma seleção:

• Use o atalho de teclado ⇧ Shift A
• No painel direito, clique em ao lado de Layout automático
• Clique com o botão direito do mouse em um quadro ou objeto e selecione Adicionar layout automático

Assim que você usa o layout automático, os objetos aninhados são configurados para espaçamento automático entre, preencher contêiner e alinhamento centralizado. Saiba mais sobre as diferentes propriedades do layout automático →

Sugerir layout automático

A opção Sugerir layout automático permite transformar um design responsivo com apenas um clique.

Ao usar o recurso Sugerir layout automático, o Figma tentará determinar quais objetos em um quadro ou componente devem ser colocados em um quadro de layout automático e, em seguida, adiciona quantos quadros de layout automático forem necessários para tornar todo o design responsivo. Esses quadros de layout automático são criados de uma só vez, tentando preservar o posicionamento dos designs.

Isso economiza tempo, pois você não precisa fazer o trabalho tedioso de adicionar o layout automático quadro a quadro.

Você pode acessar essa opção a partir de vários lugares:

• Use o atalho de teclado:
  • Mac: ⌃ Control ⇧ Shift A
  • Windows ⌃ Control Alt ⇧ Shift A
• Clique com o botão direito no quadro ou no objeto e acesse Mais opções de layout > Sugerir layout automático
• Selecione Sugerir layout automático no menu Ações

Ao fazer essa ação, todos os quadros de layout automático aninhadaos que foram criados são indicados com um ponto azul na seção de camadas no painel esquerdo.

Adicionar, editar e remover objetos

Adicionar objetos a um quadro de layout automático

Você pode adicionar qualquer camada ou objeto a um quadro de layout automático.

1. Clique e arraste um objeto sobre um quadro de layout automático.
2. Use o indicador azul para escolher onde colocar o objeto.

Aninhar quadros de layout automático

Você pode aninhar um quadro com auto layout dentro de outro quadro com auto layout.Isso permite combinar layouts horizontais e verticais para criar interfaces complexas.

Ao aninhar um quadro com auto layout, ele terá propriedades tanto de quadro pai quanto de quadro filho.

Em nosso exemplo abaixo, há quatro níveis de layout automático:

1. Botão: cada botão é um layout automático horizontal. Isso permite que o botão aumente e diminua à medida que alteramos o texto do rótulo.
2. Linha de botões: em seguida, adicionamos ambos os botões a outro layout automático horizontal. Isso permite que os objetos respondam quando fazemos alguma alteração no conteúdo de objetos relacionados.
3. Post: em seguida, adicionamos nossos botões a um layout automático vertical com os outros objetos no post. Isso inclui uma descrição, uma imagem e o perfil do usuário.
4. Cronograma: adicionamos três em um layout automático vertical para criar nosso cronograma. O quadro com auto layout é o quadro de nível superior posicionado diretamente na tela de trabalho.

Você pode aninhar quadros de layout automático de duas maneiras:

• Arraste um quadro de layout automático para outro quadro de layout automático
• Crie um novo quadro de layout automático ao redor de uma seleção de quadros de layout automático (e outros objetos).

1. Selecione o quadro de layout automático e as outras camadas que você gostaria de incluir.
2. Use o atalho de teclado ⇧ Shift A para adicionar layout automático.
3. O Figma criará um quadro em torno da sua seleção e adicionará o layout automático.

Objetos duplicados

Você pode duplicar objetos existentes para adicioná-los ao layout automático. O Figma adicionará a duplicata à direita (horizontal) ou abaixo (vertical) do objeto original.

1. Selecione um objeto secundário em um quadro de layout automático.
2. Use o atalho do teclado para duplicá-lo:
   • Mac: ⌘ Command D
   • Windows: Ctrl D

Organizar ou reordenar objetos

É possível alterar a ordem em que os objetos aparecem em um quadro de layout automático. Esse recurso só funciona em componentes principais ou quadros de layout automático fora de um componente.

1. Selecione o objeto secundário. Se a camada estiver aninhada, você precisará usar a tecla modificadora para fazer a seleção profunda:
   • Mac: ⌘ Command
   • Windows: Ctrl
2. Existem algumas maneiras de reordenar objetos:
   • Use as teclas de seta do teclado para colocar o objeto em uma nova posição.
   • Clique e arraste o objeto para uma nova posição.

Remover objetos

Para remover um objeto de um componente principal ou de um quadro de layout automático:

• Arraste o objeto para fora do quadro de layout automático
• Clique em ao lado de Aparência no painel direito ou ao lado da camada no painel esquerdo para alternar a visibilidade da camada
• Selecione o objeto e pressione a tecla Delete ou Voltar

Não é possível excluir uma camada ou objeto de uma instância. Se você tentar, o Figma apenas alterará a visibilidade da camada em vez de removê-la.

Remover auto-layout

Ao remover o layout automático, você terá acesso às propriedades normais de um quadro.

Existem várias maneiras de remover o layout automático:

• Clique com o botão direito do mouse no quadro e selecione Remover layout automático
• No painel direito, clique em ao lado de Layout automático
• Use os atalhos de teclado:
  • Mac: ⌥ Option⇧ ShiftA
  • Windows: Alt⇧ ShiftA

Outras considerações

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 tipo Slide in ou Move in 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 de layout automático dentro dele. 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.

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)