Pink Mode: плагины для переключения тем в Figma
Работаешь над продуктом с тёмной и светлой темой? Или даже с несколькими цветовыми темами? В последнее время появилось много плагинов для Figma, которые могут упростить тебе жизнь, а именно помогут автоматически переключаться между ними в процессе дизайна. В этой статье покажу их и сравню в таблице, чтобы помочь выбрать подходящий именно тебе!
Themer
Первопроходцем был Themer, который сделал в своё свободное время Tom Lowry — Designer Advocate в Figma. Сначала всех отпугивает то, что нужно создавать аккаунт в каком-то сервисе для кодеров и давать плагину API ключ от него. Но на деле он хорош и довольно гибок: можно сохранить и использовать сколько угодно тем в любых файлах. К тому же синхронизация позволяет настроить темы одному человеку, а использовать их всей командой.
Том записал подробную видеоинструкцию по настройке тем и их использованию: https://youtu.be/aM8SkksBy3Y. Также несколько месяцев назад Tovi, про-юзер Figma из Китая, опубликовал в Figma Community файл, который отлично подходит для тестов Themer и остальных плагинов из этой категории: https://figma.fun/9PzyQh.
Lights
Плагин Lights вышел осенью прошлого года, но так и не получил популярности. Он позволяет менять только темную на светлую тему и обратно. Причем все стили должны находиться в локальном файле. Выбирает он стили по названию. Строго необходимо, чтобы стиль имел название вида “Light / [имя стиля]” для светлой темы и “Dark / [имя стиля]” для темной. Из-за этого даже в файле Tovi, где все стили локальные, он не работает, если не переименовать стили.
Appearance
Прошло больше полгода с выхода Themer и появился новый годный плагин с более интуитивным интерфейсом: Appearance. Несмотря на то, что он как и Lights позволяет переключаться только между двумя темами, он намного более гибкий. Во-первых, он работает со стилями из библиотек. А мы все любим качественную организацию и храним стили в библиотеках, не так ли? Во-вторых, он позволяет выбирать свои ключевые слова, по которым плагин определяет к светлой или тёмной теме относится стиль.
С Appearance работать очень просто: создаешь нужные стили и публикуешь в библиотеку, выбираешь ключевые слова в настройках, сохраняешь стили командой Save styles. Потом идёшь в файл с макетами, выбираешь фреймы и применяешь стили. Радуешься от того, как классно он работает. К слову, даже ВК рекомендуют использовать его со своей дизайн системой, которую они недавно опубликовали в Figma Community. А создал Appearance дизайнер, который работает в Яндекс.Картах и недавно написал о нём статью.
Dark Mode Switcher
Максимально простой плагин как и Lights, но не настолько придирчив к названиям стилей. Без проблем работает в файле Tovi, где стили имеют названия вида light/[имя], потому что не чувствителен к регистру и ищет только слова light и dark, не обращая внимания на то, где в названии они находятся. Простое и рабочее решение!
→ Установить Dark Mode Switcher
Switor
Принцип действия Switor немного отличается от предыдущих плагинов. Есть две отдельные функции для работы с локальными и библиотечными стилями. Из локальных цветов он создаёт прямоугольники, которые потом можно скопировать и перекрасить. Потом выделяешь перекрашенные и он меняет локальные стили на эти цвета. Использовать эту функцию для смены тем в работе не очень удобно, но она хорошо подходит для быстрого создания новых тем в отдельных файлах. Дублируешь файл со стилями и быстро меняешь их плагином, потом публикуешь тему в библиотеку.
Вот мы дошли и до второй функции: темы из библиотек. С ними всё просто. Запускаешь плагин, он создаёт тему из стилей в файле. Один файл — одна тема! Он не умеет делить локальные стили на отдельные темы. Применять созданные темы можно также одним кликом: Switor заменит все стили в выбранных фреймах на стили из соответствующей темы. Видео демонстрация от создателя плагина: https://youtu.be/9DiGDjLFknE.
Theemo
Скажу честно: я прочитал всю инструкцию и пытался разобраться в нём, но так и не понял его до конца. Единственное, что я точно понял — он нужен, чтобы автоматически менять один стиль относительно другого. Например, один стиль делать темнее другого и при изменении главного стиля, привязанный к нему тоже будет обновляться. Эти связанные стили можно экспортировать, чтобы другие люди могли ими пользоваться. Также он работает в связке с Themer: можно переключать темы и сохранять относительные цвета. Но мне не удалось это использовать.
Dark Mode Magic
Действительно волшебный плагин! Он очень прост, не использует стили, и не даёт возможностей кастомизации. Но на начальных этапах разработки тёмной темы Dark Mode Magic как раз что надо! Выбираешь фрейм и вжух, он инвертирует все цвета внутри по светлоте: светлые цвета становятся темными, темные — светлыми.
Swapper
“Почему все плагины позволяют переключаться только между двумя темами?” — этим вопросом задавался автор, когда создавал этот плагин. Этот плагин находит локальные стили со схожими префиксами (перед слешем в названии) и позволяет переключать выбранные фреймы между этими темами. Максимально просто и полезно! Единственный недостаток — нельзя использовать стили из библиотек. Но плагин пока в бета версии, так что будем надеяться на лучшее! Ещё он позволяет сделать из локальных стилей прямоугольники, и потом обратно из них стили, подобно плагину Switor.
Theme Switcher
Плагин практически идентичен плагину Swapper. Я снизил ему балл гибкости в таблице за мелкие недостатки, которых нет у Swapper: слишком громадное и при этом полупустое окно плагина, необходимость нажимать при каждом запуске кнопку синхронизации с локальными стилями и требование авторов использовать специфичные имена тем вида “тема/использование/название”. Зачем второй слеш мне непонятно, и без него всё работает. У него также есть потенциал реализовать возможность использовать темы из библиотек.
-> Таблица
https://www.notion.so/d7964949f2b3489b84c6c05319722211?v=7a4f93c0082046e39c0b80a716e53b49
Вот и сказочки конец! Надеюсь, что все эти возможности вдохновят тебя наконец добавить “pink mode” в твой продукт!!! 💖 А таблица и статья помогут разобраться и выбрать наиболее подходящий для твоего процесса и продукта плагин.
Если остались вопросы или ты знаешь секрет, как пользоваться Theemo, напиши мне: t.me/zyumbik или nudes@gleb.sexy. Подписывайся на мой канал в Telegram!
— Глеб Сабирзянов