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

Работа с проектными токенами

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

В Adobe XD можно добавлять проектные токены, чтобы назначать пользовательские общие названия цветам и стилям символов, расположенным на панели Ресурсы.

проектные токены в XD

Проектные токены избавляют вас от необходимости запоминать длинные и сложные шестнадцатеричные коды и фрагменты CSS для ваших ресурсов. Вы можете присвоить более простые и легко узнаваемые имена. 

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

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

Прежде чем продолжить

Убедитесь, что выполняются следующие условия.

  • Вы знакомы с проектными спецификациями и системами проектирования.
  • Вы договорились с разработчиками об общей системе именования цветов и стилей символов.

Создание проектных токенов

Вы можете создавать проектные токены для новой или уже существующей проектной области с уже добавленными цветами и стилями символов.

 В настоящее время Adobe XD не позволяет переименовывать названия и размер шрифтов, а также прочие подобные свойства.

design-mode

A. Панель «Цвет» B. Дважды щелкните, чтобы добавить новое имя 

В режиме Проект:

  1. Перейдите на панель Ресурсы. Щелкните + для просмотра цветов и стилей символов. 
  2. Дважды щелкните название ресурса, заданное по умолчанию, и введите новое имя. Эти имена используются для создания соответствующих переменных и классов для цветов и стилей символов.

 Приложение XD автоматически создает имена для цветов и стилей символов, которые не были переименованы. Обычно они начинаются с unnamed.

Как настроить общий доступ к проектным токенам

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

share-design-token
В меню «Настройки просмотра» выберите пункт «Разработка».

В режиме Общий доступ:

  1. В раскрывающемся меню Настройка просмотра выберите Разработка. 
    Убедитесь, что выбран параметр Экспорт в Интернет, потому что функция совместного использования ссылок поддерживается только в ссылках на спецификацию дизайна, которые были экспортированы для Интернета.
  2. Нажмите Создать ссылку. Скопируйте сгенерированную ссылку и поделитесь ею с разработчиками. Дополнительные сведения см. в разделе Предоставление совместного доступа к дизайнам и прототипам.

Чтобы проверить ссылку, созданную в режиме общего доступа, см. раздел «Просмотр проектных токенов».

 

Просмотр проектных токенов

view-design-tokens

A. Показать спецификации B. Показать переменные 

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

  • Чтобы просмотреть проектный токен и его шестнадцатеричный код, щелкните </>. На панели отображаются соответствующие проектные токены. Наведите курсор мыши на проектные токены, чтобы просмотреть их шестнадцатеричный код.
  • Чтобы просмотреть переменные, нажмите { }

Загрузка проектных токенов

загрузка проектных токенов
Загрузка проектных токенов

Чтобы загрузить проектные токены по опубликованной ссылке на спецификацию дизайна, выполните следующие действия.

  1. Откройте опубликованную ссылку в браузере.
  2. Перейдите к фрагментам кода CSS или выберите значок { }.
  3. Нажмите Загрузить CSS, чтобы загрузить эти переменные как фрагменты кода CSS, которые также содержат проектные токены.
  4. После загрузки фрагментов скопируйте и вставьте их в код реализации.

Подробнее

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

Время просмотра: 4 минуты

Что дальше?

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

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

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

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

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

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