Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!
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.
Aprenda as noções básicas sobre layouts sensíveis a conteúdo:
Conheça as limitações a seguir antes de começar a usar as 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.
Quando você ativa a pilha, o XD faz o seguinte:
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.
Após criar e modificar os elementos da pilha, use qualquer opção a seguir para reordená-los:
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:
Agora que você sabe como criar pilhas e trabalhar com elas, veja mais algumas dicas sobre o uso de 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.
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.
“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.
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.
Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!
Fazer logon em sua conta