🚧 O fluxo da grade para layout automático está atualmente em versão beta aberta. Algumas funções e configurações podem ainda não estar disponíveis na grade. O recurso pode mudar e você pode encontrar bugs ou problemas de desempenho durante o período de versão beta.
Antes de você começar
Quem pode usar este recurso
Disponível em todos os planos
Qualquer pessoa com acesso de editor pode usar o layout automático
A grade é um dos três fluxos de layout automático que podem ser aplicados aos quadros. Ela consiste de "células" organizadas em linhas e colunas, onde você pode colocar camadas e recursos. Os objetos podem abranger várias células e, quando um quadro que utiliza a grade é redimensionado, os objetos nessas células responderão de acordo.
O fluxo de layout automático de grade é ideal para criar designs como bento boxes, painéis e layouts editoriais.
Este artigo aborda apenas um aspecto do trabalho com layout automático. Confira estes outros artigos para saber mais sobre como trabalhar com layout automático no Figma Design.
- Guia de layout automático: uma visão geral do layout automático, como ele funciona, suas principais propriedades e uma coleção de recursos de layout automático.
- Alternar o layout automático em um design: aprenda a adicionar o layout automático a quadros e camadas para que você possa começar a tornar seus designs responsivos.
- Utilizar os fluxos horizontais ou verticais no layout automático: saiba mais sobre as propriedades disponíveis para os fluxos horizontais e verticais no layout automático.
- Criar fluxos multidimensionais de layout automático: combine vários fluxos com layout automático para construir componentes e telas totalmente responsivos.
Glossário
- Célula: a interseção entre uma coluna e uma linha de uma grade
- Camada de célula ou objeto de célula: uma camada ou objeto que vive dentro de uma célula. São considerados elementos filhos que vivem dentro de uma grade.
- Camada filha: uma camada que vive dentro de um contêiner
- Contêiner: uma estrutura (como uma célula) ou camada (como um quadro ou componente) que pode conter outras camadas
- Aninhado: refere-se a uma camada que vive dentro de um contêiner
- Pai: uma camada (ou seja, quadros, componentes, grupos e seções) que contém outras camadas
- Abrangência: a capacidade de um objeto de célula de ocupar várias células simultaneamente
- Nível superior: descreve uma camada que está diretamente na tela de trabalho e não possui um pai
- Trilha: uma linha ou coluna individual
Colunas e linhas
O fluxo de layout automático de grade introduz o controle de layout bidimensional (linhas e colunas) em seus designs. Depois de ativar a grade em um quadro, você pode escolher o número desejado de linhas e colunas clicando no seletor de grade na barra lateral direita. Insira um valor nos campos Número de colunas e Número de linhas ou use o seletor interativo.
Observação: se você estiver diminuindo o número de linhas ou colunas em uma grade, será necessário garantir que a linha ou coluna esteja vazia primeiro.
Redimensionar colunas e linhas
O tamanho de cada coluna e linha é definido como Automático e é calculado com base na quantidade de espaço restante após considerar outros valores de espaçamento e tamanhos de colunas ou linhas.
Para redimensionar uma trilha (coluna ou linha):
- Selecione o quadro.
- Passe o cursor sobre as partes superior ou esquerda do quadro. Você também pode passar o cursor sobre a trilha desejada ou selecionar um item na trilha desejada. Um ponto azul aparecerá.
- Passe o mouse sobre o ponto azul e clique no rótulo que indica o tamanho da trilha que aparece.
- A partir daí, você pode redimensionar a trilha das seguintes maneiras:
- Dimensionamento automático: para que a trilha seja redimensionada automaticamente com base no espaço disponível, digite Automático ou A e pressione Enter/Return
- Tamanho específico: clique e arraste a edge da trilha para redimensionar para um valor específico
Espaçamento
Espaçamento entre
Espaçamento entre define a distância entre colunas e linhas. Você pode fazer isso usando os campos Espaçamento entre linhas e Espaçamento entre colunas na barra lateral direita quando o quadro com layout automático de grade estiver selecionado. Insira um valor numérico no campo, ajuste os valores com as teclas de seta ou modifique o campo com o cursor.
Espaçamento
O espaçamento controla o espaço vazio entre o limite do quadro com layout automático e as células do quadro. Você pode definir o espaçamento de maneira uniforme, vertical e horizontalmente, ou ter valores diferentes para espaçamento superior, direito, inferior e esquerdo.
- Padrão: os controles de espaçamento são separados em espaçamento vertical (superior e inferior) e horizontal (esquerdo e direito) por padrão.
- Espaçamento individual: clique em para usar os campos de espaçamento superior, direito, inferior e esquerdo.
-
Espaçamento uniforme ou atalho CSS: mantenha pressionada a tecla ⌘ Command ou Ctrl e clique em qualquer campo de espaçamento. Você também pode digitar o atalho CSS.
- Exemplo: inserir 1,2,3,4 define superior: 1 px, direita: 2 px, inferior: 3 px e esquerda: 4 px
- Exemplo: inserir 1,2 define superior/inferior: 1 px e esquerda/direita: 2 px
Dica: pressione a tecla Tab para se movimentar entre os campos de entrada.
Redimensionamento
Observação: as propriedades de redimensionamento são abordadas em detalhes no nosso artigo Guia para layout automático. Esta seção cobre detalhes específicos do fluxo de layout automático de grade. Esses detalhes podem mudar à medida que o recurso se desenvolve durante o período da versão beta da grade.
As opções de redimensionamento estão disponíveis para qualquer camada filha de um quadro com layout automático de grade, incluindo quadros com layout automático de grade aninhados. As opções de redimensionamento não estão disponíveis para quadros com layout automático de nível superior que utilizam grade. Saiba mais sobre o aninhamento de quadros com layout automático.
As seguintes propriedades de redimensionamento estão disponíveis:
- Largura ou altura fixa: as dimensões do objeto de célula ou do quadro com layout automático de grade permanecem as mesmas, independentemente do tamanho da célula pai ou do quadro pai.
- Preenchimento do contêiner: o objeto de célula ou o quadro de grade aninhado se estende para preencher a largura ou altura da célula ou do quadro pai
Trabalhar com objetos em células de grade
Adicionar e mover objetos em uma grade
- Criar formas, quadros e camadas de texto: crie esses elementos diretamente em uma célula
- Mover objetos para uma grade: arraste uma ou mais camadas e solte-as em qualquer célula vazia ou entre duas células
- Reposicionar objetos filhos: arraste um ou mais objetos filhos e solte-os em uma célula vazia ou entre duas células
- Duplicar objetos existentes: selecione um ou mais objetos filhos e use o atalho de teclado ⌘ Command D para Mac e Ctrl D para Windows
Os objetos serão dispostos em sucessão da esquerda para a direita, de cima para baixo. Se não houver células vazias suficientes disponíveis, o Figma reposicionará os objetos que estão obstruindo as células disponíveis ou criará novas linhas ou colunas para acomodá-los.
Distribuir objetos por várias células
Você pode fazer com que um objeto filho se estenda por várias células em uma grade, permitindo que ele seja redimensionado quando o pai for redimensionado.
Para abranger um objeto filho, selecione-o e redimensione-o na tela de trabalho. Durante o redimensionamento, se o objeto se ajustar à edge de uma célula, sua propriedade de redimensionamento com layout automático será atualizada para Preencher contêiner para a dimensão ajustada (largura ou altura).
Alinhar objetos às suas células
Dentro de um quadro com layout automático de grade, um objeto filho pode ser alinhado à sua célula.
Selecione um objeto filho e use os botões de alinhamento na seção Posição da barra lateral direita.
- Alinhar à esquerda
- Alinhar centros horizontais
- Alinhar à direita
- Alinhar ao topo
- Alinhar centros verticais
Se você selecionar vários objetos filhos, cada um será alinhado à sua célula correspondente.
Experimente
Para obter alguma prática, pegue uma cópia de nosso arquivo da Comunidade de grade.