Градиенты и заливка цветом в Figma

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

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

Мы с вами уже научились присваивать объекту цвет с помощью пипетки в пятом уроке. Точно таким же образом мы можем присвоить цвет объекту без использования пипетки, выбрав его самостоятельно. Для этого мы используем правую боковою панель. Выделите ваш объект и нажмите на панели настройку Fill. По умолчанию ваш объект будет залит одним цветом (Solid). Мы можем менять его, двигая ползунок мышкой на цветовой панели.

На этой же панели Fill вместо заливки цветом, вы сможете выбрать заливку градиентом. В графических редакторах есть четыре вида градиентов: линейный, радиальный, угловой и градиент-алмаз (ромбовидный).

Линейный градиент (Linear)

Переход цвета в этом градиенте осуществляется по прямой линии. Сразу стоит отметить, что практически во всех случаях, вы будете использовать именно этот градиент. Он наиболее естественно и привлекательно передает цветовые переходы. Чтобы задать вашему объекту заливку линейным градиентом, выберите его на панели Fill и задайте цвета для точек, как показано на видео ниже.

Радиальный градиент (Radial)

В отличие от линейного, в радиальном градиенте цвет расходиться по кругу, начиная от его центра. Чтобы использовать радиальный градиент, выберите его на панели Fill.

Угловой градиент (Angular)

Цветовой переход в этом градиенте повторяет форму спирали и на соединениях цвета имитирует «‎угол». Давайте посмотрим как это работает на панели Fill.

Градиент в виде алмаза (Diamond)

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

Настройки градиентов

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

  • непрозрачность;
  • пипетка;
  • возможность задать конкретный код цвета;
  • добавление дополнительных точек градиента;
  • угол и направление градиента.

Непрозрачность

Позволяет менять насыщенность цветового перехода, путем изменения непрозрачности ключевой точки. Например: если у нас линейный градиент, который состоит из двух точек, первая с непрозрачностью в 100%, последняя 0%, то ровно посредине градиентного перехода непрозрачность будет 50%, так как редактор автоматически вычислит процент непрозрачности.

Пипетка

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

Возможность задать код цвета

Позволяет дизайнеру задавать точные комбинации цветов. При этом панель Fill в Figma позволяет работать в разных цветовых схемах. Самые популярные HEX и RGB активно используют при создании брендбуков. Например, заказчик в ТЗ часто может прописать нужные цвета конкретными комбинациями.


Три предыдущих функции абсолютно также работают и с заливкой объекта одним цветом (Solid).

Добавление дополнительных точек градиента

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

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

Пример градиента в логотипе инстраграма

Угол и направление градиента

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

Практические примеры

У градиентов есть масса применений как в графическом, так и в UI дизайне. Давайте вместе рассмотрим несколько хороших вариантов, которые вы сможете использовать самостоятельно на практике.

Добавление объема для фигуры. Мы не используем здесь 3D, но при этом шарик кажется достаточно объемным. Цветовые переходы имитируют игру света и тени.

Градиент – свет и тень

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

Имитация движения градиентом

Поддержать тему объемности также можно с помощью градиентных кнопок.

Работа Saikat Kumar из сообщества Dribble

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

Дизайн без градиента на фоне

Дизайн с градиентом на фоне

Еще один пример-сравнение фоновой заливки градиентом и одним цветом. Градиент добавляет совсем немного акцентов.

Градиент на фоне или заливка цветом

Плагины для градиентов в Figma

Если вы проходили предыдущие уроки, думаю уже обратили внимание на то, что мы пока изучаем базовый функционал графического редактора Figma. Но кроме него, существуют специальные плагины – это дополнительные модули, которые сделаны, чтобы облегчить, ускорить работу или добавить новый функционал.

Как работать с плагинами?

В самой верхней панели Figma у вас есть таб Plugins, который позволяет запускать уже установленные плагины, а также найти и добавить новые (за это отвечает пункт меню Browse Plugins in Community).

Пример градиента в логотипе инстраграма

Community в Figma – это пространство, в котором пользователи делятся полезностями друг с другом. Например, кроме плагинов, вы сможете там найти иконки, макеты сайтов, мокапы, иллюстрации и многое другое.

Пример градиента в логотипе инстраграма

Плагин uiGradient: пример установки

Этот инструмент предлагает вам выбор из десятков удачных цветовых сочетаний. Если сложно подобрать хороший градиент, uiGradient поможет в этом.

Давайте на его примере, попробуем установить ваш первый плагин для Figma. Для этого:

  1. Cделайте переход на главную страницу Figma и кликните на свой никнейм в левом верхнем углу. У вас должна открыться возможность перейти в Community – нажмите на неё.
  2. Выберите вверху окна таб Plugins и введите в поисковую строку название нашего плагина “uiGradient”.
  3. Поиск подтягивает результаты, выберите нужный и кликните на него.
  4. Сверху у нас есть кнопка Installed – нажимайте.
  5. Чтобы плагин заработал, нужно перезапустить Figma.

Это же действие можно было проделать через вкладку Plugins и функцию Browse Plugins in Community. Но мне важно было показать вам, как именно мы можем зайти в Figma Community, чтобы вы могли исследовать его дальше самостоятельно.

Работа с плагином uiGradient

Тут все довольно просто. Вам нужно выделить объект и запустить uiGradients. Мы можем сделать это двумя способами:

  • через вкладку Plugins, выбрав нужный нам плагин из списка;
  • через поиск нажав Ctrl (Cmd) + / и написав в поисковой строке название + Enter.

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

Плагин Easing Gradients

Это хороший инструмент, позволяющий делать более мягкие переходы в середине самого градиента. По сути плагин предназначен для градиентов, которые уходят в прозрачность. Особенно классно он работает с черно-белой гаммой.

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

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

Пример градиента в логотипе инстраграма

Плагин Chromatic Figma

Второй проблемой, после жёстких переходов, является так называемая “грязнота цвета”. Между двумя ключевыми точками градиента машина иногда подбирает довольно грязный переход. Исправить эту проблему можно вручную добавляя новые ключевые точки с более чистыми оттенками цвета.

Но если вы еще недостаточно хорошо видите цвета, а это свойственно всем новичкам, то можно воспользоваться плагином Chromatic Figma, который визуально улучшит градиент за вас.

Выберите ваш градиент, после чего запустите плагин, выберите Fix Gradient и нажмите на кнопку Apply.

Пример градиента в логотипе инстраграма

Домашнее задание

  1. Скопируйте себе картинку с иллюстрацией, что представлена ниже. Максимально точно воссоздайте её, опираясь на умения работы с градиентами, которые вы получили в этом уроке;
  2. Первое домашнее задание к уроку 9, frusia.pro
  3. Установите три плагина для градиентов, которые описаны в этом уроке;
  4. Нарисуйте три любые фигуры и попробуйте сами задать им разные цветовые градиенты. После чего сделайте дубликаты этих фигур и примените к ним плагин Chromatic Figma. Результат скиньте ссылкой на файл Figma.

Выводы

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

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

Stay tuned!

Вернуться к Roadmap


Обучение дизайну
Октябрь 2021


Что ещё почитать

Что нужно знать начинающему UX/UI дизайнеру. Полный список. Roadmap

Основы Figma. Часть 2. Группы. Работа с слоями. Пипетка. Импорт изображений. Делимся проектом

Ежедневные задачи UX/UI дизайнера. Программы для дизайна

Дизайн. Интерфейс. UX и UI

Основы Figma. Часть 1. Регистрация. Интерфейс. Первые шаги. Навигация и свойства объектов

Основы Figma. Часть 3. Фреймы. Сетки. Направляющие. Знакомство с компонентами


Оставьте комментарий



Комментарии

Дизайнер · 13 октября 2021 02:48  
Nice. Интересный урок.