Exibir e inspecionar especificações de design

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 informações e as informações da especificação de design, clique no ícone  na barra direita.

Ao alternar para a guia de especificações, você pode passar o mouse sobre 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.

 

Detalhes e propriedades da tela

A. Detalhes da tela: selecione um objeto para inspecionar as medidas e o espaçamento.

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

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

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. 

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

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. 

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.

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. 

Trechos de CSS

  • Para gerar o código CSS, selecione o destino de saída como Web na janela Compartilhar para 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.

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.

No momento, se você marcar um componente para exportação, somente o estado ativo do componente ficará disponível para download. Como solução, você pode exportar e compartilhar os ativos do XD.

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.

Logotipo da Adobe

Fazer logon em sua conta