Antes de você começar

Quem pode usar este recurso

Disponível em qualquer equipe ou plano

Somente pessoas com acesso de editor ao arquivo podem fazer alterações na posição, nas dimensões ou no alinhamento de uma camada.

Cada forma, objeto de texto ou imagem que você adiciona ao canvas tem sua própria camada. Isso permite ajustar cada camada individualmente à medida que você vai criando designs uniformes e complexos.

Neste artigo, mostraremos como ajustar o alinhamento, a posição, as dimensões e a rotação das camadas. As instruções valem para camadas individuais, bem como estruturas, componentes, grupos e seleções.

Você encontrará a maioria dessas propriedades na parte superior do painel Design, na barra lateral direita. Também é possível ajustar várias dessas propriedades no próprio canvas.

Alinhamento

As ferramentas de alinhamento permitem que você organize as camadas no canvas em relação umas às outras. O Figma determinará o alinhamento da camada com base na sua seleção específica.

• Selecione um objeto ou camada: o Figma alinhará a camada ao primário. Pode ser um grupo, uma estrutura ou a estrutura de contenção de um componente.
• Selecione várias camadas: o Figma alinhará as camadas em relação umas às outras, ou em relação à estrutura primária, ou em relação às camadas selecionadas em uma instância.

Use os controles de alinhamento na barra lateral direita para alinhar um objeto à sua camada principal ou para alinhar vários objetos entre si: 

• Alinhar à esquerda
• Alinhar centros horizontais
• Alinhar à direita
• Alinhar no topo
• Alinhar centros verticais

Se preferir, use os atalhos do teclado:

Ação	Atalho de teclado
Alinhar no topo	AltW
Alinhar à esquerda	AltA
Alinhar na parte inferior	AltS
Alinhar à direita	AltD
Alinhar centros verticais	AltV
Alinhar centros horizontais	AltH

Segure a tecla Shift e clique nos controles de alinhamento para alinhar vários objetos como um grupo à estrutura primária. Se os objetos residirem em estruturas diferentes, eles se alinharão às respectivas estruturas primárias.

Configuração de alinhamento

Ao redimensionar um objeto, mover camadas ou mover pontos de vetor, use as configurações de alinhamento para ajudar a alinhar a outros elementos no canvas. Uma guia vermelha aparece no canvas como indicação visual.

• Alinhar à geometria: opção usada somente no modo de edição vetorial. Quando essa configuração estiver ativada, clicar e arrastar um ponto vetorial o alinhará a outros pontos vetoriais.
• Alinhar a objetos: alinhe os centros e os pontos mais externos de diferentes objetos.
• Alinhamento à grade de pixels: alinhe objetos a uma grade subjacente para evitar erros de pixels desalinhados ao exportar elementos. A grade de pixels não precisa estar visível para que essa configuração funcione.

Para ativar e desativar o alinhamento aos parâmetros, abra um arquivo do Figma Design e acesse  > Preferências. Você também pode encontrar essas configurações no menu de ações rápidas. 

O alinhamento aos parâmetros é aplicado a todos os arquivos do Figma Design.

Se a opção Alinhar à geometria ou Alinhar a objetos estiver ativada, segure a tecla Control para desativá-las temporariamente.

Para desativar temporariamente a opção Alinhar à grade de pixels com Control, você deve estar no modo de edição vetorial e com zoom no canvas. Para saber se você ampliou a imagem o suficiente, ative a grade de pixels ⇧ Shift ' e amplie a imagem até que a grade fique visível. Observe que a grade de pixels não precisa ser ativada para usar esse atalho.

Distribuição

Use a distribuição para criar espaços iguais entre camadas em uma seleção. É preciso ter mais de uma camada ou objeto selecionado.

Ao usar a distribuição, o Figma manterá a posição dos objetos ou camadas mais externos:

• Distribuir o espaçamento horizontal: tanto os objetos ou camadas na parte externa esquerda quanto na parte externa direita manterão sua posição.
• Distribuir o espaçamento vertical: os objetos ou camadas superiores e inferiores manterão sua posição.
• Arrumar (seleção inteligente) ↓

Arrumar

Use a opção Arrumar para alinhar rapidamente camadas em uma dimensão como linhas ou colunas, ou combine linhas e colunas para criar layouts bidimensionais.

Em seguida, você pode ajustar o espaçamento horizontal e vertical entre os objetos com seleções inteligentes. Aprenda a usar a seleção inteligente →

Dependendo da sua seleção, você verá uma das seguintes opções:

• Arrumar seleção vertical (uma dimensão)
• Arrumar seleção horizontal (uma dimensão)
• Arrumar (duas dimensões)

Seleções unidimensionais

No caso de uma seleção no eixo horizontal ou vertical (uma dimensão), o Figma organizará os objetos com base no eixo em que se sobrepõem.

Objetos no eixo x terão apenas o espaçamento horizontal ajustado, e objetos no eixo y terão apenas o espaçamento vertical ajustado.

O Figma usará o espaçamento mais comum na seleção para definir o valor de Espaço entre.

Seleções bidimensionais

Ao usar a opção Arrumar em objetos bidimensionais, como uma grade, o processo de arrumação é muito mais rigoroso. O Figma ajustará o espaçamento vertical e horizontal entre os objetos.

O espaçamento vertical e horizontal dependerá da posição inicial e pode ser o mesmo ou único. Depois que o Figma arrumar as camadas, você poderá ajustar o espaçamento vertical e horizontal

Ao contrário da opção Distribuir, que reposiciona os objetos dentro dos limites da seleção original, a opção Arrumar organiza todos os objetos em uma grade que se alinha ao canto superior esquerdo da seleção.

Distribuir ou arrumar

Se estiver usando a opção Arrumar em uma seleção unidimensional, você perceberá que ela funciona de forma semelhante à opção Distribuir. Ou seja, a opção Arrumar é como uma distribuição com lógica adicional.

O principal objetivo da função Arrumar é organizar as camadas para que atendam aos critérios de uma seleção inteligente. Ou seja, devem estar a uma distância igual e se sobrepor em um dos eixos.

• A opção Distribuir define apenas uma distância uniforme entre as camadas, sem exigir que as camadas se sobreponham em nenhum dos eixos. A opção Arrumar executará as duas, se necessário.
• A opção Arrumar permite alinhar objetos ao longo dos dois eixos ao mesmo tempo. A opção Distribuir só funciona ao longo de um eixo de cada vez: distribuir espaçamento horizontal ou distribuir espaçamento vertical.

Tanto com Distribuir quanto com Arrumar, o Figma mostrará o espaço no campo ou . Isso se baseia no valor mais comum de espaço (o modo).

Posição

Você pode ajustar a posição das camadas no canvas ao longo de qualquer uma das duas dimensões ou eixos: horizontal (eixo X) e vertical (eixo Y).

O Figma representa a posição de uma camada no canvas usando coordenadas X e Y. Elas se referem ao canto superior esquerdo dos limites da camada.

1. Abra o painel Design na barra lateral direita.
2. Use os campos X e Y para ajustar as coordenadas da camada.
3. Você também pode usar equações matemáticas básicas (- + * / ^ () ) para ajustar rapidamente os valores das coordenadas X e Y. Você pode adicionar uma equação antes ou depois do valor existente ou substituí-la por uma nova equação. Saiba mais sobre equações ↓

Deslocar camadas

Use as setas do teclado para deslocar a posição das camadas. O Figma permite definir dois valores de deslocamento padrão: deslocamento pequeno e deslocamento grande.

Por padrão, o deslocamento grande e é definido como 1 e o deslocamento pequeno é definido como 10. Os dois valores estão em pontos independentes de resolução. Definir valores de deslocamento grande e pequeno →

Use as setas para deslocar as camadas

Use as teclas de seta para mover sua seleção. As teclas de seta usarão suas configurações de deslocamento pequeno; mantenha pressionada a tecla Shift para usar as configurações de deslocamento grande.

• ← Esquerda
• ↓ Para baixo
• ↑ Para cima
• → Direita

Dimensões

Cada camada no canvas terá suas próprias dimensões. Para visualizar as dimensões de uma camada:

1. Selecione a camada no canvas ou no painel de camadas.
2. Visualize as dimensões no rótulo azul abaixo da caixa de delimitação da camada.
3. Você também pode visualizar as dimensões de qualquer camada usando os campos W e H na barra lateral direita.

Selecione uma camada para fazer alterações nas dimensões de uma camada. É possível fazer isso de várias maneiras:

• Para ajustar a largura de uma camada: passe o mouse sobre os limites esquerdo ou direito da camada até que apareça . Clique e arraste para redimensionar.
• Para ajustar a altura de uma camada: passe o mouse sobre os limites superior ou inferior da camada até que apareça . Clique e arraste para redimensionar.
• Para ajustar a largura e a altura de uma camada: passe o mouse sobre qualquer canto dos limites da camada até que o endereço seja exibido. Clique e arraste para redimensionar.
• Ajuste os campos W e H na barra lateral direita.

Restringir proporções

O botão permite que você restrinja as dimensões da camada à proporção atual. Você pode encontrar essa configuração ao lado das configurações de dimensão(W e H) na barra lateral direita.

Quando essa configuração está ativada, o Figma mantém a proporção original de largura para altura sempre que você redimensiona a camada na barra lateral. Se você atualizar um dos campos H ou W, o Figma atualizará o outro de forma correspondente.

Rotação

Gire camadas individuais, como objetos, quadros e grupos, ou uma seleção de camadas. O Figma usará o centro horizontal e vertical da sua seleção como ponto de rotação.

Cada camada que você adicionar à tela terá uma rotação padrão de 0°. Você pode girar sua seleção 180° em cada direção:

• Um ângulo positivo vai no sentido anti-horário em direção a 180°
• Um ângulo negativo vai no sentido horário em direção a -180°

Quando você ultrapassar 180° em qualquer direção, o Figma fará uma contagem regressiva até 0° naquela direção. Por exemplo: passar 15° além de 180° resultará em um ângulo de -165°.

Barra lateral à direita

Encontre o campo de rotação na parte superior do painel Design na barra lateral direita.

1. Selecione a(s) camada(s) ou o(s) objeto(s) que gostaria de girar.
2. Na barra lateral direita, use o campo para inserir a rotação desejada.

Tela

1. Passe o mouse fora de um dos limites da camada até que o ícone apareça.
2. Clique e arraste para girar sua seleção:
   • Arraste no sentido horário para criar um ângulo negativo (em direção a -180° ).
   • Arraste no sentido anti-horário para criar um ângulo positivo (em direção a 180° )
3. Mantenha pressionada a tecla Shift para ajustar os valores de rotação em incrementos de 15.

Inverter camadas

Outra forma de replicar camadas giratórias é usar as transformações Inverter na horizontal e Inverter na vertical.

Para aplicar uma transformação de inversão, use o menu do botão direito ou os atalhos de teclado:

• Inverter horizontalmente: ⇧ Shift H
• Inverter na vertical: ⇧ Shift V

Cada forma, objeto de texto ou imagem que você adiciona ao canvas tem sua própria camada. Isso permite ajustar cada camada individualmente à medida que você vai criando designs uniformes e complexos.

Você pode ajustar a posição das camadas na tela ao longo de qualquer uma das três dimensões ou eixos: horizontal(eixo X), vertical(eixo Y) e profundidade(eixo Z).

Ao contrário dos eixos X e Y, não há um campo específico que possa ser ajustado para o eixo Z. Em vez disso, você ajusta a profundidade (eixo Z) ou a hierarquia de uma camada alterando a ordem no painel Camadas.

Isso permite mover camadas para a frente ou para trás do canvas, bem como mover camadas para dentro ou para fora de grupos ou estruturas. Saiba mais sobre relacionamentos entre camadas →

O painel Camadas na barra lateral esquerda mostra todas as camadas na página atual e reflete a ordem em que elas estão empilhadas atualmente: a camada superior está na frente e a inferior está na parte de trás.

Alterar a ordem das camadas

Existem várias maneiras de ajustar a ordem de uma camada.

• 1

  Painel de camadas

  Para ajustar a ordem da camada, altere a posição dela no painel Camadas.

  1. Abra o painel de Camadas na barra lateral esquerda.
  2. Clique e arraste a camada para alterar sua posição na hierarquia de camadas:
     • Mova a camada para cima para trazê-la para frente
     • Mova a camada para baixo para enviá-la para trás
  3. Solte para aplicar.

  Observação: a ordem das camadas funciona de maneira oposta em uma estrutura de layout automático. Isso ocorre porque o layout automático não foi desenvolvido para aceitar camadas que se sobrepõem.

  Se você alterar a ordem das camadas em uma estrutura de layout automático, isso alterará a posição e a ordem da camada dentro da estrutura. Fora de uma estrutura de layout automático, a alteração da ordem das camadas não afetará a posição de uma camada nos eixos X ou Y.

  Saiba mais sobre o uso do layout automático →

• 2

  Atalhos de teclado

  Trazer para frente:

  • Mac: ⌘Command ]
  • Windows: Ctrl ]

  Trazer para frente:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Ctrl Shift ]

  Enviar para trás:

  • Mac: ⌘ Command [
  • Windows: Ctrl [

  Enviar para trás:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Ctrl Shift [
• 3

  Menu do botão direito

  1. Selecione a(s) camada(s) no canvas.
  2. Clique com o botão direito na seleção para abrir o menu de contexto:
  3. Escolha entre:
     
     • Trazer para frente
     • Trazer para frente
     • Enviar para trás
     • Enviar para trás

Ajustar valores

Equações

Alguns campos do Figma aceitam equações, incluindo os campos de posição, dimensão e rotação.

Você pode usar equações para redimensionar camadas adicionando +, subtraindo -, multiplicando * ou dividindo / o valor existente. Você também pode usar colchetes ( ) dentro do campo para equações mais complexas ou ^ para criar expoentes.

Acrescentamos alguns exemplos abaixo, mas você pode usar qualquer número:

• + 10 para adicionar 10 ao valor atual
• - 20 para remover 20 do valor atual
• *2 para multiplicar o valor atual por 2
• /4 para dividir o valor atual por 4
• ^2 para criar um expoente do valor atual elevado à potência de 2
• (𝑥/2)+6 para dividir o valor atual em dois e adicionar 6 (𝑥 =valor atual)
• Mixed+100 para adicionar 100 a dois ou mais objetos selecionados com valores diferentes

As equações também podem ser aplicadas a uma seleção mista de valores. Quando uma equação for inserida nos campos de posição, dimensão ou rotação, a alteração será aplicada a todas as camadas selecionadas. 

Modificar valores dos campos

Além de inserir valores manualmente, você também pode usar o "scrubbing" para modificar valores dos campos rapidamente arrastando o mouse ou o touchpad ativo.

Esse tipo de ação pode ser usado em campos de posição, dimensões e rotação, bem como em outras propriedades e configurações de camada na barra lateral direita.

1. Selecione a camada ou o objeto no canvas.

2. Passe o mouse sobre o rótulo próximo ao campo de entrada até que o cursor de scrubbing apareça. Você também pode passar o mouse sobre o próprio campo de entrada e manter pressionada a tecla modificadora:

   • Mac: ⌥ Option
   • Windows: Alt

3. Clique no ícone e arraste-o para alterar o valor de entrada. Arraste o cursor para a esquerda para diminuir o valor ou para a direita para aumentá-lo.

4. Mova o cursor em direção à parte superior da tela para aumentar a velocidade de scrubbing ou para a parte inferior da tela para reduzi-la.

   Você verá uma notificação na parte inferior da tela com a velocidade atual, bem como uma diferença na largura do cursor. Existem quatro velocidades de scrubbing: 2x, 1x, 1/2e 1/4.