Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>23 июл 2021</li>

3 <li>0</li>

4 </ul>Пошаговая инструкция, которая поможет грамотно поменять цвета в интерфейсе.

5 Meery Mary для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Рассказываем и показываем, как сделать тёмную тему вашего приложения.

9 Чтобы упростить себе работу, предварительно подготовьте документ в Figma: создайте стили цветов и установите плагин Contrast.

10 Создайте стили цветов с помощью функции Style.Это поможет вам менять одинаковые цвета сразу на всех макетах. Рекомендуем в названия цветов для светлой и тёмной темы добавлять слова light и dark соответственно - это поможет избежать путаницы. Также в названиях важно отражать функцию цвета, чтобы случайно не изменить цвет фона вместо цвета плашек. Например: light-link-color и dark-link-color; light-background и dark-background; light-text-color и dark-text-color.

11 Установите плагин Contrast. Одни и те же цвета на тёмном и светлом фоне работают по-разному, поэтому при проектировании тёмной темы важно следить за контрастом. В Figma это можно делать с помощью плагина Contrast:

12 <ul><li><a>Перейдите на страницу плагина</a>и нажмите Install.</li>

13 <li>Зайдите в Figma и выделите любой объект на макете.</li>

14 <li>Нажмите в верхнем левом углу на иконку , в выпадающем меню перейдите в пункт Plugins и нажмите на Contrast.</li>

15 <li>Откроется окно Contrast, которое показывает контраст между выделенным объектом и фоном. Если у фона несколько цветов, нажмите в окне Contrast на переключатель Enable Smart Sample for layer.</li>

16 </ul>Плагин Contrast показывает контраст между выделенным объектом и его фоном. Изображение: SkillboxСогласно стандарту доступности WCAG, минимальное значение контраста - 7:1. Дизайнеры Google рекомендуют между текстом и фоном добиваться контраста 15,8:1.

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

18 Apple рекомендует использовать в iOS чёрный цвет фона, чтобы контраст элементов интерфейса был выше. Google рекомендует использовать не до конца чёрный цвет #121212, чтобы снизить нагрузку на глаза.

19 Цвет фона выбирайте в зависимости от задачи. Например, если на сайте много текста, то прочесть его весь на чёрном фоне будет сложно:

20 На слегка сероватом фоне воспринимать текст гораздо проще, чем на чёрном. Изображение SkillboxБыстрый способ поменять фон во всём макете

21 Если вам понадобится изменить цвет фона, вы сможете это сделать в два клика, отредактировав стиль.Цвет плашек зависит от "высоты" - чем ближе плашка к пользователю, тем она светлее.

22 В гайдлайнах Apple не сказано, сколько уровней может быть у плашек приложений iOS. Однако дизайнеры компании подготовили шесть стандартных вариантов серого цвета:

23 В системных приложениях Apple также может быть несколько уровней плашек, но чаще используется только один:

24 Скриншот: Skillbox MediaУ приложения для Android может быть девять уровней с разными оттенками серого. Google предлагает менять цвет плашки наложением белого цвета определённой непрозрачности:

25 Градация серых плашек в гайдлайнах Material Design. Изображение GoogleГрадация серых плашек в гайдлайнах Material Design. Изображение GoogleКак высветлить блок по рекомендациям Google

26 <ul><li>Выделите любую плашку на макете, после чего на панели настроек в блоке Fill укажите ей цвет основного фона.</li>

27 <li>На панели настроек в блоке Fill нажмите на плюс, чтобы добавить ещё один цвет.</li>

28 <li>Нажмите на образец дополнительного цвета, в появившейся палитре сделайте его белым и укажите уровень непрозрачности, соответствующий рекомендациям Google.</li>

29 </ul>Быстрый способ поменять цвет плашек в приложении

30 <ul><li>Зажмите Ctrl (⌘) и левой кнопкой мыши выделите на панели слоёв все фреймы с макетами приложения.</li>

31 <li>На панели настроек в блоке Selection Colors найдите цвет, которым залиты ваши плашки. Нажмите на иконку напротив цвета, чтобы открепить стиль. Если у вас нет стилей, переходите в пункт 3.</li>

32 <li>В блоке Selection Colors вместо цвета плашек укажите серый цвет, например, как у плашек Apple - #1C1C1E.</li>

33 <li>В параметре Fill нажмите на иконку и сохраните фон как стиль. Назовите его dark-boxed-color.</li>

34 </ul>Чем темнее фон, тем светлее должны быть цвета элементов интерфейса, поэтому для каждого нужно подобрать пару.

35 Чтобы самостоятельно подобрать пару к цвету из светлой темы для тёмной, воспользуйтесь кодировкой HSL. Она состоит из трёх значений: тон, насыщенность, светлота.

36 Использование кодировки HSL в Figma

37 <ul><li>Выделите любой объект на макете.</li>

38 <li>На панели настроек в блоке Fill нажмите на цвет, чтобы открыть дополнительное меню.</li>

39 <li>В нижней части меню вместо RGB выберите HSL. Значение тона не меняйте, пробуйте уменьшать и увеличивать второй и третий параметры - насыщенность и светлоту. Универсальных формул по подбору цвета нет.</li>

40 </ul>Если не получается подобрать цвета самостоятельно, воспользуйтесь системой Google с градацией от 900 до 50. Дизайнеры компании сделали<a>удобный инструмент</a>, который автоматически создаёт всю палитру. Для этого нужно ввести HEX-код вашего цвета - в Figma его можно найти в блоке Fill на панели настроек.

41 Primary color - основной цвет, Secondary - дополнительный. Буквами P и S выделены цвета, которые вы ввели. Изображение: GoogleВ качестве основного цвета в тёмной теме Google рекомендует использовать тональное значение 200. Но это только рекомендация - если этот тон вам не подходит, пробуйте соседние.

42 Как быстро поменять цвета элементов интерфейса в приложении

43 <ul><li>Зажмите Ctrl (⌘) и левой кнопкой мыши выделите на панели слоёв все фреймы с макетами приложения.</li>

44 <li>На панели настроек в блоке Selection Colors найдите нужный цвет. Нажмите на иконку напротив цвета, чтобы открепить стиль. Если у вас нет стилей, переходите в пункт 3.</li>

45 <li>В блоке Selection Colors замените цвет элементов интерфейса на другой, более светлый.</li>

46 <li>В параметре Fill нажмите на иконку и сохраните фон как стиль. Назовите его dark-ui-color.</li>

47 </ul>Для тёмной темы иконки лучше рисовать не контуром, а использовать заливку. Тогда они сохранят узнаваемость и не будут выглядеть странно:

48 Изображение: AppleМеняем иконку под тёмную тему

49 Для примера посмотрите, как изменить простую иконку щита с галочкой.

50 1. Зажмите клавишу Ctrl (⌘) и дважды кликните по контуру, чтобы открылся векторный редактор:

51 Автор оригинальной иконки -<a>Иван Павлов</a>2. Нажмите на иконку на панели инструментов, удалите весь внутренний контур - выделяйте каждый узел иконки и нажимайте клавишу Delete. Когда контур удалён, нажмите Done на панели инструментов:

52 Автор оригинальной иконки -<a>Иван Павлов</a>3. Сейчас у щита не видно галочки. Чтобы её вернуть, выделите щит и галочку на панели слоёв, затем на панели инструментов нажмите на иконку и в выпадающем меню выберите :

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

54 Автор оригинальной иконки -<a>Иван Павлов</a>А у этой иконки домика дизайнеры Apple дорисовали тень от крыши, чтобы тот не казался монолитным кирпичом:

55 Изображение: AppleВ качестве примера разберём макет банковского приложения, который сделал дизайнер Иван Павлов:

56 Дизайнер -<a>Иван Павлов</a>Начнём с фона. Текста в приложении не очень много, поэтому здесь можно использовать чёрный цвет:

57 Плашки лучше сделать по рекомендациям Apple, так как приложение спроектировано под iPhone. Здесь можно ограничиться самым тёмным цветом - #1C1C1E. Также стоит сразу покрасить чёрный текст в белый:

58 Сейчас серый текст недостаточно контрастен. Чтобы это исправить, нужно сделать серый текст светлее, чтобы коэффициент контраста был равен 7:1 или выше:

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

60 Красный цвет не дотягивает до значения 7:1. А так как красный и зелёный должны работать в паре, менять их тоже нужно парой:

61 Для красоты в графе This month в зелёный и красный можно покрасить не только стрелки, но и числа рядом:

62 Теперь нужно поправить мелкие недочёты: поменять цвет текста на картах с белого на чёрный, поменять цвет логотипа Visa около Matt Hardy с синего на белый и адаптировать иконки. Тёмная тема приложения готова:

63 Следуйте гайдлайнам.Используйте гайдлайны систем, в которых ваше приложение будет работать:

64 <ul><li><a>iOS</a></li>

65 <li><a>macOS</a></li>

66 <li><a>Android</a></li>

67 <li><a>Windows</a></li>

68 </ul>Не относитесь к гайдлайнам как к истине в последней инстанции - это только рекомендации, и их можно игнорировать, если вас они не устраивают. Правда, тогда приложение может выглядеть нестандартно для экосистемы и снизит доверие пользователей.

69 Автоматизируйте процесс. Плагин Dark Mode Magic может автоматически сделать из светлой темы тёмную.

70 Как пользоваться Dark Mode Magic:

71 <ul><li><a>Перейдите на страницу плагина</a>и нажмите Install.</li>

72 <li>Зайдите в Figma и выделите любой макет приложения.</li>

73 <li>Нажмите на макете правой кнопкой мыши, в выпадающем меню перейдите в пункт Plugins и нажмите на Contrast.</li>

74 </ul>Автоматический результат не всегда окажется идеальным. Будьте готовы к тому, что вам придётся доделывать мелкие детали самостоятельно.

75 Используйте насыщенность белого, чтобы выделять слова.У белого текста на чёрном фоне есть особенность - стандартное и полужирное начертания мало чем отличаются. Если вам важно выделить слово, сделайте обычный текст непрозрачным на 80%, а жирный - на 100%. Тогда разница будет очевиднее:

76 Попробуйте эффект "вдавливания".С помощью внутренней тени можно изобразить "вдавленный" объект.

77 <ul><li>Создайте фрейм серого цвета и поместите в него любую фигуру того же цвета. Важно, чтобы фон не был чёрным, иначе тени на нём будет не видно.</li>

78 <li>В блоке Effects на панели настроек нажмите плюс три раза. У появившехся эффектов вместо Drop shadow укажите Inner shadow.</li>

79 <li>У каждой тени укажите значения параметров, как на иллюстрации ниже. Чтобы открыть настроки тени, нажмите на иконку .</li>

80 </ul>Получится вдавленная фигура. Этот эффект можно использовать как элемент стиля для фона или плашек:

81 - Фирменные цвета в интерфейсе.Если клиент просит использовать в тёмной теме цвета своего бренда, сделайте это по методу Google. Только накладывать нужно не белый, а цвет фирменного стиля клиента:

81 + Фирменные цвета в интерфейсе.Если клиент просит использовать в тёмной теме цвета своего бренда, сделайте это по методу Google. Только накладывать ну��но не белый, а цвет фирменного стиля клиента:

82 Иллюстрация: Chethan KVS,<a>prototypr.io</a><a>Самоучитель по Figma</a>

83 Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

84 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>