Как сделать красивый градиент в фигме для фигуры, текста, фона или фото

Аватар автора курса

Автор — Ян Агеенко

Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»

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

Видео-версия урока

Выбрать плеер:

Как добавить градиент в фигме для любой фигуры или текста

Градиент в фигме можно добавить любому слою, будь то фигура, текст или картинка. Для этого нужно нажать на иконку предпросмотра заливки справа на панели Fill, а затем нажать на иконку градиента.

Градиент в фигме можно добавить любому слою, будь то фигура, текст или картинка. Для этого нужно нажать на иконку предпросмотра заливки справа на панели Fill, а затем нажать на иконку градиента.

Как сделать золотой или серебряный градиент в фигме

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

Радиальный, угловой и бриллиантообразные градиенты

По умолчанию в фигме устанавливается линейный градиент, но его тип можно поменять на радиальный (Radial), угловой (Angular) и бриллиантообразный (Diamond).

Если немного поэкспериментировать с их настройками (углами, цветами и положением), можно получить очень красивые и необычные градиенты:

Как сделать прозрачный градиент для картинки (фото)

Если мы хотим просто наложить полупрозрачный градиент поверх картинки или фото, это делается обычным добавлением новой заливки на панели Fill. Изначально это будет просто черный цвет с непрозрачность 20%. Рекомендую сразу поставить непрозрачность 100%, а потом задавать прозрачность уже в настройках цветов градиента. Разумеется, здесь же можно задать и все остальные параметры.

Но что если нужно сделать прозрачный градиент для самой картинки и как бы плавно растворить её часть? В этом случае нужно сделать отдельный слой с полупрозрачным градиентом и применить его к картинке как маску. Подробно показываю, как это делается в видео-версии урока. Посмотрите, если не умеете пользоваться масками.

Плагины для красивого градиента в фигме

Если требуется сделать красивый и необычный градиент, можно также воспользоваться плагинами, например Mesh Gradient. С его помощью можно создать классный фон для вашего дизайна.

Плагин Noizy Gradient создает градиенты с текстурой шума, Generative Gradients имеет большое количество настроек и шаблонов, а Non boring gradients создает красивые плавные градиенты на основе выбранных вами цветов.

Еще один способ сделать градиент в фигме

Можно просто нарисовать несколько фигур разного цвета и поставить им большой Layer Blur (размытие слоя) на панели Effects. При этом способе можно также поэкспериментировать с режимами наложения на панели Appearence. Данный способ открывает почти безграничные возможности для творчества.

Другие полезные уроки по фигме

Как сделать векторный логотип в фигме — нарисовать графику и создать текстовую часть

Урок о том, как нарисовать логотип в программе фигма. Вы узнаете, как сделать графическую и текстовую часть логотипа, создать палитру цветов, сохранить и скачать логотип в векторном или растровом формате. Рекомендую проходить этот урок в видео-формате — там я пошагово показываю как сделать логотип в фигме на конкретном примере.

Как в фигме сделать сетку и включить направляющие линии горячими клавишами

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

Как вставить, обрезать и редактировать изображения (картинки, фото) в фигме

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