Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Последнее обновление
5 авг. 2021 г.
Узнайте, как использовать проектные токены для назначения пользовательских имен цветам и стилям символов.
В Adobe XD можно добавлять проектные токены, чтобы назначать пользовательские общие названия цветам и стилям символов, расположенным на панели Ресурсы.
Проектные токены избавляют вас от необходимости запоминать длинные и сложные шестнадцатеричные коды и фрагменты CSS для ваших ресурсов. Вы можете присвоить более простые и легко узнаваемые имена.
После того как вы опубликуете свою проектную спецификацию и поделитесь ею с другими участниками проекта, им также будут видны ваши пользовательские имена.
Если не назначить пользовательские переменные, Adobe XD автоматически создает уникальные имя и класс на основе свойств цвета и стиля символов, а также безымянных префиксов.
Прежде чем продолжить
Убедитесь, что выполняются следующие условия.
- Вы знакомы с проектными спецификациями и системами проектирования.
- Вы договорились с разработчиками об общей системе именования цветов и стилей символов.
Создание проектных токенов
Вы можете создавать проектные токены для новой или уже существующей проектной области с уже добавленными цветами и стилями символов.
В настоящее время Adobe XD не позволяет переименовывать названия и размер шрифтов, а также прочие подобные свойства.
A. Панель «Цвет» B. Дважды щелкните, чтобы добавить новое имя
В режиме Проект:
- Перейдите на панель Ресурсы. Щелкните + для просмотра цветов и стилей символов.
- Дважды щелкните название ресурса, заданное по умолчанию, и введите новое имя. Эти имена используются для создания соответствующих переменных и классов для цветов и стилей символов.
Приложение XD автоматически создает имена для цветов и стилей символов, которые не были переименованы. Обычно они начинаются с unnamed.
Как настроить общий доступ к проектным токенам
После создания проектных токенов ими можно поделиться с разработчиками с помощью спецификаций дизайна.
?$pjpeg$&jpegSize=200&wid=934 "Share-(Updated)")
В режиме Общий доступ:
- В раскрывающемся меню Настройка просмотра выберите Разработка.
Убедитесь, что выбран параметр Экспорт в Интернет, потому что функция совместного использования ссылок поддерживается только в ссылках на спецификацию дизайна, которые были экспортированы для Интернета. - Нажмите Создать ссылку. Скопируйте сгенерированную ссылку и поделитесь ею с разработчиками. Дополнительные сведения см. в разделе Предоставление совместного доступа к дизайнам и прототипам.
Чтобы проверить ссылку, созданную в режиме общего доступа, см. раздел «Просмотр проектных токенов».
Просмотр проектных токенов
?$pjpeg$&jpegSize=200&wid=751 "View-in-Link(Updated)")
A. Показать спецификации B. Показать переменные
Чтобы просмотреть проектные токены по общедоступной ссылке на спецификации дизайна, откройте общедоступную ссылку в браузере и выполните следующие действия.
- Чтобы просмотреть токен дизайна и его шестнадцатеричный код, нажмите </>. На панели отображаются соответствующие проектные токены. Наведите курсор мыши на проектные токены, чтобы просмотреть их шестнадцатеричный код.
- Чтобы просмотреть переменные, нажмите { }.
Загрузка проектных токенов
Чтобы загрузить проектные токены по опубликованной ссылке на спецификацию дизайна, выполните следующие действия.
- Откройте опубликованную ссылку в браузере.
- Перейдите к фрагментам кода CSS или выберите значок { }.
- Нажмите Загрузить CSS, чтобы загрузить эти переменные как фрагменты кода CSS, которые также содержат проектные токены.
- После загрузки фрагментов скопируйте и вставьте их в код реализации.
Подробнее
Чтобы узнать больше о проектных токенах, посмотрите это видео.
Время просмотра: 4 минуты
Что дальше?
Мы начали с того, что создали проектные токены и предоставили их заинтересованным лицам. Сделайте следующий шаг — узнайте, как просмотреть спецификации проекта.
Есть вопрос или идея?
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
