Цветовые роли и переменные
Курс «Макет учебного портала в Figma»
Текстовые роли портала «Маршрут» уже различаются по размеру и начертанию. Теперь добавим цвет, сохранив понятность этой иерархии. У цвета есть две задачи: связывать страницы визуально и объяснять назначение элементов. Если все заметные объекты просто окрасить фирменным синим, ссылка, декоративная полоса и сообщение об ошибке станут одинаковыми по смыслу.
Построим небольшую палитру и назначим цветам роли. Тогда изменение акцента не потребует искать каждый синий прямоугольник вручную. При этом система останется простой: нам не нужна огромная библиотека токенов для трёх экранов. Важно научиться различать исходное значение и причину, по которой это значение используется.
Значение цвета и роль
В учебном проекте используем фон #F6F8FB, поверхность #FFFFFF, основной текст #172033, вторичный текст #526079, границу #D7DFEA, акцент #245BCC и текст на акценте #FFFFFF. Эти значения являются собственным примером серии. Не выдаём их за официальную палитру ProfessorWeb; они поддерживают узнаваемый спокойный характер учебного интерфейса.
На странице 01 Foundations создайте образцы и подпишите каждую роль. Название text/primary полезнее, чем dark-1: оно говорит, где применять значение. Название action/primary отличает главную кнопку от фона иллюстрации. При одинаковом числовом цвете смысловые роли всё равно могут оставаться разными, потому что позднее их значения способны разойтись.
Рассмотрим кнопку «Открыть курс». Её фон использует action/primary, а надпись — text/on-action. Описание курса использует text/secondary. Если сделать описание белым только потому, что белый уже присутствует в палитре, оно исчезнет на поверхности карточки. Значение не переносится между элементами без учёта окружающего фона.
Для ошибок добавим роль feedback/error со значением #B42318. Однако в будущей форме поиска ошибку будем обозначать также словами и структурой сообщения. Цвет помогает заметить состояние, но не должен быть единственным носителем информации. Пользователь может различать цвета иначе или смотреть на экран в условиях, где тонкая разница плохо видна.
Сравните карточку на белом фоне и на поверхности страницы. Граница должна отделять соседние области, но не становиться самым заметным объектом. Если каждая карточка выглядит как сообщение об ошибке, проверьте, не применена ли к border роль feedback/error. Смысловое имя позволяет обнаружить такую ошибку быстрее, чем поиск похожего шестнадцатеричного числа. Для фона декора можно использовать отдельную роль accent/soft, не связывая её с цветом основного действия. Тогда изменение декоративной насыщенности не ослабит кнопку.
Коллекция и применение переменной
Откройте Variables и создайте коллекцию Route UI. В текущем интерфейсе вход может находиться в левой навигации; если вид панели отличается, ищите команду по названию, а не по старой позиции значка. Создайте переменные типа Color с именами выбранных ролей. Основные понятия приведены в руководстве переменных Figma.
Выберите фон Desktop/Catalog и примените surface/page. Выберите поверхность пробной карточки и назначьте surface/card. Важно именно связать свойство с переменной, а не повторно ввести шестнадцатеричный код. Во втором случае слой будет выглядеть правильно сейчас, но не изменится вместе с общей ролью. У связи должно быть видимое обозначение в выбранном свойстве.
Измените значение action/primary на другой насыщенный синий и посмотрите, какие элементы обновились. Ожидаем, что изменятся только объекты, использующие эту роль. Если одновременно поменялся основной текст, мы слишком широко применили одну переменную. Верните исходное значение и исправьте назначения. Проверка через временное изменение выявляет связи, которые по внешнему виду трудно заметить.
Текстовые стили и переменные решают разные задачи. Body объединяет типографические параметры, а text/primary задаёт используемый цвет. Не создавайте стиль Body Blue только для одного синего слова, если роль основного абзаца осталась прежней. Чем больше случайных сочетаний входит в названия, тем труднее сохранять систему при следующем изменении.
Семантика и базовая палитра
Когда палитра разрастётся, можно отделить значения blue/600 и gray/900 от ролей action/primary и text/primary. Смысловая переменная тогда ссылается на базовую через alias. Для первого варианта портала прямых значений достаточно, но полезно понять направление зависимости: страница использует смысловую роль, а роль выбирает подходящий цвет из базового набора.
| Уровень | Пример имени | Что объясняет |
|---|---|---|
| Базовое значение | blue/600 |
Место оттенка в палитре |
| Смысловая роль | action/primary |
Назначение цвета в интерфейсе |
| Применение | Фон Button |
Конкретное свойство элемента |
Такая связь позволяет поменять акцент целиком, сохраняя назначение кнопок. Однако нельзя считать, что alias автоматически делает систему понятной. Если surface/card ссылается на blue/600 без объяснения, карточки получатся акцентными по всей площади. Имена помогают выразить решение, но само решение остаётся ответственностью автора макета.
Многорежимные переменные удобны для нескольких тем, но их доступность зависит от плана. В этом курсе обязательный результат — одна светлая тема. Если ваш план поддерживает дополнительные modes, можно создать тёмный вариант как самостоятельное упражнение. Не требуется менять тариф ради выполнения основной серии. Создание и управление коллекциями описаны в актуальной инструкции.
Не назначайте акцент каждой информационной метке только потому, что цвет уже есть в палитре. Если названия технологий, уровень, число уроков и основное действие одинаково синие, внимание распределится между несвязанными объектами. В «Маршруте» цвет действия помогает найти переход, а метаданные остаются нейтральными. Ошибка получает отдельный текст и роль цвета. Когда элемент меняет состояние, сначала определите, какое сообщение должен понять человек, затем применяйте соответствующую роль. Это сохраняет объяснимую связь между значением интерфейса и его оформлением.
Проверка на реальном содержании
Примените роли к длинному заголовку, метаданным «Базовый · 8 уроков» и кнопке. Отойдите от экрана или уменьшите масштаб: основное действие должно оставаться заметным, а вторичный текст — читаемым. Если метаданные исчезают визуально, не решайте проблему увеличением шрифта до заголовочного размера. Сначала оцените слишком слабый цвет и лишнюю конкуренцию окружающих элементов.
Для окончательного выбора контраста потребуются численные измерения и проверка в реализации; здесь мы их не выполняли. Поэтому не объявляем палитру прошедшей аудит доступности. В макете заранее сохраняем текстовые подписи, различимые состояния и место для индикатора фокуса. Это позволит позже проверять конкретные пары цветов и взаимодействия, а не восстанавливать потерянный смысл.
Ожидаемый результат урока — связанная палитра, в которой каждый цвет имеет назначение. При изменении одной роли её элементы обновляются совместно; при смене содержания роли сохраняются. Следующим строительным блоком станет кнопка: там типографика, цвет и пространство соединятся в контейнер, который реагирует на длину надписи.