Definir preenchimento fixo para componentes e grupos

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.

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.

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. 

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.

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

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?

Saiba mais

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?