Guia do Usuário Cancelar

Exibir e inspecionar especificações 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 ver e inspecionar atributos como cores, texto, medidas, estados de componentes, realces de interação e muito mais nas especificações de design.

Em um link compartilhado de especificações de design, você pode exibir e testar o protótipo, adicionar comentários e feedback contextualmente e escolher obter informações das medidas e das especificações de design.

Guias no link de especificações de design
Guias no link de especificações de design

Por padrão, o link das especificações de design é aberto no modo de Protótipo. Para obter as propriedades e informações de especificações, mude para a guia de especificações de design clicando no ícone  na barra direita.

Ao alternar para a guia de especificações de design, você pode selecionar os elementos e inspecioná-los na tela para obter atributos como cores, texto, medidas, estados e outras propriedades exibidas no Inspetor de propriedades.

Clique no ícone {} para mudar para a guia Variáveis. Esta guia está disponível quando o designer publica um link de especificações de design para a Web. Quando o designer define nomes de variáveis para cores e estilos de caracteres em um design, você pode ver as informações do token de design na guia Variáveis.

Leia mais para saber como ver e corresponder os atributos nas especificações de design.

Exibição de detalhes da tela

Ao clicar fora de uma prancheta, você estará na exibição de detalhes da tela. Nesta exibição, é possível inspecionar a tela e detalhes como destaques de interação.

Detalhes e propriedades da tela

A. Detalhes da tela: veja as dimensões da tela.

B. Cores: veja as cores marcadas para exportação.

C. Propriedades da grade de layout: alterne para ver as grades.

Use o controle deslizante Opacidade para controlar a transparência das cores.

Observação:

Se você marcar uma camada para exportação no aplicativo do XD, as cores usadas nessa camada não aparecerão na exibição de detalhes da tela.

Sobreposições

Clique em Realces de interação para ver os detalhes da prancheta, estilos, tamanho do design e do visor, local da sobreposição, cores, estilos de caractere e informações sobre o público alvo para a sobreposição aplicada. 

Destaques de interação

Pressione e segure a tecla Shift para exibir os destaques de interação. Para inspecioná-los, clique no artefato exibido na seção Interações ou clique nos destaques de interação segurando a tecla Shift. 

Exibição de detalhes da camada

Ao selecionar uma camada de uma prancheta, você alterna para a exibição de detalhes da camada. No Inspetor de propriedades, é possível exibir o nome da camada e propriedades como dimensões e aparência.

Texto e aparência

A. Propriedades do texto: selecione uma linha de texto para ver as propriedades de texto anexadas a unidades padrão, como px, pt e dp.

B. Aparência: veja as cores usadas em um objeto ou em um texto na seção Aparência. 

Formas

Inspecionar formas

Selecione uma forma para inspecionar seus seguintes atributos:

  • Largura, altura e rotação.
  • Atributos de aparência, como cores, tamanho da borda, traço, lacuna, traços e opacidade.

Imagens

Inspecionar imagens

Selecione uma imagem para inspecionar seus seguintes atributos:

  • Largura, altura e rotação.
  • Opacidade.

Vídeos

Inspecionar vídeo

Selecione um vídeo para inspecionar seus seguintes atributos:

  • Largura, altura e rotação.
  • Nome da imagem do pôster.
  • Reprodução automática, reprodução em loop e configurações de áudio.
  • Se o vídeo for cortado, mostra a hora em que o videoclipe deve começar e terminar. 
  • Opacidade.

Animações Lottie

Inspecionar vídeo

Selecione uma animação Lottie para inspecionar seus seguintes atributos:

  • Largura, altura e rotação.
  • Configurações de reprodução automática e reprodução em loop.
  • Opacidade.
  • Propriedades do CSS.
  • Interações.

Texto de subintervalo

Texto de subintervalo

Passe o cursor do mouse sobre os subintervalos dentro de um elemento de texto para realçar os subintervalos semelhantes dentro do elemento.

Hiperlinks

Hiperlinks de objeto

Inspecionar hiperlinks de objeto

  • Ao selecionar um objeto em uma prancheta, todos os hiperlinks são exibidos na seção Interações do Inspetor de propriedades.
  • Passe o mouse sobre um hiperlink na seção Interações para identificar o objeto associado na prancheta.
  • Para copiar um URL de hiperlink na área de transferência, na seção de detalhes do objeto, clique no hiperlink.
  • Ao clicar em um hiperlink na seção Interações, o link é aberto. Para copiar o URL de hiperlink da seção Interações, clique com o botão direito nele.
  • Na seção Interações, quando você clica em um hiperlink que tem um protocolo diferente de https ou mailto, não tenha um protocolo ou tenha um domínio inválido, a URL não será aberta. Você receberá uma mensagem de erro na parte inferior da tela.
  • Se várias interações de hiperlink forem definidas em um objeto, você não poderá copiá-las da seção de detalhes do objeto. Clique com o botão direito nos hiperlinks na seção Interações para copiá-los.

Hiperlinks de texto

Inspecionar hiperlinks de texto

  • Quando você seleciona um objeto de texto em uma prancheta, o Inspetor de propriedades (as seções Interações e detalhes do objeto) mostra todas as interações de hiperlink definidas para esse objeto como um todo. 
  • É possível inspecionar as interações de hiperlink definidas para o objeto de texto como inspeciona qualquer hiperlink de objeto.
  • Quando você seleciona texto (texto de subintervalo) no objeto e se esse texto tiver um hiperlink separado, a seção de detalhes do objeto refletirá esse URL de hiperlink. Contudo, a seção Interações continua exibindo o hiperlink e outras interações definidas para o objeto.
  • Para copiar um URL de hiperlink de texto de subintervalo na área de transferência, clique nele na seção de detalhes do objeto.

Para saber mais sobre hiperlinks no XD, consulte Criar hiperlinks.

Snippets de código

Código CSS

Inspecionar código CSS

  • Para gerar o código CSS, no aplicativo XD, selecione Exportar para a Web em Compartilhar > Desenvolvimento e publique as especificações de design.
  • Você pode exibir e copiar o código CSS do seu design na seção de trechos de CSS.
  • Para copiar e colar o trecho do código, pressione e arraste os trechos e, depois, alterne para o editor de código e cole-os.

Código HTML

Inspecionar o código HTML de Lottie e vídeo

  • Para gerar o código HTML para Lottie e arquivos de vídeo, no aplicativo XD, selecione Exportar para a Web em Compartilhar Desenvolvimento e publique as especificações de design.
  • Você pode copiar o código HTML da seção HTML do Inspetor de propriedades.
  • Para copiar e colar o trecho do código, pressione e arraste os trechos e, depois, alterne para o editor de código e cole-os.

Estados de componentes

Estados de componentes nas especificações de design
Estados de componentes nas especificações de design

  • Selecione um objeto na prancheta. Se o objeto selecionado for um componente, você poderá inspecionar os estados dele. 
  • Para exibir os diferentes estados do componente selecionado na prancheta, clique nas opções da lista em Componente no Inspetor de Propriedades.  
  • Na seção Interações, você pode exibir todas as interações associadas ao estado ativo do componente selecionado. 

  • Clique nos estados inativos do componente na lista para exibir os estados na prancheta e as interações dele.
  • Se o nome do componente for longo e não for possível lê-lo por completo, selecione o nome no Inspetor de propriedades para copiá-lo.
Observação:

Você pode baixar todos os estados de um componente para download. No aplicativo do XD, se o designer marcar várias instâncias de um componente para exportação, somente a última instância no painel Camadas será exportada.

Camadas ocultas

Camadas ocultas

  • Passe o mouse sobre a área específica e clique com o botão direito do mouse para exibir a lista das camadas e os detalhes contextuais delas naquele ponto de pixel. 
  • Se o nome do grupo for longo e não for possível lê-lo por completo, selecione o nome no Inspetor de propriedades para copiá-lo.

Saiba mais

Para saber mais sobre como inspecionar as especificações de design no XD, assista a este vídeo.
Duração: 8 minutos


O que vem por aí?

Mostramos como exibir e inspecionar as especificações de design. Vá além e aprenda a revisar especificações de design e a extrair ativos das 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.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

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

Adobe MAX 2024

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