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.
Última atualização em
05/08/2021
Saiba como usar tokens de design para atribuir nomes personalizados a cores e estilos de caractere.
Você pode adicionar tokens de design no Adobe XD para fornecer nomes comuns personalizados para cores e estilos de caractere presentes no painel Ativos.
Com os tokens de design, você não precisa se lembrar de códigos hexadecimais longos e complexos e trechos de CSS de seus ativos. Basta adicionar nomes mais simples que são fáceis de identificar.
Ao publicar sua especificação de design e compartilhá-la com outros colaboradores, os nomes personalizados continuam visíveis para eles.
Se você não atribuir variáveis personalizadas, o Adobe XD criará automaticamente um nome e uma classe exclusivos usando as propriedades da cor e do estilo de caractere e prefixos sem nome.
Antes de continuar
Verifique se:
- Você está familiarizado com especificações de design e sistemas de design.
- Você compartilhou as convenções de nomenclatura comuns para cores e estilos de caractere com seus desenvolvedores.
Criar tokens de design
Você pode criar tokens de design para uma nova prancheta ou uma prancheta existente em que já tiver adicionado cores e estilos de caractere.
No momento, o Adobe XD não permite renomear a fonte, alterar o tamanho ou outras propriedades das fontes.
A. Painel Cor B. Clique duas vezes para adicionar um novo nome
No modo de Design:
- Navegue até o painel Ativos. Clique em + para exibir as cores e os estilos de caractere.
- Clique duas vezes no nome padrão do ativo e digite um novo nome. Os nomes são usados para criar variáveis e classes correspondentes para as cores e os estilos de caractere.
O XD cria automaticamente nomes para as cores e os estilos de caractere que não foram renomeados, e os nomes geralmente começam com –unnamed.
Compartilhar tokens de design
Após criar os tokens de design, você poderá compartilhá-los com os desenvolvedores pelas especificações de design.
?$pjpeg$&jpegSize=200&wid=934 "Share-(Updated)")
No modo de Compartilhamento:
- No menu suspenso Exibir configuração, selecione Desenvolvimento.
Confira se a opção Exportar para a Web está selecionada, pois o recurso de compartilhamento de link está disponível apenas para links de especificações de design que foram exportados para a Web. - Clique em Criar link. Copie o link gerado e compartilhe-o com desenvolvedores. Para obter mais informações, consulte Compartilhar protótipos de design.
Para verificar o link criado no modo de Compartilhamento, consulte Exibir tokens de design.
Exibir tokens de design
?$pjpeg$&jpegSize=200&wid=751 "View-in-Link(Updated)")
A. Exibir especificações B. Exibir variáveis
Para exibir os tokens de design em um link compartilhado de especificações de design, abra o link compartilhado em um navegador e faça o seguinte:
- Para visualizar o token de design e seu código hexadecimal, clique em </>. O painel exibe os tokens de design correspondentes. Passe o mouse sobre os tokens de design para exibir seus códigos hexadecimais.
- Para exibir as variáveis, clique em { }.
Baixar tokens de design
Para baixar os tokens de design de um link compartilhado de especificações de design:
- Abra o link compartilhado em um navegador.
- Navegue até os trechos de código CSS ou selecione o ícone { }.
- Clique em Baixar CSS para baixar essas variáveis como trechos de código CSS contendo os tokens de design.
- Após baixá-los, copie e cole os trechos de código em seu código de implementação.
Saiba mais
Para saber mais sobre tokens de design, assista a este vídeo.
Duração: 4 minutos
O que vem por aí?
Você teve uma visão geral sobre criação e compartilhamento de tokens de design com seus colaboradores. Continue em frente e saiba como inspecionar especificações de design.
Tem alguma dúvida ou sugestão?
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
