Хватит рисовать темную тему! Генерируйте её автоматически в Figma.

Ранее я рассказывал, как мы используем API Figma для доставки графики и стилей напрямую в код. Теперь я расскажу как мы в Яндекс.Картах автоматизировали работу с темной темой через собственный плагин, используя стили из общей дизайн-библиотеки. Из этой статьи вы научитесь делать так же, а еще узнаете почему парная семантическая палитра в продукте лучше обычной.

Переход от палитры к цветовым парам

Сейчас все или уже поддерживают, или собираются добавлять поддержку темной темы. Наше приложение используют для навигации миллионы людей днем и ночью, и в картах темная тема есть давно. Раньше при работе с темной темой мы использовали систему правил применения палитры, но совсем недавно пересмотрели этот подход.

Изначально у нас была палитра стилей и некий набор правил для перекраски. Приведу простой пример с текстом.

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

Обсудив, мы решили использовать систему пар стилей, сгруппированных по типу объекта. Получилось разделить все на 4 семантические группы: текст, фон, иконки, кнопки. Теперь не нужно думать о допустимой вариации стиля для определенного типа объекта. Семантическая палитра позволяет делать немного больше, если у вас есть дневная и ночная тема 🙂

Генерация темной/светлой темы через плагин

Что может быть скучнее тыканья по объектам и задания им нужного цвета? Для того, чтобы перекрасить несложный макет, может понадобиться минимум 5-10 минут. Я подумал, что было бы неплохо автоматизировать этот процесс. Чтобы проверить гипотезу, я написал плагин с фиксированными стилями. Оказалось что у этого решения масса недостатков: все стили должны быть уже использованы в макете, любое изменение стиля в дизайн-библиотеке меняло его id и надо было вручную вносить изменения в код, такое решение очень тяжело поддерживать.

Позже выяснилось, что уже существуют плагины, которые могут перекрашивать объекты в разные стили. Но они мне не подошли по ряду причин:

• Themer. Нужно регистрироваться на стороннем сервисе. Нужно вручную указывать правила для перекраски цветов. Так и не понял работает ли он c дизайн-библиотеками, плагин завис и больше не работает у меня.
• Lights. Работает только внутри одного файла, без возможности использовать цвета из общей дизайн-библиотеки. Мы в Картах используем только стили из общей либы и локальных у нас не бывает.

Также эти плагины не позволяли гибко использовать нейминг, который мы хотим. Группировка в фигме осуществялется через слэш, в случае с плагином Lights нужно было обязательно использовать Light /или Dark / в начале. А это значит что фигма будет отображать всего лишь две группы стилей.

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

Плагин для генерации темной/светлой темы

Интерфейс состоит из трёх пунктов:

• Dark mode. Перекрашивает любой выделенный объект в ночую тему, если стиль содержит в имени [day] и имеет аналог [night].
• Light mode. Работает аналогично “Dark mode”, но в обратную сторону.
• Save styles. Используется для работы с дизайн-библиотеками. Плагин получает стили из документа и хранит у себя. Т.е. вам нужно вызвать “Save styles” в файле вашей дизайн-библиотеки. Затем вернуться в любой файл с подключенной либой и все будет работать. Но плагин работает и с локальными стилями, и с библиотечными одновременно, если это нужно.

Для работы перекраски стили должны содержать в имени [day] для светлой темы, и [night] для темной. Вы можете называть и группировать стили как хотите. Главное наличие [day] или [night], не важно в начале, в середине или в конце имени. Ниже пример пар стилей для текста:

На выходе: например если наш объект имеет Text [day] / Primary, то перекрашиваем его в Text [night] / Primary. И так для каждого объекта.

Как это работает

В основе плагина лежат три метода:

• getLocalPaintStyles — Получение стилей из текущего файла
• setAsync и getAsync — Запись и чтение в local storage
• importStyleByKeyAsync — Импорт стиля из библиотеки

Все плагины в Figma могут работать только внутри одного документа, getLocalPaintStyles возвращает лишь локальные стили файла. Доступ к стилям из дизайн-библиотеки можно получить только зная их ключи, через функцию importStyleByKeyAsync.

Это целая проблема для нас, потому что внутри команды мы используем только стили из библиотек. Сначала я думал использовать Figma API и ходить в библиотеку через токен для получения стилей, но это не очень хорошо с точки зрения безопасности, да и сама Figma не рекомендует так делать. Потом я придумал, что можно использовать local storage самой Figma для хранения стилей, а точнее их ключей. Ключи получаем через getLocalPaintStyles в файле библиотеки, именно это и происходит при “Save styles”.

Для заливки объекта необходимо присвоить style.id в object.fillStyleId, но при обновлении стиля в дизайн-библиотеке изменяется и его id. Приходится получать актуальные состояния стилей через функцию importStyleByKeyAsync при каждом запуске.

Выше пример импорта стиля через ключ и получение его id для заливки объекта. Такая система независима от изменений в дизайн-библиотеке. Даже если изменить имя или цвет у стиля — все будет работать.

Если интересно, то смотрите код плагина в моем github. Плагин доступен всем в сторе Figma.

Итог

• Каждый раз генерируя из светлой темы темную мы увидим есть ли ошибки в макете, ведь элемент с неправильно заданным цветом не перекрасится или будет выглядеть плохо.
• Благодаря автоматическому экспорту из Figma, разработчики используют ту же семантическую палитру. Это экономит кучу времени дизайнерам, разработчикам, ребятам из тестирования.