Просмотр и проверка спецификаций дизайна

Узнайте, как просматривать и проверять такие атрибуты как цвет, текст, измерения, состояния компонентов, участки взаимодействия и другое в спецификациях дизайна.

По ссылке на общие технические характеристики проекта можно просмотреть и опробовать прототип, добавить комментарии и отзывы в непосредственном контексте, а также выбрать получение информации об измерениях и технических характеристиках проекта.

Вкладки по ссылке на технические характеристики проекта
Вкладки по ссылке на технические характеристики проекта

Ссылка на технические характеристики проекта по умолчанию открывается в режиме прототипа. Чтобы получить информацию о свойствах и технических характеристиках, щелкните значок  на правой панели.

На вкладке технических характеристик вы можете навести указатель мыши на элементы, чтобы выделить их на холсте и получить такие атрибуты как цвета, текст, измерения, состояния и другие свойства, отображаемые в инспекторе свойств.

Щелкните значок, чтобы перейти на вкладку переменных. Эта вкладка доступна, если дизайнер опубликовал ссылку на технические характеристики проекта в Интернете. Когда дизайнер задал имена переменных для цветов и стилей символов в проекте, вы можете просматривать информацию проектного токена на вкладке переменных. 

Ознакомьтесь с рекомендациями по просмотру и сопоставлению атрибутов в спецификациях дизайна.

 

Сведения с экрана и свойства

A. Сведения с экрана. Выберите объект для проверки измерений и интервалов.

B. Цвета. Просмотреть цвета, отмеченные для экспорта.

C. Свойства сетки макета. Переключите, чтобы просмотреть сетки.

Текст и внешний вид

A. Свойства текста. Выделите строку текста, чтобы просмотреть свойства текста, к которым добавлены единицы измерения по умолчанию, такие как пикс., пт. и dp.

B. Внешний вид: Просмотрите цвета, которые используются в объекте или тексте, в разделе «Внешний вид». 

Для управления прозрачностью цветов используйте ползунок «Непрозрачность».

Скрытые слои

Скрытые слои

Наведите указатель мыши на определенную область и щелкните правой кнопкой мыши, чтобы отобразить список слоев и его контекстную информацию в этой пиксельной точке. 

Текст поддиапазона

Наведите указатель мыши на поддиапазоны в текстовом элементе, чтобы выделить подобные поддиапазоны в текстовом элементе.

Наложения

Щелкните «Участки взаимодействия», чтобы просмотреть детали монтажной области, стили, дизайн и размер области просмотра, положение наложения, цвета, стили символов и целевую информацию для примененного наложения. 

Участки взаимодействия

Чтобы просмотреть участки взаимодействия, нажмите и удерживайте клавишу Shift. Чтобы их проверить, щелкните отображаемый артефакт в разделе «Взаимодействия» или щелкните участки взаимодействия, удерживая клавишу Shift. 

Фрагменты CSS

  • Чтобы генерировать код CSS, выберите в качестве назначения вывода «Веб» в окне «Поделиться для разработки» при публикации спецификаций дизайна.
  • Вы можете просмотреть и скопировать код CSS своего дизайна из раздела фрагментов CSS.
  • Чтобы скопировать и вставить фрагмент кода, нажмите и перетащите фрагменты CSS, переключитесь в редактор кода и вставьте.

Состояния компонентов

Состояния компонентов в спецификациях дизайна
Состояния компонентов в спецификациях дизайна

  • Выберите объект на монтажной области. Если выбранный объект является компонентом, вы можете проверить его различные состояния. 
  • Чтобы просмотреть различные состояния выбранного компонента на монтажной области, щелкните параметры под списком «Компонент» в инспекторе свойств.  

  • В разделе «Взаимодействия» можно просмотреть взаимодействия, связанные с активным состоянием выбранного компонента. 
  • Щелкните неактивное состояние компонента в списке, чтобы просмотреть состояния на монтажной области и связанные с ним взаимодействия.

В настоящее время, если вы помечаете компонент для экспорта, для загрузки будет доступно только активное состояние компонента. В качестве обходного пути можно экспортировать и публиковать ресурсы из XD.

Подробнее

Хотите узнать больше о просмотре характеристик проектов в XD? Посмотрите это видео.
Продолжительность: 8 минут

Что дальше?

Мы познакомили вас со способами просмотра и проверки спецификаций дизайна. Сделайте шаг вперед и узнайте, как просматривать спецификации дизайна и извлекать ресурсы из спецификаций дизайна.

Есть вопрос или идея?

Спросите сообщество

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Логотип Adobe

Вход в учетную запись