Экспорт токенов дизайн-системы из Figma в WordPress

Одной из ключевых проблем запуска сайта или серии сайтов в масштабе является обеспечение согласованности дизайна и соответствия системе дизайна. Часто определение дизайн-системы живет в Figma, но вручную реализуется в коде. Если в систему вносятся какие-либо изменения во время разработки или масштабные замены при изменении темы, определение и реализация выходят из синхронизации.

Чтобы решить эту проблему, мы создали инструмент для синхронизации дизайн-систем в Figma с темами WordPress. Мы использовали его на нашем собственном сайте, wpvip.com, и обнаружили, что он значительно упрощает этот процесс, обеспечивая при этом согласованность.

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

Процесс работает следующим образом:

1. Система дизайна определена в документе Figma.
2. Мы используем плагин Figma Tokens для определения токенов дизайна, используемых в Figma.
3. Используя хранилище Figma Token на GitHub, мы экспортируем токены в репозиторий.
4. С помощью инструмента vip-design-system-bridge мы вставляем токены дизайна в WordPress через пользовательский раздел theme.json.
5. В коде и CSS мы используем сгенерированные WordPress классы --wp–custom для ссылки на токены дизайна.

Это упрощает внесение изменений в дизайн-систему и перетемы в код. Когда в Figma вносятся изменения, они синхронизируются с токенами Figma, и мы запускаем инструмент vip-design-system-bridge. Затем токены дизайна обновляются в конфигурации нашей темы без внесения других изменений в код или CSS.

Мы собрали пример системы дизайна и темы, чтобы продемонстрировать процесс перехода от Figma к WordPress. В этом посте мы рассмотрим шаги, чтобы:

1. Сделайте копию примера дизайн-системы.
2. Используйте плагин Figma Tokens для добавления токенов дизайна.
3. Измените токен цвета в Figma и экспортируйте новые токены дизайна.
4. Запустите локальную копию WordPress с менеджером локальной среды VIP, чтобы просмотреть пример темы WordPress.
5. Используйте инструмент vip-design-system-bridge, чтобы обновить тему WordPress с помощью новых токенов дизайна.

Эти ресурсы также помогут вам начать работу:

• Простая система проектной документации в Figma на основе шаблона Material 3 Design Kit.
• Набор токенов дизайна, используемых для интеграции с токенами Figma.
• Пример темы WordPress, настроенной на использование цветов и типографики, предоставленных системой дизайна.

Настроить токены Figma

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

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

1. Получите копию дизайн-системы

В нашем примере мы будем использовать небольшую систему дизайна в Figma на основе шаблона Material 3 Design Kit.

1. Откройте пример дизайн-системы Figma. Мы сделаем локальную копию этого документа для использования с плагином Figma Tokens.

2. Справа от названия документа нажмите стрелку вниз и выберите «Дублировать в черновики»:

3. Во всплывающем окне внизу страницы нажмите кнопку «Открыть»:

2. Подключите токены Figma к токенам дизайна

Мы создали набор токенов дизайна, которые готовы к импорту в документ системы дизайна с помощью токенов Figma. Эти дизайнерские токены были созданы непосредственно в Figma с помощью плагина Figma Tokens. Вот как подключить плагин Figma Tokens к существующим токенам дизайна:

1. Откройте документ Figma из предыдущего шага. В левом верхнем углу страницы нажмите кнопку главного меню и выберите «Плагины» -> «Токены Figma».

2. После запуска Figma Tokens нажмите кнопку «Начать». На следующей странице вы должны увидеть пустой набор токенов:

3. В верхней части плагина перейдите на вкладку «Настройки». В разделе «Хранилище токенов» нажмите кнопку «URL»:

Нажмите кнопку «Добавить новые учетные данные». В поле «Имя» введите любое имя (например, Пример токена). В поле URL введите этот URL:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. Результат должен выглядеть примерно так:

5. В разделе «Хранилище токенов» нажмите кнопку «Локальный документ». Во всплывающем окне подтверждения нажмите «Да, установить локально».

6. Из-за небольшой ошибки в токенах Figma страницу необходимо обновить, чтобы разрешить редактирование токенов, импортированных из URL-адреса. Обратите внимание, что в реальном процессе проектирования токены можно синхронизировать с помощью опции хранилища токенов GitHub — этот шаг необходим только для этого учебного примера.

• После изменения параметра хранения токенов на «Локальный документ» перезагрузите страницу.
• Повторно откройте токены Figma через меню плагина.

7. В Токенах Figma перейдите на вкладку «Токены», чтобы просмотреть все токены. Используя флажки слева, выберите наборы токенов «global», «material-3-color» и «material-3-text». Теперь вы должны иметь возможность просматривать маркеры дизайна типа и цвета на главной панели:

«Глобальный» набор представляет собой полную цветовую палитру и варианты типографики, доступные в дизайн-системе. Набор «material-3-color» содержит именованные цвета токенов дизайна, используемые системой дизайна, например «тема/свет/основной» и «тема/свет/фон». «material-3-text» содержит параметры типографики, используемые дизайн-системой.

Примечание. В этом руководстве для упрощения настройки используется хранилище URL-токенов. В реальном документе системы дизайна вместо этого следует использовать систему хранения токенов с версией, такую ​​​​как «GitHub» или «GitLab». Это позволяет напрямую извлекать токены и публиковать их в репозиторий из Figma.

3. Изменить токен дизайна и экспортировать

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

1. В токенах Figma щелкните набор цветов «material-3-color». Затем в документе Figma в разделе «Светлая тема» выберите блок «Фон» и убедитесь, что в токенах Figma выбран соответствующий токен дизайна:

2. В Figma Tokens щелкните правой кнопкой мыши токен цвета фона и выберите «Редактировать токен». Измените значение на {color.error.70} (или другой маркер цвета палитры по вашему выбору) и нажмите «Обновить»:

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

3. В правом нижнем углу плагина Figma Tokens нажмите «Экспорт». Установите флажок «Все наборы токенов», затем перейдите в нижнюю часть диалогового окна и нажмите кнопку «Экспорт».

Примечание. При использовании версионной системы хранения токенов, такой как «GitHub», изменения токенов можно напрямую отправлять в ветку репозитория, а не загружать через браузер.

Инструменты настройки для WordPress

На следующих двух шагах мы будем использовать экспортированные токены дизайна из Figma для обновления локально запущенной темы WordPress. Для использования этих инструментов требуется некоторый опыт работы с GitHub, запуском команд терминала и npm. Следуйте инструкциям, используя следующие инструменты:
Загрузите или клонируйте копию репозитория vip-design-system-bridge. VIP-клиенты WordPress также могут напрямую использовать свой существующий код WordPress с включенной копией темы токена.

1. Установите инструмент терминала vip dev-env, который используется для запуска копии WordPress и просмотра изменений токенов:

 $ npm install -g @automattic/vip

Примечание. Вам также может потребоваться установить Node.js и Docker Desktop в качестве предварительных условий для vip dev-env. Дополнительную информацию см. в разделе «Предварительные требования» на этой странице документации.

4. Запустите локальную копию WordPress

Чтобы увидеть обновление токенов дизайна, запустите локальную копию WordPress с помощью npm и vip dev-env. Убедитесь, что VIP CLI установлен, а копия репозитория vip-design-system-bridge загружена локально.

1. Загрузив локально папку репозитория vip-design-system-bridge, выполните следующие команды, чтобы создать локальный веб-сайт WordPress:

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

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

 vip dev-env start --slug=token-site

Результат должен выглядеть так:

3. Затем активируйте тему токена, запустив:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

Теперь локальная версия WordPress должна работать с включенной нашей темой токена.

4. Посетите экземпляр WordPress, работающий локально, по адресу http://token-site.vipdev.lndo.site/. Вы должны увидеть страницу WordPress, использующую упрощенную тему пользовательского интерфейса Material 3:

5. Используйте токены для обновления темы WordPress

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

Перейдите к загруженному репозиторию vip-design-system-bridge в терминале и установите зависимости npm для скрипта обработки токенов:

 cd vip-design-system-bridge/ npm install

Затем выполните следующую команду. Обновите –tokenPath, чтобы он соответствовал пути файла tokens.json, загруженного на шаге 3:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

Вот разбивка флагов, используемых в этой команде:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

Когда приведенная выше команда запускается, она должна выдать следующий вывод:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

Теперь, когда токены обновлены в WordPress, посетите http://token-site.vipdev.lndo.site/ или обновите страницу. Вы должны увидеть, что цвет фона изменился на значение токена, назначенное в Figma:

В заключение

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

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

Связанные темы по системам проектирования см. в следующих ресурсах:

Плагин Figma Tokens — Начало работы.

Авторы

Алек Гитчес, старший разработчик программного обеспечения в Automattic

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

Гопал Кришнан, старший разработчик программного обеспечения в Automattic

Гопал работает над раздельным предложением WordPress от WordPress VIP, проявляя интерес к системам дизайна и Гутенбергу. Он живет в Сиднее, Австралия, и недавно переехал из Канады.