Как выбрать цвет в фигме

Выбор цвета в Figma — это не просто вопрос личных предпочтений, а стратегический этап проектирования, влияющий на восприятие интерфейса, удобство использования и эмоциональный отклик пользователя. Грамотное применение цветовой палитры помогает выстроить визуальную иерархию, улучшить навигацию и усилить брендовую идентичность. В Figma инструменты для работы с цветом продуманы до мелочей: от заливки слоёв до библиотек стилей и переменных.

Основы цвета в Figma: как работает система заливок

Figma предоставляет гибкие инструменты для применения цвета к объектам: фигурам, тексту, обводкам, теням и фонам. Основной способ — использование заливки (Fill), доступной в правой панели свойств. Здесь можно выбрать цвет вручную, указав HEX, RGB, HSL или альфа-канал, либо использовать предустановленные стили.
Цвет в Figma задаётся не только значением, но и типом заливки: сплошной (solid), градиентной (gradient), изображением (image) или видео (video). Для большинства задач дизайна интерфейсов ключевым остаётся solid fill — однородная заливка. При работе с ней важно понимать, как Figma хранит и применяет цветовые значения.
Каждый цвет можно сохранить как Local Style — локальный стиль, который становится доступным во всём файле. Это позволяет быстро применять одинаковые заливки, шрифты, эффекты и обводки. Например, создав стиль «Primary Button / Background», вы сможете применять его к кнопкам, зная, что все они используют один и тот же цвет.

Цветовые значения в Figma поддерживают прозрачность. Альфа-канал (0–100%) позволяет создавать полупрозрачные элементы, что особенно важно для модальных окон, оверлеев и UI-статусов. Например, чёрный цвет с 50% opacity часто используется для затемнения фона при открытии попапов.
При выборе цвета в палитре Figma можно переключаться между различными цветовыми моделями. HEX — самый популярный формат, так как он стандартен для веба. Однако при подборе оттенков удобнее работать с HSL, где легко регулировать насыщенность и яркость. RGB же полезен при точной передаче значений разработчикам.

Инструменты выбора цвета

Figma включает встроенный цветовой пикер с несколькими режимами:

• Цветовой круг — позволяет выбирать оттенок по спектру.
• Слайдеры HSL/RGB — дают точный контроль над параметрами.
• HEX-поле — для ручного ввода кода.
• EyeDropper (пипетка) — позволяет взять цвет с любого элемента на артборде или даже за его пределами (если включена опция).

Как создать и организовать цветовую палитру

Создание цветовой палитры — это первый шаг к системному дизайну. Хорошая палитра должна быть логичной, масштабируемой и соответствовать целям продукта. Начните с определения основных категорий цветов: нейтральные (нейтральные серые, белый, чёрный), основные (brand colors), второстепенные (secondary), акцентные (accent), а также цвета для состояний (success, warning, error, info).
Один из проверенных подходов — методика 8-точечной шкалы. Она предполагает создание плавных переходов между оттенками: например, от светло-серого (50) до почти чёрного (900). Такая система упрощает выбор оттенков для текста, фона и границ, обеспечивая гармоничный контраст.

Для брендовых цветов рекомендуется создавать минимум три оттенка: основной, светлый (для hover) и тёмный (для активного состояния). Это позволяет строить интерактивные компоненты без необходимости каждый раз подбирать цвет «на глаз».

Организация палитры в Figma

Лучше всего хранить цветовую палитру на отдельном странице (например, «Design Tokens») или в специальном фрейме. Используйте компоненты, чтобы сделать каждый цвет кликабельным. Применяйте осмысленные имена: вместо «Color 1» — «Brand / Primary / Base», «Status / Error / Background».
Если вы используете плагины, обратите внимание на Contrast Checker, Styling Up или Tokens Studio. Они помогают автоматизировать создание палитр, проверять контраст и экспортировать значения в JSON или CSS.

Работа с переменными (Variables) — будущее управления цветами

С выходом Variables Figma совершила прорыв в системном дизайне. Теперь цвета можно не просто сохранять как стили, но и превращать в динамические переменные, которые можно переопределять в зависимости от темы, устройства или состояния.
Переменные позволяют создавать светлую и тёмную темы без дублирования компонентов. Например, вы можете задать переменную «Background / Primary», которая в светлой теме равна #ffffff, а в тёмной — #121212. Компоненты, использующие эту переменную, автоматически меняют цвет при переключении режима.
Чтобы начать работать с Variables:

1. Перейдите в панель Design > Variables.
2. Создайте новую переменную, выбрав тип «Color».
3. Присвойте ей имя, например, «Text / Primary», и значение — нужный цвет.
4. Примените переменную к тексту, фигуре или обводке через панель свойств.

Переменные можно группировать в наборы (modes), например: «Light Theme», «Dark Theme», «High Contrast». Это особенно полезно для продуктов с поддержкой accessibility. Вы можете быстро переключаться между режимами и видеть, как интерфейс адаптируется.

Преимущества Variables перед Local Styles

• Динамическое обновление — изменение переменной затрагивает все элементы, где она используется.
• Поддержка тем — одна компонентная библиотека работает в нескольких режимах.
• Связь с данными — переменные могут использоваться в прототипах для изменения состояний.
• Экспорт в код — современные фреймворки (React, SwiftUI) поддерживают CSS-переменные, которые легко генерируются из Figma Variables.

Типичные ошибки при выборе цвета и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с цветом. Одна из самых частых — использование случайных оттенков без системы. Например, взятие «похожего» синего из палитры, который на деле отличается на 10%. Это нарушает визуальную целостность и усложняет жизнь разработчикам.
Другая ошибка — игнорирование контекста. Цвет, который отлично смотрится на белом фоне, может теряться на тёмном. Поэтому всегда проверяйте цвета в реальных условиях: на карточках, кнопках, внутри форм.

Список распространённых ошибок

• Отсутствие документации палитры. Без описания назначения каждого цвета команда начинает трактовать их по-разному.
• Слишком много акцентных цветов. Более двух-трёх акцентов перегружают интерфейс и снижают конверсию.
• Ручное копирование HEX-кодов. Это медленно и подвержено ошибкам. Лучше использовать стили или переменные.
• Несоответствие бренду. Цвет должен отражать ценности продукта: доверие, энергия, спокойствие и т.д.

Доступность и контраст: почему это критично

Цвет должен быть не только красивым, но и функциональным. Согласно стандартам WCAG 2.1, минимальный контраст между текстом и фоном должен составлять 4.5:1 для обычного текста и 3:1 — для крупного (18pt+). Это требование касается всех пользователей, включая людей с нарушениями зрения.
Figma не проверяет контраст автоматически, но вы можете использовать плагины, такие как Contrast, A11y, или Stark. Они показывают, соответствует ли пара «текст-фон» нормам доступности, и предлагают альтернативные оттенки при необходимости.
Представьте, что 15% пользователей вашего приложения имеют проблемы со зрением. Если вы используете светло-серый текст (#aaa) на белом фоне, они просто не смогут прочитать информацию. Это не только этическая, но и юридическая проблема: в ЕС и США существуют законы о цифровой доступности (например, ADA, EN 301 549).

Практические шаги для проверки контраста

1. Выделите текстовый элемент и фон.
2. Запустите плагин Contrast.
3. Проверьте соотношение: если ниже 4.5 — измените цвет.
4. Документируйте доступные пары в библиотеке компонентов.

Экспертное мнение

По словам эксперта, лучшие решения рождаются, когда дизайнер сочетает аналитику и интуицию. «Я начинаю с исследования: кто пользователь, в какой среде он использует продукт, какие у него боли. Затем тестирую палитру на реальных людях. Иногда «правильный» по теории цветов оттенок не работает на практике. Тогда я адаптируюсь. Figma позволяет быстро итерировать — и это огромный плюс.»

Вопросы и ответы

Заключение

Выбор цвета в Figma — это не визуальное решение, а часть стратегии продукта. От того, насколько продуманно вы подойдёте к созданию палитры, зависит удобство, узнаваемость и доступность интерфейса. Современные инструменты, такие как Variables и плагины для проверки контраста, позволяют строить масштабируемые и устойчивые дизайн-системы.

• Используйте Variables для динамического управления цветами.
• Создавайте палитру по принципу 8-точечной шкалы.
• Проверяйте контраст в соответствии с WCAG 2.1.
• Документируйте каждый цвет и его назначение.
• Синхронизируйте палитры через Shared Libraries.