Цвет, заливки и градиенты

Цвет задаёт настроение интерфейса; в Figma им управляют через гибкую панель заливок.

Цвет — не просто «покрасить». Это иерархия, акценты и узнаваемость бренда. Сначала освоим механику, потом — систему.

Любой объект в Figma может иметь одну или несколько заливок: сплошной цвет, градиент или изображение. Разберём, как ими управлять.

Открываем выбор цвета

Выделите фигуру и в разделе Fill кликните по цветному квадрату.
Откроется панель цвета: палитра, поле HEX и ползунок непрозрачности.
Введите HEX-код (например 2563EB) или выберите оттенок мышью.
Ползунок O (Opacity) внизу задаёт прозрачность заливки от 0 до 100%.

Пипетка

Чтобы скопировать цвет с любого места экрана, нажмите иконку пипетки в панели цвета или клавишу I (Eyedropper). Наведите на нужный пиксель и кликните — цвет подхватится.

Несколько заливок и градиенты

У одной фигуры может быть несколько заливок поверх друг друга — добавляйте их кнопкой + в секции Fill. А в выпадашке типа заливки можно выбрать градиент:

Linear — линейный переход.
Radial — из центра наружу.
Angular — по кругу.
Diamond — ромбом.

Структура заливок фигуры

  Fill
   +-- [1] Сплошной  #FFFFFF  (низ)
   +-- [2] Градиент  linear   (верх)
       стоп 1: #2563EB
       стоп 2: #7C3AED
  ----------------------------
  итог: бело-сине-фиолетовый объект

Цветовые модели и форматы

В панели цвета можно переключать формат ввода: HEX (привычный #2563EB), RGB (три канала 0-255), HSL и HSB (тон-насыщенность-яркость). HSB особенно удобен, когда нужно сделать оттенок темнее или светлее, не меняя «характер» цвета: достаточно покрутить ползунок яркости. Кликните по подписи формата, чтобы переключить его.

Прозрачность стоит различать на двух уровнях. Opacity заливки (внутри панели цвета, обычно через альфа-канал HEX из 8 символов или ползунок) влияет только на конкретную заливку. Opacity слоя (вверху раздела Design, или цифровые клавиши 1-9 при выделенном объекте) делает полупрозрачным весь объект целиком вместе с обводкой и эффектами. Клавиша 0 возвращает 100%.

Изображения как заливка

Заливкой может быть не только цвет, но и картинка. Перетащите изображение на фигуру или выберите тип заливки Image и загрузите файл. У картинки-заливки есть режимы: Fill (заполнить с обрезкой), Fit (вписать целиком), Crop (обрезать вручную), Tile (замостить). Так круглый фрейм с заливкой-фото в режиме Fill превращается в аккуратный аватар.

Горячие клавиши

Действие	Клавиша
Пипетка (Eyedropper)	`I`
Добавить заливку	кнопка `+` в Fill
Скопировать свойства	`Cmd/Ctrl+Alt+C`
Вставить свойства	`Cmd/Ctrl+Alt+V`

Наконец, про порядок работы с цветом в команде. Договоритесь, что новые произвольные цвета в макет не добавляются — берутся только из согласованной палитры или из уже созданных стилей и переменных. Это кажется ограничением, но именно дисциплина палитры даёт продукту узнаваемость и избавляет от зоопарка почти-одинаковых оттенков. Если очень нужен новый цвет, его сначала добавляют в палитру осознанно, а не подбирают на глаз в конкретном экране. Такой порядок экономит десятки часов на поддержке.

И помните про доступность: текст должен иметь достаточный контраст с фоном, иначе его не прочтут люди со слабым зрением и в плохих условиях освещения. Существуют плагины-проверки контраста прямо в Figma — они подскажут, проходит ли пара «текст/фон» стандарты WCAG. Учитывайте это с самого начала, выбирая цвета текста и кнопок.

Частые ошибки

Снижают непрозрачность вместо выбора светлого цвета. Прозрачность смешивает цвет с фоном непредсказуемо. Для светлого оттенка лучше задайте сам HEX.
Городят градиенты везде. Сплошные цвета почти всегда смотрятся чище. Градиент — это акцент, а не норма.
Копируют HEX вручную с ошибками. Используйте пипетку — она точнее.

Совет профи: цвет с системой, а не наугад

Главная ошибка новичка — брать цвета «по вдохновению» в каждом месте отдельно. В итоге в макете оказывается пятнадцать почти одинаковых серых и три разных синих, которые невозможно поддерживать. Профессиональный подход: соберите небольшую палитру заранее — основной (brand) цвет, нейтральная шкала серых от светлого к тёмному, и пара акцентов для статусов (успех, ошибка, предупреждение). Используйте только цвета из этой палитры. На следующем шаге мы превратим её в стили и переменные, и тогда смена бренда или добавление тёмной темы станут делом нескольких минут. Помните: ограничение палитры — не бедность, а признак зрелого, узнаваемого дизайна.

Чек-лист

Меняю цвет через HEX и палитру.
Регулирую непрозрачность заливки.
Беру цвет пипеткой клавишей I.
Создаю линейный и радиальный градиент.

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