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.
Última atualização em
05/08/2021
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.
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.
Para controlar com precisão o tamanho do plano de fundo de um objeto por meio do preenchimento, siga estes passos:
- No Inspetor de propriedades, alterne para ativar o botão de preenchimento.
- 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
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?
- Baixe e abra o arquivo de amostra do botão no XD.
- Selecione o objeto e seu plano de fundo.
- Para controlar o plano de fundo e o conteúdo no botão, habilite Preenchimento no Inspetor de propriedades.
- 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?
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
