Guia do Usuário Cancelar

Trabalhar com tokens de design

  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. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  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
    14. Fazer backup ou transferir ativos do XD
  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

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.

share-design-token
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?

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