Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer!
Última atualização em
06/02/2023
Saiba como usar pilhas no Adobe XD para criar layouts dinâmicos que reagem às alterações no conteúdo.
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.
Antes de continuar
Aprenda as noções básicas sobre layouts sensíveis a conteúdo:
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
É possível ativar as pilhas em um grupo ou componente com o redimensionamento responsivo ativado. Marque a caixa de seleção Pilhas dentro dos controles de Redimensionamento responsivo do Inspetor de propriedades.
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.
Nota
Ao trabalhar com componentes, o controle de orientação da pilha só estará disponível para o componente principal.
O que acontece quando você ativa as pilhas?
Quando você habilita a pilha, o XD faz o seguinte:
- Identifica automaticamente o plano de fundo (grupo ou forma posicionada por último no painel Camadas e que se mistura na tela a todos os objetos do grupo),
- Habilita e calcula os valores de preenchimento,
- Determina a orientação da pilha: Vertical ou Horizontal,
- Agrupa elementos sobrepostos para preservar o layout e
- Define e corrige os valores de espaçamento entre os elementos.
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
Mova os elementos livremente ou use as ferramentas Alinhar nos elementos da pilha opostos à direção da pilha.
Selecione um objeto para redimensionar, e os demais objetos na pilha moverão automaticamente para preservar o espaçamento relativo entre eles. Use texto com Altura automática para ajustar de maneira dinâmica a altura do texto na pilha sem alterar sua largura.
Editar espaços entre objetos Ajustar espaços dentro de uma pilha
Selecione um objeto dentro de um grupo ou componente empilhado e passe o mouse sobre os espaços. Um realce rosa representa o espaço entre os objetos na pilha. Clique e arraste a área destacada para editar o espaço entre os objetos.
Selecione a pilha inteira e mantenha pressionada a tecla S no teclado para ajustar os espaços dentro de uma pilha. Também é possível usar S para editar o preenchimento.
Igualar espaços em uma pilha Duplicar elementos em uma pilha
Arraste e pressione Shift ou Shift + S (quando a seleção estiver fora da pilha).
Use Cmd+D para duplicar um elemento dentro de uma pilha e posicioná-lo sob o elemento selecionado.
Reordenar elementos da pilha
Após criar e modificar os elementos da pilha, use qualquer opção a seguir para reordená-los:
- Selecione os elementos da pilha e arraste-os ao longo da direção da pilha na tela.
- Use Cmd+] e Cmd+[ para mover para cima e para baixo na pilha e Cmd+Shift+] e Cmd+Shift+[ para mover a seleção primeiro ou por último em uma pilha. Esses comandos também estão disponíveis no menu de contexto (clique com o botão direito).
- A nova posição do elemento de pilha é destacada com caixas rosas. Para manter o alinhamento ao reordenar, pressione Shift para bloquear os elementos da pilha na direção em que você arrastar e preservar o alinhamento original.
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.
Nota
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:
- 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.
- Na pilha, selecione o elemento que você deseja usar como plano de fundo.
- 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?
- Uma substituição de espaço ocorre quando você edita manualmente o espaço entre dois elementos de uma pilha em uma instância ou estado. Se você modificar o espaço no componente principal, as alterações não serão aplicadas à instância ou estado.
- As instâncias podem ter substituições de conteúdo ou layout em elementos como um texto de área maior. Essas instâncias ainda podem estar sincronizadas com o mestre para os valores de preenchimento ou espaços entre eles.
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 empilhamentos são usados em um componente principal, qualquer instância desse componente respeitará essa estrutura de empilhamento."— Dani Beaumont, Principal Product Manager, 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?
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
