В шестой части по основам Figma мы узнаем, как работать с градиентами. А именно поймем, какие существуют виды градиентов, как их создавать и настраивать на практике. Поговорим о плагинах для Figma и установим и используем несколько из них прямо во время урока.
- Градиенты и заливка цветом в Figma
- Линейный градиент (Linear)
- Радиальный градиент (Radial)
- Угловой градиент (Angular)
- Градиент в виде алмаза (Diamond)
- Настройка градиентов
- Непрозрачность
- Пипетка
- Возможность задать код цвета
- Добавляем точки к градиенту
- Угол и направление градиента
- Практические примеры
- Плагины для градиентов в Figma
- Как работать с плагинами?
- Инструкция по установке плагина на примере uiGradient
- Работа с плагином uiGradient
- Плагин Easing Gradients
- Плагин Chromatic Figma
- Домашнее задание
- Выводы
Наверняка, большинство из читателей этого урока уже знают, что градиент – это плавный переход из одного цвета в другой. Для отображения градиента нужно как минимум два цвета, то есть две ключевые точки, между которыми будет образован плавный переход, состоящий из промежуточных оттенков.
С помощью ключевых точек мы можем изменять градиент, чем больше их будет, тем более сложные переходы мы получим.
Мы с вами уже научились окрашивать объект в цвет с помощью пипетки в пятом уроке. Так же мы можем присвоить цвет объекту без использования пипетки, выбрав его самостоятельно. Для этого используем правую боковую панель. Перейдите к объекту и нажмите на панели настройки Fill. По умолчанию объект будет залит одним цветом (Solid). Мы можем это изменить, двигая кружок выбранного цвета мышкой на панели выбора цвета.
На этой же панели в выпадающем меню Fill сверху слева вместо заливки цветом вы сможете выбрать заливку градиентом. В большинстве графических редакторов есть четыре вида градиентов: линейный, радиальный, угловой и градиент-алмаз (ромбовидный).
Переход цвета в этом типе градиенте осуществляется по прямой линии. Сразу стоит отметить, что практически во всех случаях, вы будете использовать именно этот градиент. Он наиболее естественно и привлекательно передает переходы. Чтобы задать объекту заливку линейным градиентом, выберите его на панели в выпадающем списке Fill и установите цвета для точек, как показано на видео ниже.
В отличие от линейного, в радиальном градиенте цвет расходится по кругу, начиная с его центра. Цвет слева будет отображен по центру, а справа – на периферии. Чтобы использовать радиальный градиент, в меню Fill выберите Radial.
Цветной переход в этом градиенте повторяет форму спирали и на соединениях цвета имитирует «угол». Давайте посмотрим, как это работает на панели Fill.
Создает переходы цвета, от середины алмаза до его внешних граней. Похож на радиальный градиент, но в форме ромба. Применить нужно таким образом.
Недостаточно преобразовать заливку в градиент, чтобы получить желаемый для дизайна результат. Поэтому в Figma есть дополнительные настройки, а именно:
- непрозрачность;
- пипетка;
- возможность задать конкретный код цвета;
- добавление дополнительных точек;
- угол и направление перехода.
Позволяет изменять насыщенность цветового перехода путем изменения прозрачности ключевой точки. Например: если у нас линейный градиент, который состоит из двух точек, первая с прозрачностью в 100%, последняя 0%, то посередине градиентного перехода прозрачность будет 50% и редактор автоматически вычислит финальный цвет.
Позволяет скопировать цвета для ключевых точек градиента. На практике очень полезная функция, которая позволяет, например, продолжить фон объекта, затемняя/освещая его с другого края.
Allows the designer to precisely set the color for each key point. At the same time, the Fill panel allows working in different color formats. The most popular are HEX and RGB, which are actively used in the creation of brand books. For example, the client in the technical task can specify the required colors with specific values. Examples of HEX codes: #021A0D or #C22900.
Три предыдущие функции так же работают с заливкой объекта одним цветом (режим Solid).
Позволяет лучше контролировать цветовые переходы: избегать переходов с грязными оттенками, а также создавать очень сложные градиенты.
Популярный удачный пример многоцветного градиента – логотип социальной сети Instagram, который уже не один год подряд популяризирует тренды на градиенты в цифровой сфере.
Думаю, из предыдущих видео вы уже визуально поняли, что мы можем задавать градиенту любой угол. Для этого нам нужно открыть наш градиент таким образом, чтобы точки были видны поверх фигуры, и вручную, зажав левую кнопку мыши, вращать его.
Градиенты имеют массу применений как в графическом, так и в UI дизайне. Давайте рассмотрим несколько примеров, которые вы сможете использовать самостоятельно на практике.
Добавление объема фигуре. Имитация трехмерного рендера, но с использованием только двумерных инструментов. При этом шарик кажется довольно объемным. Цветовые переходы заменяют игру света и тени.
Имитация движения фигуры. Снова же таки, лишь с помощью цветового перехода и игры с непрозрачностью, человеческий глаз воспринимает объект как движущийся. Такие иллюстрации даже в статичном виде могут стать отличным визуальным дополнением для сайта.
Объемные элементы интерфейса. Поддержать тему объемности можно и за счет элементов интерфейса, например градиентными кнопками. Помните, что во всем нужно иметь меру!
Градиент на фоне. Сравните два примера заливки ниже. Оба, конечно, имеют право на жизнь, но согласитесь, что у второго больше преимуществ. Око человека есть за что зацепиться, светлая область акцентирует внимание на тексте, а цветовое решение выглядит интереснее.
Еще один пример – сравните заливку фона градиентом и одним цветом. Градиент добавляет совсем немного акцентов, но делает изображение в целом интереснее.
Если вы проходили предыдущие уроки, я думаю, уже обратили внимание на то, что мы пока что изучаем базовый функционал графического редактора Figma. Но кроме этого существует возможность добавить новые возможности с помощью плагинов.
Плагин – это отдельный модуль, созданный сторонним разработчиком для расширения функционала Figma или чтобы облегчить или ускорить работу уже существующих возможностей.
В главном меню Figma у вас есть пункт Plugins, который позволяет запускать уже установленные плагины, а также найти и добавить новые. За это отвечает пункт Browse Plugins in Community. Чтобы попасть в главное меню на платформе Windows, нужно кликнуть на логотип Figma в верхнем левом углу окна программы.
Community в Figma – это сообщество пользователей Figma, где бесплатно делятся полезными наработками друг с другом. Так, кроме плагинов, вы сможете там найти наборы иконок, макеты сайтов, мокапы, шаблоны, иллюстрации и многое другое.
Это расширение быстро применит градиент из десятков прекрасно подобранных цветовых комбинаций к вашей выбранной фигуре. Если вам трудно подобрать хороший градиент, то uiGradient было создано для вас.
Это расширение быстро применит градиент из десятков прекрасно подобранных цветовых комбинаций к вашей выбранной фигуре. Если вам трудно подобрать хороший градиент, то uiGradient было создано для вас.
Попробуем установить ваш первый плагин для Figma:
- Перейдите на главную страницу Figma, кликнув по иконке с домиком в верхнем левом углу.
- Далее кликаем по Explore community в меню слева.
- Выберите вкладку Plugins и введите в поисковое поле название нашего расширения «uiGradient». Далее нажмите Enter.
- Поиск выдаст список результатов, найдите нужный и нажмите кнопку Install справа от uiGradient.
- Готово, перезагружать программу не надо.
Эту же операцию можно было выполнить через вкладку Plugins и функцию Browse Plugins in Community. В дальнейшем сможете исследовать все наработки Figma Community самостоятельно.
Расширение установлено. Теперь нужно понять, как его активировать. Для начала выделите объект, который хотите перекрасить. Далее запускаем uiGradients одним из этих способов:
- через пункт контекстного меню Plugins, выбрав нужное расширение из списка. Чтобы вызвать контекстное меню кликните правой кнопкой мыши;
- через поиск нажав Ctrl (Cmd) + / и написав в поисковой строке название + Enter.
Второй способ может быть удобнее в том случае, если вы захотите установить много плагинов в будущем и их сложнее будет быстро находить в списке.
Это хороший инструмент, который позволяет делать переходы более мягкими внутри самого градиента. По сути, расширение предназначено для градиентов, которые используют в ключевых точках прозрачность. Особенно классно видно результат с черно-белой гаммой.
Пример: очень часто, для улучшения читаемости текста на фото, с одной стороны делают градиентную заливку, которая должна плавно исчезать в фотографии. Но в случае небольшого размера изображения переход может быть довольно заметным. Именно здесь и понадобится Easing Gradients, который позволяет поправить стремительность перехода с помощью кривых.
Для того, чтобы плагин сработал, нужно сначала выделить фигуру с уже нанесённым градиентом, а потом запустить плагин через меню или поиск.
Другой проблемой, после резких переходов, является так называемая «грязность цвета». Между двумя ключевыми точками градиента компьютер иногда подбирает довольно грязный переход. Исправить эту проблему можно вручную, добавляя новые ключевые точки с более чистыми оттенками цвета.
Но если вы ещё недостаточно хорошо чувствуете цвета, а это свойственно всем новичкам, то можно воспользоваться плагином Chromatic Figma, который визуально улучшит градиент и буквально сделает грязную работу за вас.
Выберите фигуру с градиентом, запустите плагин, выберите Fix Gradient и нажмите Apply.
С этого момента этот курс рассчитан на самостоятельное изучение и выполнение домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или просмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
- Максимально точно воспроизведите картинку с иллюстрацией, которая представлена ниже. Опирайтесь на только что приобретенные навыки работы с градиентами;
- Установите все три расширения для градиентов, с которыми познакомились на уроке;
- Нарисуйте любые три фигуры и самостоятельно настройте различные градиенты. После этого сделайте дубликаты этих фигур и примените к ним плагин Chromatic Figma. Результат отправляйте ссылкой на файл Figma.
Навыки работать с градиентами в Figma значительно расширят ваши возможности и сделают ваш дизайн более интересным и разнообразным. А информация о существовании и использовании плагинов облегчит работу в будущем. Надеюсь, вы хорошо усвоили материал этого урока и выполните домашние задания, которые я для вас подготовила, ведь впереди вас ждет еще более увлекательный мир дизайна.
Подписывайтесь на меня в Instagram @frusia.pro и будьте в курсе анонсов новых уроков, просматривайте результаты проверки домашних заданий в сторис, задавайте свои вопросы, а также вас ждет множество полезных постов о дизайне.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение
