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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать иконку в фигме или найти готовую с помощью плагинов (svg, пнг, 3д)

Сегодняшний урок полностью посвящен иконкам в фигме. Я покажу, как их можно нарисовать, а также где найти готовые векторные или объемные (3д). Также я покажу несколько хороших плагинов для иконок в фигме. Еще вы узнаете, как сохранять иконки в форматах свг и пнг. Советую смотреть этот урок в видео-формате, поскольку там я показываю всё это более подробно, чем в текстовом варианте.