Guia do Usuário Cancelar

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

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

Procurando informações de como simular efeitos em 3D para criar experiências imersivas e interativas no Adobe XD? Você está no lugar certo.

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. 

Trabalhar com Transformações em 3D
Interação de virar criada usando Transformações em 3D

Já utiliza o Adobe XD?

Atualizar seu aplicativo

Confira as Novidades

Experimente

Obter o arquivo de exemplo

.xd; 13 MB

Antes de continuar

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

  • Não é possível editar o espaçamento do preenchimento, das pilhas e da repetição de grade na tela para grupos transformados em 3D. 
  • Não é possível arrastar e soltar para reordenar elementos de uma pilha na tela. Você pode reordenar elementos somente pelo painel Camadas.
  • Ao girar imagens em 3D, pode ocorrer perda de qualidade em algumas imagens.
  • As sombras parecem um pouco diferentes ao visualizar superfícies se os objetos da composição tiverem objetos fixos em pranchetas e grupos com rolagem ou em Transformações em 3D aninhadas.
  • O tamanho de objetos transformados em 3D não muda ao redimensionar um grupo.
  • A edição de vetores e a opção de virar objetos não estão disponíveis para objetos transformados em 3D. 
  • As Transformações em 3D ainda não estão disponíveis nos fluxos de trabalho de exportação/importação de SVG.
  • As Transformações em 3D não podem ser aplicadas a pranchetas, apenas ao seu conteúdo.
  • As Transformações em 3D ainda não estão disponíveis para especificações do desenvolvedor.
  • Ao converter um conteúdo transformado em 3D em um componente principal, ele é revertido automaticamente em 2D.
  • Você pode substituir Transformações em 3D em instâncias de componente, mas não é possível fazer edições globais pelo componente principal.
  • Não é possível aplicar Transformações em 3D dentro de componentes.
  • Ao aplicar Transformações em 3D aos estados Hover ou Tocar, elas são aplicadas a todos os estados do objeto em questão.

Simular profundidade e perspectiva em objetos

Você pode aplicar Transformações em 3D a composições complexas, como grupos de rolagemrepetições de gradepilhaspreenchimento 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.

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.

Habilitar Transformações em 3D

mover o cursor

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. 

Girar o objeto no eixo X

Girar o objeto no eixo X

Posições do objeto selecionado ao longo do eixo horizontal X.

Girar o objeto no eixo Y

Girar o objeto no eixo Y

Posições do objeto selecionado ao longo do eixo vertical Y.

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.

Mover o objeto ao longo do eixo Z

  1. Selecione o objeto desejado.
  2. Passe o mouse sobre o ponto central do ícone do cursor .
  3. O ícone de âncora aparece, e você pode mover o objeto selecionado para cima e para baixo.

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?

Pergunte à comunidade

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.

Logotipo da Adobe

Fazer logon em sua conta