Redimensionamento responsivo e restrições

Ao criar um design para um ambiente com vários dispositivos, é importante considerar a variedade de tamanhos de tela disponíveis nas resoluções para dispositivos móveis, tablets e desktop. Como nem todos os designers usam os mesmos dispositivos, eles precisam considerar como o conteúdo se comporta em tamanhos de tela diferentes. 

Para solucionar esse problema, o Adobe XD desenvolveu um recurso chamado redimensionamento responsivo, que permite redimensionar objetos mantendo os relacionamentos espaciais em tamanhos diferentes para adaptar o design a vários tamanhos de tela.

Trabalhar com redimensionamento responsivo

Com o redimensionamento responsivo, o XD prevê automaticamente quais restrições você provavelmente aplicará e as aplica automaticamente à medida que os objetos são redimensionados. 

Tradicionalmente, para obter um comportamento do tipo responsivo, os designers precisavam aplicar manualmente restrições a vários objetos para ditar o comportamento do objeto ao redimensioná-lo. Esse método monótono e demorado se concentrou mais em adivinhação e movimentos repetitivos, ofuscando a centelha criativa do design.

O XD aplica restrições automaticamente, analisando os objetos selecionados, a estrutura de agrupamento, a proximidade das bordas do grupo pai e as informações de layout.

Mira de redimensionamento responsiva

Ao redimensionar, miras rosas aparecem no objeto que está sendo redimensionado. Essas miras indicam quais regras de restrição são aplicadas a um grupo. O XD fornece um método visual e contextual de aprender como o redimensionamento responsivo e as restrições manuais funcionam em conjunto.

Redimensionamento e grupos responsivos

Antes de redimensionar, você pode agrupar objetos semelhantes para estabelecer relações entre eles. O XD retém os objetos agrupados por padrão e permite estabelecer uma hierarquia em seus projetos por meio de um mecanismo de organização que você já usa. Quando redimensionados, os objetos agrupados permanecem juntos.

Editar manualmente restrições

Se não estiver satisfeito com os resultados do redimensionamento responsivo, você poderá editar as regras de restrição manualmente. Definir restrições manuais permite determinar com precisão o comportamento dos objetos quando você redimensiona um componente, uma prancheta ou um grupo de camadas.

Selecione Manual  para editar manualmente as restrições que o redimensionamento responsivo colocou em objetos. As restrições manuais sempre substituem as restrições automáticas colocadas pelo XD. Você pode usar as seguintes restrições para especificar as regras e controlar o comportamento dos vários componentes.

• Largura corrigida/variável
• Altura corrigida/variável
• Margem corrigida/variável
• Margem direita corrigida/variável
• Margem superior corrigida/variável
• Margem inferior corrigida/variável

Redimensionamento responsivo de pranchetas

Por padrão, o redimensionamento responsivo é desativado para pranchetas, mas você pode ativá-lo para iniciar o redimensionamento responsivo em pranchetas.

Para ativar o redimensionamento responsivo:

Substituir o redimensionamento responsivo para grupos

Embora o redimensionamento responsivo seja comportamento padrão para o redimensionamento de grupos e várias seleções, você pode: 

• Para um redimensionamento escalado, use a tecla Shift para substituir temporariamente o comportamento responsivo. Você pode utilizar uma das alças de seleção de canto para bloquear a proporção do seu grupo ao redimensioná-lo.
• Desative a opção de redimensionamento responsivo no Inspetor de propriedades.