Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Узнайте, как просматривать и проверять такие атрибуты как цвет, текст, измерения, состояния компонентов, участки взаимодействия и другое в спецификациях дизайна.
По ссылке на общие технические характеристики проекта можно просмотреть и опробовать прототип, добавить комментарии и отзывы в непосредственном контексте, а также выбрать получение информации об измерениях и технических характеристиках проекта.
Ссылка на технические характеристики проекта по умолчанию открывается в режиме прототипа. Чтобы получить информацию о свойствах и спецификациях, переключитесь на вкладку спецификаций проекта, нажав значок на правой панели.
На вкладке спецификаций проекта вы можете выбрать элементы и просмотреть их на холсте, чтобы узнать такие атрибуты, как цвета, текст, измерения, состояния и другие свойства, отображаемые в инспекторе свойств.
Щелкните по значку {}, чтобы перейти на вкладку переменных. Эта вкладка доступна, если дизайнер опубликовал ссылку на технические характеристики проекта в Интернете. Когда дизайнер задал названия переменных для цветов и стилей символов в проекте, вы можете просматривать информацию проектного токена на вкладке переменных.
Ознакомьтесь с рекомендациями по просмотру и сопоставлению атрибутов в спецификациях дизайна.
Сведения с экрана
Когда вы щелкаете за пределами монтажной области, вы попадаете в окно сведений с экрана. В этом представлении можно проверять экран и подробные сведения, например участки взаимодействия.
Сведения с экрана и свойства
А. Сведения с экрана: посмотреть размеры экрана.
B. Цвета: просмотрите цвета, отмеченные для экспорта.
C. Свойства сетки макета: переключите, чтобы просмотреть сетки.
Для управления прозрачностью цветов используйте ползунок «Непрозрачность».
Если вы отметите слой для экспорта в приложении XD, цвета, используемые в этом слое, не будут отображаться в подробном представлении экрана.
Наложения
Щелкните «Участки взаимодействия», чтобы просмотреть детали монтажной области, стили, дизайн и размер области просмотра, положение наложения, цвета, стили символов и целевую информацию для примененного наложения.
Участки взаимодействия
Чтобы просмотреть участки взаимодействия, нажмите и удерживайте клавишу Shift. Чтобы их просмотреть, щелкните по отображаемому артефакту в разделе «Взаимодействия» или щелкните по участкам взаимодействия, удерживая клавишу Shift.
Сведения о слое
Когда вы выбираете слой на монтажной области, вы переключаетесь в режим просмотра сведений о слое. В инспекторе свойств можно посмотреть название слоя и такие свойства, как размеры и внешний вид.
Текст и внешний вид
A. Свойства текста. Выделите строку текста, чтобы просмотреть свойства текста, к которым добавлены единицы измерения по умолчанию, такие как пикс., пт. и dp.
B. Внешний вид. Просмотрите цвета, которые используются в объекте или тексте, в разделе «Внешний вид».
Фигуры
Выберите фигуру, чтобы просмотреть ее атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Атрибуты внешнего вида, такие как: цвета, размер рамки, штрих, зазор, штрихи и непрозрачность.
Изображения
Выберите изображение, чтобы просмотреть его атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Непрозрачность.
Видеоролики
Выберите видео, чтобы просмотреть его атрибуты, описанные ниже.
- Ширина, высота и вращение.
- Название изображения плаката.
- Автоматическое воспроизведение, циклическое воспроизведение и настройки звука.
- Если видео нужно обрезать, отображается время, в которое видеоклип должен начинаться и заканчиваться.
- Непрозрачность.
Текст поддиапазона
Наведите указатель мыши на поддиапазоны в текстовом элементе, чтобы выделить подобные поддиапазоны в текстовом элементе.
Гиперссылки
Гиперссылки на объекты
- При выборе объекта на монтажной области вы увидите все его гиперссылки в разделе Взаимодействия инспектора свойств.
- Наведите указатель мыши на гиперссылку в разделе «Взаимодействия», чтобы определить связанный объект на монтажной области.
- Чтобы скопировать URL-адрес гиперссылки в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.
- При нажатии на гиперссылку в разделе «Взаимодействия» откроется ссылка. Чтобы скопировать URL-адрес гиперссылки из раздела «Взаимодействия», щелкните по нему правой кнопкой мыши.
- В разделе «Гиперссылка», если нажать гиперссылку с протоколом, отличным от https или mailto, или без протокола, или с недопустимым доменом, URL-адрес не откроется. Вы увидите сообщение об ошибке в нижней части экрана.
- Если для объекта определено несколько взаимодействий по гиперссылкам, их нельзя скопировать из раздела сведений об объекте. Чтобы скопировать их, щелкните по гиперссылкам правой кнопкой мыши в разделе «Взаимодействия».
Текстовые гиперссылки
- При выборе текстового объекта на монтажной области в инспекторе свойств (и в разделе «Взаимодействия», и в разделе сведений об объекте) будут отображаться все взаимодействия гиперссылки, определенные для этого объекта в целом.
- Вы можете просмотреть взаимодействия гиперссылки, определенные для текстового объекта, так же, как это делается для гиперссылок объекта.
- Когда вы выбираете текст (поддиапазон текста) внутри объекта и этот текст имеет отдельную гиперссылку, в разделе сведений об объекте отображается URL-адрес этой гиперссылки. Однако в разделе «Взаимодействия» по-прежнему отображаются гиперссылка и другие взаимодействия, определенные для объекта.
- Чтобы скопировать URL-адрес гиперссылки поддиапазона текста в буфер обмена, нажмите гиперссылку в разделе сведений об объекте.
Подробнее о гиперссылках в XD см. в разделе Создание гиперссылок.
Фрагменты кода
Код каскадных таблиц стилей
- Чтобы сгенерировать код CSS, выберите в приложении XD в качестве назначения экспорта Интернет в разделе Поделиться > Разработка и опубликуйте спецификации проекта.
- Вы можете просмотреть и скопировать код CSS своего дизайна из раздела фрагментов CSS.
- Чтобы скопировать и вставить фрагмент кода, нажмите и перетащите фрагменты CSS, переключитесь в редактор кода и вставьте.
Код HTML
- Чтобы сгенерировать код HTML и видеофайлы, выберите в приложении XD в качестве места назначения экспорта Интернет в разделе Поделиться > Разработка и опубликуйте спецификации проекта.
- Вы также можете скопировать код HTML из раздела HTML инспектора свойств.
- Чтобы скопировать и вставить фрагмент кода, нажмите и перетащите фрагменты CSS, переключитесь в редактор кода и вставьте.
Состояния компонентов
- Выберите объект на монтажной области. Если выбранный объект является компонентом, вы можете проверить его различные состояния.
- Чтобы просмотреть различные состояния выбранного компонента на монтажной области, щелкните параметры под списком «Компонент» в инспекторе свойств.
- В разделе «Взаимодействия» можно просмотреть взаимодействия, связанные с активным состоянием выбранного компонента.
- Щелкните неактивное состояние компонента в списке, чтобы просмотреть состояния на монтажной области и связанные с ним взаимодействия.
- Если название компонента длинное и удается прочитать только его часть, выберите название в инспекторе свойств и скопируйте его.
Можно загрузить все состояния доступного для загрузки компонента. Если в приложении XD дизайнер помечает несколько экземпляров компонента для экспорта, будет экспортирован только последний экземпляр на панели «Слои».
Скрытые слои
- Наведите указатель мыши на определенную область и щелкните правой кнопкой мыши, чтобы отобразить список слоев и его контекстную информацию в этой пиксельной точке.
- Если название группы длинное и удается прочитать только его часть, выберите название в инспекторе свойств и скопируйте его.
Подробнее
Хотите узнать больше о просмотре характеристик проектов в XD? Посмотрите это видео.
Время просмотра: 8 минут
Что дальше?
Мы познакомили вас со способами просмотра и проверки спецификаций дизайна. Сделайте шаг вперед и узнайте, как просматривать спецификации дизайна и извлекать ресурсы из спецификаций дизайна.
Есть вопрос или идея?