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

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

Поиск

Последнее обновление 27 окт. 2022 г.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

Наложения

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

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

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

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

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

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

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

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

Фигуры

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

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

Изображения

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

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

Видеоролики

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

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

Анимации Lottie

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

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

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

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

Гиперссылки

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

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

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

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

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

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

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

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

Код HTML

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

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

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

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

Примечание.

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

Скрытые слои

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

Подробнее

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

Что дальше?

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

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

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

Adobe

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

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