Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Последнее обновление
7 февр. 2023 г.
Узнайте, как просматривать и проверять такие атрибуты как цвет, текст, измерения, состояния компонентов, участки взаимодействия и другое в спецификациях дизайна.
По ссылке на общие технические характеристики проекта можно просмотреть и опробовать прототип, добавить комментарии и отзывы в непосредственном контексте, а также выбрать получение информации об измерениях и технических характеристиках проекта.
Ссылка на технические характеристики проекта открывается по умолчанию в режиме прототипа. Чтобы получить информацию о свойствах и спецификациях, переключитесь на вкладку спецификаций проекта, нажав значок 
на правой панели.
На вкладке спецификаций проекта вы можете выбрать элементы и просмотреть их на холсте, чтобы узнать такие атрибуты, как цвета, текст, измерения, состояния и другие свойства, отображаемые в инспекторе свойств.
Щелкните по значку {}, чтобы перейти на вкладку переменных. Эта вкладка доступна, если дизайнер опубликовал ссылку на технические характеристики проекта в Интернете. Когда дизайнер задал имена переменных для цветов и стилей символов в проекте, вы можете просматривать информацию проектного токена на вкладке переменных.
Ознакомьтесь с рекомендациями по просмотру и сопоставлению атрибутов в спецификациях дизайна.
Сведения с экрана
Когда вы щелкаете за пределами монтажной области, вы попадаете в окно сведений с экрана. В этом представлении можно проверять экран и подробные сведения, например участки взаимодействия.
Сведения с экрана и свойства
A. Сведения об экране: Просмотрите размеры экрана.
B. Цвета: Просмотр цветов, помеченных для экспорта.
C. Свойства сетки макета: Переключение для просмотра сеток.
Для управления прозрачностью цветов используйте ползунок «Непрозрачность».
Примечание
Если вы отметите слой для экспорта в приложении XD, цвета, используемые в этом слое, не будут отображаться в подробном представлении экрана.
Наложения
Щелкните «Участки взаимодействия», чтобы просмотреть детали монтажной области, стили, дизайн и размер области просмотра, положение наложения, цвета, стили символов и целевую информацию для примененного наложения.
Участки взаимодействия
Чтобы просмотреть участки взаимодействия, нажмите и удерживайте клавишу Shift. Чтобы их просмотреть, щелкните по отображаемому артефакту в разделе «Взаимодействия» или щелкните по участкам взаимодействия, удерживая клавишу Shift.
Сведения о слое
Когда вы выбираете слой на монтажной области, вы переключаетесь в режим просмотра сведений о слое. В инспекторе свойств можно посмотреть название слоя и такие свойства, как размеры и внешний вид.
Текст и внешний вид
A. Свойства текста: Выберите строку текста для просмотра свойств текста с единицами измерения по умолчанию, такими как px, pt и dp.
B. Оформление: Просмотр цветов, используемых в объекте или тексте в разделе «Оформление».
Фигуры
Выберите фигуру, чтобы просмотреть ее атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Атрибуты внешнего вида, такие как: цвета, размер рамки, штрих, зазор, штрихи и непрозрачность.
Изображения
Выберите изображение, чтобы просмотреть его атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Непрозрачность.
Видеоролики
Выберите видео, чтобы просмотреть его атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Название изображения плаката.
- Автоматическое воспроизведение, циклическое воспроизведение и настройки звука.
- Если видео нужно обрезать, отображается время, в которое видеоклип должен начинаться и заканчиваться.
- Непрозрачность.
Текст поддиапазона
Наведите указатель мыши на поддиапазоны в текстовом элементе, чтобы выделить подобные поддиапазоны в текстовом элементе.
Гиперссылки
Гиперссылки на объекты
- При выборе объекта на монтажной области вы увидите все его гиперссылки в разделе Взаимодействия инспектора свойств.
- Наведите указатель мыши на гиперссылку в разделе «Взаимодействия», чтобы определить связанный объект на монтажной области.
- Чтобы скопировать URL-адрес гиперссылки в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.
- При нажатии на гиперссылку в разделе «Взаимодействия» откроется ссылка. Чтобы скопировать URL-адрес гиперссылки из раздела «Взаимодействия», щелкните по нему правой кнопкой мыши.
- В разделе «Гиперссылка», если нажать гиперссылку с протоколом, отличным от https или mailto, или без протокола, или с недопустимым доменом, URL-адрес не откроется. Вы увидите сообщение об ошибке в нижней части экрана.
- Если для объекта определено несколько взаимодействий по гиперссылкам, их нельзя скопировать из раздела сведений об объекте. Чтобы скопировать их, щелкните по гиперссылкам правой кнопкой мыши в разделе «Взаимодействия».
Текстовые гиперссылки
- При выборе текстового объекта на монтажной области в инспекторе свойств (и в разделе «Взаимодействия», и в разделе сведений об объекте) будут отображаться все взаимодействия гиперссылки, определенные для этого объекта в целом.
- Вы можете просмотреть взаимодействия гиперссылки, определенные для текстового объекта, так же, как это делается для гиперссылок объекта.
- Когда вы выбираете текст (поддиапазон текста) внутри объекта и этот текст имеет отдельную гиперссылку, в разделе сведений об объекте отображается URL-адрес этой гиперссылки. Однако в разделе «Взаимодействия» по-прежнему отображаются гиперссылка и другие взаимодействия, определенные для объекта.
- Чтобы скопировать URL-адрес гиперссылки поддиапазона текста в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.
Подробнее о гиперссылках в XD см. в разделе Создание гиперссылок.
Фрагменты кода
Код каскадных таблиц стилей
- Чтобы сгенерировать код CSS, выберите в приложении XD в качестве назначения экспорта Интернет в разделе Поделиться > Разработка и опубликуйте спецификации проекта.
- Вы можете просмотреть и скопировать код CSS своего дизайна из раздела фрагментов CSS.
- Чтобы скопировать и вставить фрагмент кода, нажмите и перетащите фрагменты CSS, переключитесь в редактор кода и вставьте.
Код HTML
- Чтобы сгенерировать код HTML и видеофайлы, выберите в приложении XD в качестве места назначения экспорта Интернет в разделе Поделиться > Разработка и опубликуйте спецификации проекта.
- Вы также можете скопировать код HTML из раздела HTML инспектора свойств.
- Чтобы скопировать и вставить фрагмент кода, нажмите и перетащите фрагменты CSS, переключитесь в редактор кода и вставьте.
Состояния компонентов
- Выберите объект на монтажной области. Если выбранный объект является компонентом, вы можете проверить его различные состояния.
- Чтобы просмотреть различные состояния выбранного компонента на монтажной области, щелкните параметры под списком «Компонент» в инспекторе свойств.
- В разделе «Взаимодействия» можно просмотреть взаимодействия, связанные с активным состоянием выбранного компонента.
- Щелкните неактивное состояние компонента в списке, чтобы просмотреть состояния на монтажной области и связанные с ним взаимодействия.
- Если название компонента длинное и удается прочитать только его часть, выберите название в инспекторе свойств и скопируйте его.
Примечание
Можно загрузить все состояния доступного для загрузки компонента. Если в приложении XD дизайнер помечает несколько экземпляров компонента для экспорта, будет экспортирован только последний экземпляр на панели «Слои».
Скрытые слои
- Наведите указатель мыши на определенную область и щелкните правой кнопкой мыши, чтобы отобразить список слоев и его контекстную информацию в этой пиксельной точке.
- Если название группы длинное и удается прочитать только его часть, выберите название в инспекторе свойств и скопируйте его.
Подробнее
Чтобы узнать больше о проверке спецификаций дизайна в XD, посмотрите это видео.
Время просмотра: 8 минут
Что дальше?
Мы познакомили вас со способами просмотра и проверки спецификаций дизайна. Сделайте шаг вперед и узнайте, как просматривать спецификации дизайна и извлекать ресурсы из спецификаций дизайна.
Есть вопрос или идея?
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
