Saiba como usar preenchimento fixo para criar layouts sensíveis a conteúdo, como botões, listas suspensas, dicas de ferramenta ou caixas de diálogo modais com facilidade.

O Adobe XD permite definir valores de preenchimento fixo em grupos ou componentes com estados e dimensionar o plano de fundo automaticamente sempre que o conteúdo é alterado.

Isso reduz a quantidade de elementos no design e a sobrecarga cognitiva ao criar botões, listas suspensas, dicas de ferramentas ou caixas de diálogo.

1
Uso de preenchimento para criar layouts sensíveis a conteúdo

Ao contrário do dimensionamento responsivo que é acionado quando você redimensiona um grupo inteiro, o preenchimento é acionado quando o conteúdo de um grupo é alterado.

Dê adeus ao redimensionamento manual e aproveite a flexibilidade e os fluxos de trabalho mais rápidos.

Trabalhar com preenchimento

Preenchimento é a distância do plano de fundo visual até a borda do conteúdo em cada lado identificado por um plano de fundo esticado. 

O XD identifica automaticamente um plano de fundo quando:

  • Uma forma, grupo ou grupo booliano é posicionado por último no grupo ou na camada de componentes, e 
  • Outros elementos sobrepõem-se à camada mais baixa. 
Preenchimento
Mesmos valores de preenchimento em todas as direções

Para controlar com precisão o tamanho do plano de fundo de um objeto por meio do preenchimento, siga estes passos: 

  1. No Inspetor de propriedades, alterne para ativar o botão de preenchimento.
  2. Com base nas suas necessidades de design, defina valores para o mesmo preenchimento em todas as direções ou preenchimentos diferentes em cada direção.
1
Valores diferentes de preenchimento para cada direção

Você pode exibir a opção Preenchimento somente se o elemento de plano de fundo da estrutura da camada estiver posicionado por último no grupo e sobrepor outros objetos.

Ao mover ou redimensionar o conteúdo em um grupo ou componente, o XD identifica o plano de fundo, calcula os valores de preenchimento e os atualiza no Inspetor de propriedades.

Os valores atualizados são mantidos no grupo ou componente e o plano de fundo é redimensionado automaticamente. Quando um grupo ou componente não tem um plano de fundo visual, o valor de preenchimento é definido como 0.

Deseja modificar os valores de preenchimento?

Use uma das seguintes opções:

  • No Inspetor de propriedades, atualize os valores de preenchimento.
  • Para redimensionar o preenchimento na tela, pressione a tecla  ` , passe o mouse sobre a área de preenchimento e arraste-a.
  • Para atualizar os valores de preenchimento em um grupo ou componente, redimensione ou mova manualmente o plano de fundo na tela.
  • Para editar todos os valores de preenchimento, pressione Shift + `.
  • Para editar valores de preenchimento opostos, pressione ` + Alt.

Exemplos

Repetir grades e preenchimento
Usar a repetição de grade com preenchimento

Quando você aumenta os valores de preenchimento, o XD cria um preenchimento invisível que funciona como um espaço protegido ao redor de logotipos ou em uma área de toque maior para botões nos protótipos.

  • Deseja alterar o rótulo de um botão? Digite o próximo texto, e o botão será redimensionado.
  • Deseja adicionar mais linhas em uma lista suspensa? Use uma repetição de grade para criar mais linhas dentro do grupo, e o plano de fundo será redimensionado com a repetição de grade.

Preenchimento em componentes com estados

Componentes herdam o comportamento de preenchimento do componente mestre. Isso significa que os valores de preenchimento definidos no componente mestre são sincronizados entre as instâncias ou estados.

A substituição do preenchimento ocorre quando você:

  • Altera os valores de preenchimento em uma instância do componente e no componente mestre, ou
  • A instância não atualiza os valores de preenchimento.

Lembre-se:

  • Quando você ativa o preenchimento:
    • Todas as instâncias de componentes e estados herdam automaticamente o conjunto de propriedades definido no componente principal ou no estado padrão, sem a opção de substituição local.
    • A opção Enviar para trás na tela posiciona qualquer item em um grupo ou componente bem acima do plano de fundo do grupo.
  • Se o plano de fundo for um grupo, uma máscara ou um componente booliano, as regras de redimensionamento responsivo serão aplicadas para redimensionar o objeto.
  • Se você excluir um plano de fundo, o XD avaliará o grupo e promoverá automaticamente a próxima camada potencial como um plano de fundo, atualizando os valores de preenchimento. Se não houver uma camada de plano de fundo, o valor do preenchimento será redefinido para 0.

Limitações

  • Os componentes e o texto expansivo não podem atuar como plano de fundo de um grupo ou componente.
  • O preenchimento não é animado no modo de Protótipo ao usar os estados Hover ou Toque com o conteúdo de design.

Exemplos e arquivos de amostra

Deseja alterar o rótulo de um botão sem que esse rótulo ultrapasse o limite do botão?

1
Exemplo de arquivos
  1. Baixe e abra o arquivo de amostra do botão no XD.
  2. Selecione o objeto e seu plano de fundo.
  3. Para controlar o plano de fundo e o conteúdo no botão, habilite Preenchimento no Inspetor de propriedades.
  4. Com base nas suas necessidades de design, selecione e aplique qualquer uma das opções de preenchimento.

Saiba mais

Duração: 7 minutos.


O que vem por aí?

Você teve uma visão geral sobre preenchimento. Dê um passo à frente e aprenda a criar designs ou protótipos interativos e compartilhe-os com os envolvidos no projeto, como desenvolvedores e outros designers.

Tem alguma dúvida ou sugestão?

community

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.