Figma и неправильные цвета

Если вы работаете на относительно новом Маке, вы возможно замечали, что Фигма не всегда правильно показывает цвета. Давайте это исправим.

У владельцев старых Маков такой проблемы нет, но прочитать пост все равно стоит — рано или поздно с переходом на новый компьютер вас это тоже коснется :)

В чем проблема

Пару-тройку лет назад Маки стали работать в более широком цветовом диапазоне «P3» вместо традиционного «sRGB». Теперь цвета на экране стали более насыщенными, но для нас дизайнеров это создало потенциальные проблемы с цветовыми профилями в графических редакторах.

Какие устройства это затрагивает:

• MacBook Pro 2016 года и новее…
• iMac конца 2015 года и новее…

Если раньше в Фигме с расхождением цветов ничего нельзя было поделать, то весной 2019 года в десктопном приложении Фигмы появился выбор цветового пространства.

Переведите Фигму в режим «sRGB»

По умолчанию параметр цветового пространства выставлен в «Unmanaged». Это значит, что Фигма не управляет цветом, а наследует текущее цветовое пространство компьютера или монитора.

Переведите эту настройку в sRGB. У этого режима меньше всего недостатков.

А чем был плох режим «Unmanaged»?

• Графика в Фигме отображается по большей части перенасыщенной.
• Вставленные картинки из интернета тоже слишком цветастые (для интернета, программ и операционных систем дефолтная среда — sRGB).
• У всех участников команды и между устройствами цвета будут различаться. Ребята на Windows и старых Маках (и даже на новых MacBook Air) не оценят ваши сочные цвета, ведь подавляющая часть экранов расчитана именно на отображение sRGB.
• Фигма все равно экспортирует картинки только в sRGB (пруф из справки Фигмы).
• Фигма все равно в браузере работает только в sRGB, и когда заказчик откроет ваш дизайн в браузере, он увидет не те цвета, что вы задумывали.

Я не смог представить реальных случаев, когда в Фигме стоит работать в режиме «Unmanaged». И не понимаю, почему этот режим стоит по умолчанию.

В режиме «sRGB» все хорошо, но со скриншотами есть проблема (решаемая)

Когда на современном Маке или Айфоне делаем скриншот и вставляем его в Фигму, работающую в режиме «sRGB», такие скриншоты выглядят бледно (справа):

Когда мы делаем скриншот на устройстве, он сохраняется в том цветовом профиле, в котором собственно работает ваш компьютер или телефон. Это разновидности профиля «P3», но под разными именами — «Color LCD» у Макбуков, «iMac» у Аймаков, «Display P3» у Айфонов.

Фигма при вставке картинок с отличающимся цветовым профилем никак не отрабатывает этот момент, хотя могла бы (серьезные графические редакторы предупреждают и могут конвертировать вставляемые картинки под нужное цветовое пространство).

Есть несколько вариантов, как решить эту проблему.

Вариант 1: Быстрое действие

Самый быстрый и удобный способ. Я сделал скрипт в Автоматоре, который конвертирует картинки в sRGB в два клика силами самой macOS.

👉 Скачать быстрое действие «sRGB»

Разархивируйте файлик и кликните по нему для установки.

Активируется через правый клик по картинке → Быстрые действия (Quick Actions) → sRGB.

Что самое крутое — можно выделить пачку скриншотов и все разом сконвертировать в sRGB.

О завершении конвертации можно понять по мигнувшей шестеренке в верхней панели рядом с часами:

Все, можно вставлять скриншот в Фигму с нормальными цветами!

Вариант 2: Утилита ColorSync

Если не хочется ставить скрипт, или под рукой нет полноценного граф.редактора, это тоже хороший способ.

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

Оказалось, что в ней можно конвертировать цветовой профиль картинки, и относительно быстро.

Правый клик по картинке → Открыть в программе → Утилита ColorSync.app

1. В первой выпадашке оставляем «Подогнать к профилю (Match to Profile)».
2. Во второй выпадашке выбираем «Показать (Display)» → «sRGB IEC61966–2.1».
3. Нажимаем «Применить (Apply)» в правой нижней части окна.
4. Сохраняем результат через хоткей CMD+S.

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

Вообще, по логике такое действие напрашивается делать в стандартном просмотрщике Preview.app, но он почему-то не умеет конвертировать профиль, только применять поверх другой, а это совсем не то.

Вариант 3: временный перевод всего Мака в sRGB

Вариант-смекалочка — дурацкий, но работающий. Годится, если предстоит сделать пачку скриншотов, а скрипта или граф.редактора под рукой опять же нет.

1. В настройках macOS переводим дисплей в «sRGB IEC61966–2.1» (для этого надо снять галочку «Профили только этого монитора (Show profiles for this display only)».
2. Делаем нужные скриншоты.
3. Возвращаем систему обратно в дефолтный профиль (нажимаем ту же галочку, чтобы не запутаться в профилях).

Кстати, профиль sRGB IEC61966–2.1 в списках обычно дублируется, потому что один идет в комплекте с macOS, а второй прилетает с программами Adobe.

Еще варианты

• Конвертировать скриншоты в другом граф.редакторе, просмотрщике или пакетном обработчике (тут на ваш вкус).
• Прогонять через оптимизаторы картинок типа ImageOptim (долго, и может сломать цвета).
• Заставить Мак снимать скриншоты в sRGB, покопавшись в Терминале (не факт, что возможно).
• Найти скриншотилку, которая сразу конвертирует скрины в sRGB (знаете такую?).

Эпилог

Мы привели Фигму в проверенное цветовое пространство и научились обходить проблему бледных скриншотов на новых Маках, о которой почему-то не позаботились разработчики Фигмы.

• Есть что добавить по теме? Знаешь более элегантные способы по работе с цветовыми профилями в Фигме? Ждем в комментариях :)
• Хочется вникнуть в тему цветового управления? Вот самый лучший материал, который я встречал по теме (от компании-разработчка Bjango, на английском): часть 1, часть 2, часть 3. Есть и в русском переводе от Awdee.