обложка телеги 1160x620 - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Многие дизайнеры (и далеко не новички) используют Color Styles просто как палитру для хранения цветов, а потом тратят кучу времени на правки, если какой-то отдельный цвет не нравится заказчику. Особенно остро встаёт проблема, когда появляется задача перекрасить интерфейс в новомодную тёмную тему.

Дисклеймер. Это статья не про тёмную тему и как её делать, а про систему цветов в дизайне интерфейсов. НО, если тебе интересно, в конце статьи я уделю немного времени этой теме.

Как обычно это происходит?

Пришла идея, что нужно сделать приложение только в тёмной теме, а ты уже нарисовал в светлой. Думаешь, ну ладно, сейчас поменяем белый на чёрный, а чёрный на белый и готово.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Вот какая тёмная тема получилась в Яндекс.Такси:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

И ты такой смотришь, вроде бы всё хорошо, но есть маленькие артефакты:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

А в примере всего один экран приложения, что будет если их десятки или сотни? Небольшими дефектами дело не обойдётся…

Окей, а как правильно тогда?

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

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

Ссылка на этот плагин и файл figma из этой статьи, находятся у меня в Telegram-канале. Заходи и сверяйся параллельно чтению.

Сейчас всё расскажу, только покажу ещё одну проблему палитры

Допустим ты дизайнер в Яндекс.Такси (мало ли), вот вы ещё на стадии отрисовки макетов приложения, где-то на 70% позади. Тут приходит к тебе аналитик, показывает итоги исследования и говорит: «Пользователи не считывают этот элемент»

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Что ты сделаешь?

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?
Теперь всё читается, но это уже не Яндекс.Такси, а «Морковь.Такси»…

В общем, эта проблемка происходит из-за того, что мы разделяем цвета по оттенкам. Если нам нужен белый, то мы создаём в стилях #FFF цвет, называем его White и переиспользуем его везде, где можно и нельзя.

А как тогда делать-то?

Чтобы избежать этих проблем, нужно использовать систему цветов, которую описал гугл в гайде по material. Здесь я покажу её упрощённую версию, с которой будет легче начать. 

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Основной принцип этой системы – стиль описывает не носимый им цвет, а его роль в интерфейсе.

В примере выше чёрный цвет используется на Primary элементах, поэтому мы делаем стиль OnPrimary и задаём ему значение #000.Теперь, если тебе нужно изменить чёрный цвет надписи на кнопках, ты изменяешь не чёрный стиль, а конкретный OnPrimary, и не важно какого цвета он будет или был до этого, другие чёрные текста, например OnSurface, останутся чёрными.

То есть в идеальном мире, у вас не должно остаться стилей с названиями цветов(blue, white, black и т.д), а только параметры типа:

  • Background
  • Surface
  • OnSurface
  • Error
  • Primary
  • и прочие

Ты быстро начнёшь жонглировать этими понятиями, главное немного попрактиковаться.

Это сколько же одинаковых чёрных стилей мне создавать?!

Итоговое количество стилей будет на ≈30% больше обычного. Да, там будут повторяющиеся HEX значения, но создание «одинаковых» стилей стоит сэкономленных нервов и времени в процессе работы.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?
​Сравнение палитры с системой

Не бойся создавать дополнительные стили(если они нужны), так твои макеты станут более гибкими. В одном из последних проектов у меня получилось вот такое количество стилей:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?

Ах, да. Тёмная тема

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

В догонку к этим цветовым парам:
На днях мне скинули статью, где автор рассказывает о своём новом плагине, который может заменять заготовленные цветовые пары друг между другом, получился супер быстрый генератор тёмной темы. Потестил, огонь, спасибо тебе, Alex Dyakov!

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему 90% дизайнеров юзают Color Styles в Figma неправильно?
Напомню, как это быстро​

Спасибо что дочитал, вот материалы из статьи:

  • Figma-файл, в котором ты можешь потрогать систему цветов
  • Удобный плагин для переключения на тёмную тему от Alex
  • А вот мой ламповый Telegram–канал, где я делюсь и другими мыслями по дизайн-системам

А если остались вопросы, пиши в комментарии или в личку telegram, bye!)

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Все, что вам нужно знать о сетках в Figma

Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел,…

Figma Tips & Tricks – сверхмощный рабочий процесс

В статье собран список самых последних и самых удобных комбинаций клавиш и техник Figma