As pilhas no Adobe XD permitem que objetos dentro de um grupo definam espaços fixos entre eles. Ao redimensionar, reordenar ou modificar objetos dentro de uma pilha, o XD preserva automaticamente o espaço definido entre os objetos. 

Juntamente com preenchimento e redimensionamento responsivo, as pilhas formam uma poderosa combinação de recursos que fornece mais controle e velocidade em design. Quando aplicadas a componentes, elas automatizam o layout e facilitam a edição de botões, menus, menus suspensos e layouts baseados em cartões.

Aprenda as noções básicas sobre layouts sensíveis a conteúdo:

• Componentes
• Ajuste responsivo e restrições
• Preenchimento para componentes e grupos

Limitações

Conheça as limitações a seguir antes de começar a usar as pilhas:

• Se você passar o mouse sobre um elemento com estado hover que aumenta de tamanho, o plano de fundo não é redimensionado para comportar o novo estado, e os elementos na pilha não são afastados.
• Os componentes não podem atuar como plano de fundo para preenchimento e pilhas. Em vez disso, crie um componente que contenha o conteúdo e o plano de fundo.
• Não é possível:
  • Converter grupos especiais em máscaras ou grupos boolianos em pilhas.
  • Redimensionar as pilhas na direção da pilha.
  • Selecionar um elemento da pilha e elementos fora da pilha.

Ativar pilhas

O XD determina automaticamente a orientação da pilha com base na estrutura do seu grupo ou componente. Contudo, se você quiser alterar a orientação da pilha, selecione Vertical ou Horizontal na opção Pilha no Inspetor de propriedades. 

Ao trabalhar com componentes, o controle de orientação da pilha só estará disponível para o componente mestre.

O que acontece quando você ativa as pilhas?

Editar elementos da pilha

Após criar os elementos da pilha, use qualquer opção a seguir para editá-los:

Mover elementos ou usar a opção Alinhar                                                     Redimensionar objetos e texto na pilha

Editar espaços entre objetos                                                                   Ajustar espaços dentro de uma pilha

Igualar espaços em uma pilha                                                                        Duplicar elementos em uma pilha

Reordenar elementos da pilha

Após criar e modificar os elementos da pilha, use qualquer opção a seguir para reordená-los:

Criar ou modificar um plano de fundo da pilha

Quando você cria uma pilha, o XD determina automaticamente o plano de fundo. Entretanto, quando você habilita pilhas em um grupo ou componente, a camada ou o grupo posicionado mais abaixo na pilha e que se sobrepõe ao conteúdo se torna seu plano de fundo.

O XD não é compatível com instâncias de componentes como plano de fundo.

Para criar e modificar o plano de fundo da pilha, siga estas etapas:

1. Crie uma forma ou grupo dentro da pilha que atuará como plano de fundo da pilha. Você também pode criar um plano de fundo fora da pilha e copiá-lo no grupo empilhado.
2. Na pilha, selecione o elemento que você deseja usar como plano de fundo.
3. Clique com o botão direito e selecione Criar plano de fundo ou Substituir plano de fundo. O elemento selecionado é movido para o final da pilha e redimensionado para se ajustar ao tamanho da pilha e aos valores de preenchimento.
   

Mais possibilidades com elementos da pilha

Agora que você sabe como criar pilhas e trabalhar com elas, veja mais algumas dicas sobre o uso de pilhas:

Aninhar e reorganizar pilhas

Você pode obter layouts bem definidos e fáceis de editar ao aninhar pilhas; por exemplo, uma pilha horizontal em uma pilha vertical. Você pode aninhar um número ilimitado de pilhas. Assista à animação para entender como pilhas aninhadas funcionam. 

Pilhas em componentes e estados

Você pode aplicar pilhas e preenchimento a componentes para definir elementos reutilizáveis da interface do usuário no contexto dos sistemas de design. Ao trabalhar com componentes que precisam de um rótulo ou uma atualização de linha, o uso de pilhas faz com que o layout do componente reaja à alteração e automatize o esforço manual do layout. Por exemplo, se você tiver várias instâncias com substituições de componente, use pilhas para editar e gerenciar os espaços globalmente. Assim você não precisa mais editar cada cartão manualmente.

As pilhas aplicadas a componentes mestre são aplicadas automaticamente a todas as instâncias e estados dele. Também é possível criar um componente vinculado com pilhas e editá-las. 

Como as substituições se comportam com as pilhas?

Saiba mais

“Juntamente com preenchimento e redimensionamento responsivo, as pilhas formam uma poderosa combinação de recursos ao trabalhar em um sistema de design. Quando pilhas são usadas em um componente mestre, todas as instâncias desse componente respeitam essa estrutura de empilhamento.”— Dani Beaumont, gerente de produto principal do XD.

Para saber mais sobre como começar a usar pilhas em componentes e grupos, assista a este vídeo.

Duração: 1 minuto.

O que vem por aí?

Agora você sabe como usar pilhas para definir espaços entre elementos. Continue em frente e aprenda a criar protótipos animados e compartilhá-los com designers ou colaboradores para feedback.

Tem alguma dúvida ou sugestão?