Criar designs de perspectiva com transformações em 3D

O recurso Transformações em 3D permite simular a profundidade e a perspectiva de objetos em seus designs com facilidade. Combinando a capacidade de girar qualquer objeto nos eixos horizontal e vertical e aplicar profundidade ao longo do eixo Z, você pode simular efeitos visuais como animações em 3D, modelos em perspectiva, interações de virar cartões e muito mais. 

Confirme se você está familiarizado com os fluxos de trabalho de design e protótipo no XD e essas limitações.

Simular profundidade e perspectiva em objetos

Você pode aplicar Transformações em 3D a composições complexas, como grupos de rolagem, repetições de grade, pilhas, preenchimento e objetos copiados e colados em grupos transformados em 3D. Com as Transformações em 3D habilitadas, você pode controlar a orientação de objetos nos eixos X e Y e aplicar profundidade ao longo do eixo Z.

Para simular um efeito 3D, primeiro habilite Transformações em 3D no Inspetor de propriedades, depois use o ícone do cursor  para ajustar a orientação, e, por fim, aplique profundidade aos objetos de design.

Habilitar transformações em 3D

Para habilitar as Transformações em 3D, selecione o objeto desejado e clique no ícone de Transformações em 3D no Inspetor de propriedades.

Novos controles de objeto são exibidos na seção Transformar, e o ícone do cursor  é exibido no centro do objeto selecionado atualmente. Mova o ícone  para a esquerda, direita, cima e baixo. 
Você pode modificar os valores de eixo no Inspetor de propriedades ou girar o ícone do cursor  para girar objetos ao longo dos eixos.

Girar objetos ao longo dos eixos X ou Y

Depois que habilitar o ícone de Transformações em 3D no Inspetor de propriedades, siga estas etapas para ajustar a orientação do objeto ao longo dos eixos X e Y:

1. Selecione o objeto que deseja girar. 
2. Insira os valores de orientação no Inspetor de propriedades ou clique e arraste o ícone do cursor  exibido no centro do objeto.
3. Conforme ajustar os valores, você verá os objetos girando em torno dos eixos desejados. 

Aplicar profundidade ao longo do eixo Z

Agora que você sabe como habilitar as Transformações em 3D e girar objetos nos eixos X e Y, continue em frente e experimente como usar a terceira dimensão: o eixo Z. 

Ao criar uma pilha de cartões com perspectiva ou interações de virar cartão, você pode mover objetos no eixo Z para trazer uma sensação de profundidade às camadas. Assista a esta ilustração animada para saber como aplicar profundidade no eixo Z.

Observações importantes

• O ícone de Transformações em 3D apenas exibe ou oculta os controles e o cursor. Ele não ajuda a criar um ambiente 3D nem desativa transformações já aplicadas em seu design.
  

• Ao redimensionar objetos que têm rotação X ou Y, o valor da profundidade Z também muda automaticamente, resultando na reordenação do conteúdo. Por exemplo, ao criar um grupo de cartões com perspectiva, cada cartão gira no mesmo ângulo, mas em profundidades diferentes. Se você selecionar esses cartões ao mesmo tempo e decidir redimensioná-los, eles serão redimensionados como deseja. Porém, o valor Z mudará para cada cartão e fará com que o conteúdo seja reordenado.

• Ao alterar o valor da profundidade Z de um objeto, o XD não permite o uso de métodos de ordenação de camada, como Trazer para o primeiro plano, Enviar para o último plano e reordenar pelo painel Camadas.

Vídeo: Como trabalhar com Transformações em 3D no XD?

“Com as Transformações em 3D no Adobe XD, você pode simular a profundidade e a perspectiva de objetos em poucos cliques na tela de design”, Dani Beaumont, gerente de produto principal do Adobe XD.

Assista a este vídeo para saber como trabalhar com Transformações em 3D no XD.

Duração: 3 minutos.

Dicas e truques

Agora que você sabe como trabalhar com Transformações em 3D no XD, confira algumas dicas e truques úteis:

• Você pode reverter o objeto para seu estado 2D a qualquer momento. Clique com o botão direito no objeto selecionado e selecione Redefinir transformações em 3D. Você também pode usar os atalhos ⌥⌘T no macOS e Alt + Ctrl + T no Windows para reverter Transformações em 3D.
  
• Você pode exibir ou ocultar os controles de Transformações em 3D. Use os atalhos ⌘T no macOS e Ctrl + T no Windows para exibir ou ocultar Transformações em 3D.

O que vem por aí?

Agora você sabe como habilitar e usar Transformações em 3D em seus designs. Continue em frente e saiba como animá-las e compartilhá-las com designers ou colaboradores para receber feedback.

Tem alguma dúvida ou sugestão?