Руководство пользователя Отмена

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

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

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

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

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

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

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

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

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

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

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

А. Сведения с экрана: посмотреть размеры экрана.

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

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

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

Примечание.

Если вы отметите слой для экспорта в приложении XD, цвета, используемые в этом слое, не будут отображаться в подробном представлении экрана.

Наложения

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

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

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

Сведения о слое

Когда вы выбираете слой на монтажной области, вы переключаетесь в режим просмотра сведений о слое. В инспекторе свойств можно посмотреть название слоя и такие свойства, как размеры и внешний вид.

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

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

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

Фигуры

Просмотр фигур

Выберите фигуру, чтобы просмотреть ее атрибуты, описанные ниже.

  • Ширина, высота и вращение.
  • Атрибуты внешнего вида, такие как: цвета, размер рамки, штрих, зазор, штрихи и непрозрачность.

Изображения

Просмотр изображений

Выберите изображение, чтобы просмотреть его атрибуты, описанные ниже.

  • Ширина, высота и вращение.
  • Непрозрачность.

Видеоролики

Просмотр видео

Выберите видео, чтобы просмотреть его атрибуты, описанные ниже.

  • Ширина, высота и вращение.
  • Название изображения плаката.
  • Автоматическое воспроизведение, циклическое воспроизведение и настройки звука.
  • Если видео нужно обрезать, отображается время, в которое видеоклип должен начинаться и заканчиваться. 
  • Непрозрачность.

Анимации Lottie

Просмотр видео

Выберите анимацию Lottie, чтобы просмотреть ее атрибуты, описанные ниже.

  • Ширина, высота и вращение.
  • Настройки автоматического и циклического воспроизведения.
  • Непрозрачность.
  • Свойства CSS.
  • Взаимодействия.

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

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

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

Гиперссылки

Гиперссылки на объекты

Просмотр гиперссылок объекта

  • При выборе объекта на монтажной области вы увидите все его гиперссылки в разделе Взаимодействия инспектора свойств.
  • Наведите указатель мыши на гиперссылку в разделе «Взаимодействия», чтобы определить связанный объект на монтажной области.
  • Чтобы скопировать URL-адрес гиперссылки в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.
  • При нажатии на гиперссылку в разделе «Взаимодействия» откроется ссылка. Чтобы скопировать URL-адрес гиперссылки из раздела «Взаимодействия», щелкните по нему правой кнопкой мыши.
  • В разделе «Гиперссылка», если нажать гиперссылку с протоколом, отличным от https или mailto, или без протокола, или с недопустимым доменом, URL-адрес не откроется. Вы увидите сообщение об ошибке в нижней части экрана.
  • Если для объекта определено несколько взаимодействий по гиперссылкам, их нельзя скопировать из раздела сведений об объекте. Чтобы скопировать их, щелкните по гиперссылкам правой кнопкой мыши в разделе «Взаимодействия».

Текстовые гиперссылки

Просмотр текстовых гиперссылок

  • При выборе текстового объекта на монтажной области в инспекторе свойств (и в разделе «Взаимодействия», и в разделе сведений об объекте) будут отображаться все взаимодействия гиперссылки, определенные для этого объекта в целом. 
  • Вы можете просмотреть взаимодействия гиперссылки, определенные для текстового объекта, так же, как это делается для гиперссылок объекта.
  • Когда вы выбираете текст (поддиапазон текста) внутри объекта и этот текст имеет отдельную гиперссылку, в разделе сведений об объекте отображается URL-адрес этой гиперссылки. Однако в разделе «Взаимодействия» по-прежнему отображаются гиперссылка и другие взаимодействия, определенные для объекта.
  • Чтобы скопировать URL-адрес гиперссылки поддиапазона текста в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.

Подробнее о гиперссылках в XD см. в разделе Создание гиперссылок.

Фрагменты кода

Код каскадных таблиц стилей

Просмотр CSS-кода

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

Код HTML

Проверка кода HTML Lottie и видео

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

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

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

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

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

Можно загрузить все состояния доступного для загрузки компонента. Если в приложении XD дизайнер помечает несколько экземпляров компонента для экспорта, будет экспортирован только последний экземпляр на панели «Слои».

Скрытые слои

Скрытые слои

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

Подробнее

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


Что дальше?

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

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

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

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

Получайте помощь быстрее и проще

Новый пользователь?