Saiba como navegar nas diferentes exibições de um link de especificação de design.

O link de compartilhamento para desenvolvimento ficou ainda mais completo com a inclusão de informações interativas de protótipo junto às especificações de design. Clique no ícone Exibir especificações  no link compartilhado para alternar entre a exibição das especificações de design e do protótipo.  A nova experiência oferece as seguintes vantagens: 

  • Agora, os designers podem informar com mais clareza o objetivo do projeto e fornecer aos desenvolvedores todos os recursos necessários em um único link compartilhado.
  • Os desenvolvedores podem entender melhor as interações e os comportamentos esperados e poupar tempo, pois não é necessário alterar constantemente entre links separados de protótipos e de especificações de design. 
  • Os desenvolvedores podem alternar facilmente entre as exibições de grade e de fluxo para ver as especificações de design.

Exibições de grade e de fluxo

Para ter um panorama completo do fluxo de design com todas as informações de layout das pranchetas, você pode alternar entre as exibições de grade e de fluxo

Fácil de navegar, a Exibição de grade é um formato de grade simples das informações de layout das pranchetas, enquanto a Exibição de fluxo mantém o layout das pranchetas e sua arquitetura.

Para navegar usando a Exibição de grade, padrão, clique no nome do link ou no ícone de grade  no canto superior direito. Para alternar entre a Exibição de grade e a Exibição de fluxo, clique no ícone Exibição de fluxo no canto superior direito da tela. 

Exibição de grade
Exibição de grade
Exibição de fluxo
Exibição de fluxo

Na Exibição de grade, você pode:

  • Exibir a representação em miniatura de todas as telas,
  • Ver o número de comentários em uma determinada prancheta,
  • Pesquisar uma prancheta específica pelo nome e
  • Exibir as telas vinculadas de uma determinada prancheta.

Na Exibição de fluxo, você pode:

  • Comunicar a hierarquia do design e do layout e
  • Passar o mouse sobre uma prancheta para ver as pranchetas vinculadas a ela.

Fique à vontade para compartilhar seu feedback sobre essa nova experiência usando a voz do usuário do Adobe XD.

Exibição de especificações

A exibição de especificações mostra os detalhes, as cores, os estilos de caractere e os destinos usados da prancheta. Você pode usar a seta para expandir e recolher seções individuais.

No painel Propriedades, você pode exibir:

  • Detalhes da prancheta, cores exclusivas e estilos de caractere usados nessa prancheta e a prancheta de destino à qual ela está vinculada.
  • Os trechos de código CSS, que os desenvolvedores de design podem copiar e colar diretamente nos códigos.
  • Instâncias nas quais as cores e estilos de caracteres foram usados quando você passa o ponteiro do mouse sobre elas
  • Códigos de cores hexadecimais e rótulos personalizados das cores usadas na prancheta.
  • Detalhes de várias interações, como transições, sobreposições, voz e animação automática. 
  • Comentários relacionados à prancheta. 

Na parte inferior da tela, há várias teclas de setas e um ícone Inicial. A tecla de seta para a esquerda volta para a prancheta anterior, a tecla de seta para a direita avança para a próxima prancheta e o ícone Inicial direciona você para a prancheta inicial.

Para conhecer atalhos de teclado específicos para as especificações de design, consulte Atalhos de teclado.

Observação:

Você pode ver os rótulos personalizados somente se o designer tiver definido os nomes das cores no painel Ativos.

Exibição de especificações
Exibição de especificações

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online