Guia do Usuário Cancelar

Criar designs dinâmicos com pilhas

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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. 

Resultado de como pilhas funcionam

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.

Novo no XD?

Instale o XD

Aprenda o básico do aplicativo

Já utiliza o XD?

Atualizar seu aplicativo

Confira as Novidades

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

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?

Quando você ativa 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.
aplicar 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

alinhar pilhas

Mova os elementos livremente ou use as ferramentas Alinhar nos elementos da pilha opostos à direção da pilha.

redimensionar

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

Editar espaços entre objetos

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.

ajustar espaços entre pilhas

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.
Reordenar elementos da pilha

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:

criar e modificar plano de fundo de pilha

  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 e repetição de grades

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. 
Comportamento de substituições com 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?

Pergunte à comunidade

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!

Logotipo da Adobe

Fazer logon em sua conta