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
14/04/2022
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
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 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
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?
Adobe MAX:
a conferência da criatividade
14 a 16 de outubro, Miami Beach e online
Adobe MAX
A conferência da criatividade
14 a 16 de outubro, Miami Beach e online