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.

tokens de design no xd

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.

modo de design
A. Painel Cor B. Clique duas vezes para adicionar um novo nome 

No modo de Design:

  1. Navegue até o painel Ativos. Clique em + para exibir as cores e os estilos de caractere. 
  2. 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.

compartilhar tokens de design
Em Exibir configurações, selecione Desenvolvimento

No modo de Compartilhamento:

  1. 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.
  2. 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

view-design-tokens
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 exibir os tokens de design e seus códigos hexadecimais, 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

baixar tokens de design
Baixar os tokens de design

Para baixar os tokens de design de um link compartilhado de especificações de design:

  1. Abra o link compartilhado em um navegador.
  2. Navegue até os trechos de código CSS ou selecione o ícone { }.
  3. Clique em Baixar CSS para baixar essas variáveis como trechos de código CSS contendo os tokens de design.
  4. 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?

ask_community

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.