Как в фигме делать градиент

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

Типы градиентов в Figma: линейный, радиальный, конический

Figma предлагает три основных типа градиентов: линейный (Linear), радиальный (Radial) и конический (Conical). Каждый из них решает разные дизайнерские задачи. Линейный градиент — самый часто используемый: он идеален для фонов кнопок, заголовков, карточек и панелей, где нужно создать ощущение глубины или светового направления. Радиальный градиент, в свою очередь, имитирует источник света из центра — подходит для эффектов свечения, круглых кнопок, аватаров или элементов, требующих «объёмного» визуального акцента. Конический градиент, появившийся в Figma в 2022 году, позволяет создавать цветовые круги, как у цветовых палитр, индикаторов прогресса или анимированных спиннеров — он особенно полезен для дашбордов и интерактивных элементов.

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

Как создать градиент в Figma: пошаговая инструкция

Создание градиента в Figma занимает менее 10 секунд, но для точного результата нужно следовать последовательности. Начните с выбора объекта — прямоугольника, эллипса, текста или группы. Перейдите в панель свойств справа и найдите раздел Fill. Если там указан один цвет, нажмите на цветовой квадрат — откроется редактор заливки.

1. В выпадающем меню выберите Gradient вместо Solid Color.
2. Сразу после выбора появится два цветовых маркера — остановки градиента.
3. Щёлкните по одной из остановок, чтобы изменить цвет через палитру или ввести HEX-код.
4. Нажмите на плюс (+) под остановками, чтобы добавить третий, четвёртый или больше цветов.
5. Используйте ползунок Type, чтобы переключиться между Linear, Radial и Conical.

Вы можете перетаскивать остановки по линии или кругу — это даёт мгновенную визуальную обратную связь. Если вы работаете с прямоугольником и выбрали линейный градиент, попробуйте перетащить верхнюю остановку в левый угол — вы увидите, как градиент «поворачивается» вдоль диагонали. Это работает как визуальный конструктор, где каждый элемент можно настроить в реальном времени.

Настройка остановок градиента: цвет, позиция, прозрачность

Остановки — это ядро любого градиента. В Figma вы можете добавить до 16 остановок на один градиент, что позволяет создавать сложные цветовые переходы, имитирующие реальное освещение или атмосферные эффекты. Каждая остановка имеет три параметра: цвет, позиция (от 0% до 100%) и прозрачность (opacity).

Чтобы настроить прозрачность, щёлкните по остановке и найдите ползунок Opacity в панели свойств. Это особенно полезно для создания эффектов «затухания»: например, при проектировании модального окна с полупрозрачным фоном можно добавить остановку с 0% прозрачностью по краям и 80% в центре — так фон будет «втягивать» внимание к центру. Для плавных переходов между тёплыми и холодными оттенками (например, от оранжевого к синему) добавьте среднюю остановку с нейтральным цветом (серый или белый), чтобы избежать резкого контраста.

Позиция остановок задаётся в процентах. Можно ввести значение вручную — например, 25%, 50%, 75% — для симметричного градиента. Или перетащить маркер в нужное место — Figma автоматически обновляет процент. Для точной настройки используйте клавиши со стрелками на клавиатуре: при выделенной остановке они перемещают её на 1% за нажатие.

Угол и направление: как точно задать градиент

Угол — это то, что отличает хорошего дизайнера от отличного. В линейном градиенте угол задаёт направление перехода цветов. По умолчанию он стоит на 90° (снизу вверх), но это редко бывает оптимально. Для горизонтальных фонов — 0° (слева направо), для вертикальных — 180° (сверху вниз). Но для реалистичного освещения используйте углы 45°, 135°, 225° или 315° — они имитируют естественный свет из угла.

Чтобы задать точный угол, введите значение в поле Angle в панели Fill. Вы можете использовать клавиши со стрелками для тонкой настройки — каждое нажатие меняет угол на 1°. Для более быстрой работы используйте ручку-указатель: наведите курсор на градиентную линию в предварительном просмотре, зажмите левую кнопку мыши и поворачивайте — Figma мгновенно обновляет угол. Это особенно удобно при работе с большими макетами, где нужно быстро подобрать направление под структуру интерфейса.

При работе с радиальным градиентом угол не влияет — вместо него вы управляете центром. Перетаскивайте белый кружок в центре градиента, чтобы сместить источник света. Например, если кнопка находится в нижнем правом углу экрана, сместите центр радиального градиента влево и вверх — это создаст эффект, будто свет падает сверху слева, как в природе.

Частые ошибки при создании градиентов и как их избежать

Даже опытные дизайнеры допускают простые, но критичные ошибки. Первая — использование слишком резких переходов. Градиент с двумя яркими цветами (например, ярко-красный → ярко-синий) без промежуточных оттенков выглядит агрессивно и неестественно. Решение: добавьте третью остановку с нейтральным цветом (например, фиолетовым или серым) между ними.

Вторая ошибка — игнорирование контраста. Градиентный фон под текстом снижает читаемость. Особенно опасно, если текст белый, а градиент идёт от тёмного к светлому — в середине он «растворяется». Решение: используйте градиент только в фоне, а текст помещайте на участки с максимальным контрастом. Или наложите полупрозрачный белый/чёрный слой поверх градиента под текстом.

Третья ошибка — перегрузка. Многие пытаются использовать 5–6 цветов в одном градиенте, чтобы «сделать ярче». Но это превращает интерфейс в «цветной шум». Лучше использовать 2–4 цвета, как в профессиональной фотографии. Помните: градиент — это не декор, а инструмент визуальной иерархии.

Четвёртая — неправильная прозрачность. Если вы устанавливаете 0% opacity на крайнюю остановку, градиент начинает «выгорать» — цвет исчезает, и элемент теряет визуальную целостность. Вместо этого используйте 5–10% для плавного затухания.

Продвинутые техники: градиенты на тексте, масках и слоях

Градиенты в Figma работают не только с фигурами — их можно применять к тексту. Выделите текстовый слой, перейдите в Fill и выберите Gradient — текст сразу окрасится в градиент. Это мощный приём для заголовков, логотипов и привлекательных CTA. Но будьте осторожны: на маленьких шрифтах градиент может размыть буквы. Рекомендация: используйте только крупные заголовки (28px и выше) и избегайте резких переходов.

Ещё один продвинутый приём — градиенты на масках. Создайте фигуру (например, круг), наложите на неё градиент, затем выделите её и другой слой (например, изображение), и нажмите Ctrl+Alt+M (Cmd+Option+M). Градиент теперь будет виден только в пределах формы — идеально для эффектов «вырезания» цвета или анимированных фонах.

Для сложных композиций используйте группу слоёв с разными градиентами. Например: нижний слой — радиальный градиент для фона, средний — линейный для акцента, верхний — полупрозрачный белый для смягчения. Так вы создаёте «слоёный» свет, как в профессиональной графической программе, но без выхода за пределы Figma.

Экспертное мнение: как градиенты влияют на восприятие интерфейса

Дмитрий работает над продуктами с миллионами пользователей и утверждает, что градиенты, правильно применённые, могут повысить конверсию на 12–18%. Например, в приложении для инвестиций он заменил однотонную кнопку «Купить» на линейный градиент от зелёного (#4CAF50) к более тёплому зелёному (#388E3C) под углом 45° — конверсия выросла на 15%. Почему? Пользователь воспринял цвет как «безопасный» и «динамичный» одновременно — это сочетание не передаётся обычным цветом.

Он также отмечает, что градиенты должны быть согласованы с брендом. Если бренд использует тёплые тона — градиенты должны быть в диапазоне от оранжевого до красного. Холодные бренды — синий, фиолетовый, серый. Нарушение этой логики вызывает когнитивный диссонанс — пользователь не понимает, почему элемент выглядит «не так».

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

Заключение

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

• Используйте не более 3–4 цветов в одном градиенте для сохранения читаемости.
• Всегда согласовывайте угол градиента с направлением теней и света в интерфейсе.
• Сохраняйте градиенты как Fill Styles — это ускоряет работу и обеспечивает единообразие.
• Текст на градиенте требует дополнительного контраста — используйте полупрозрачные overlay.
• Конический градиент — идеален для индикаторов, но не подходит для фонов текста.