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.
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 de alternância 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 exibir 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.
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.
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.
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, propriedades do modo de mesclagem, sobreposições, voz, interações 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.
Você pode ver os rótulos personalizados somente se o designer tiver definido os nomes das cores no painel Ativos.
Recursos relacionados
Fale conosco
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.