В шестой части по основам Figma мы узнаем, как работать с градиентами. А именно поймем, какие существуют виды градиентов, как их создавать и настраивать на практике. Поговорим о плагинах для Figma и установим и используем несколько из них прямо во время урока.
- Градиенты и заливка цветом в Figma
- Линейный градиент (Linear)
- Радиальный градиент (Radial)
- Угловой градиент (Angular)
- Градиент в виде алмаза (Diamond)
- Настройка градиентов
- Непрозрачность
- Пипетка
- Возможность задать код цвета
- Добавляем точки к градиенту
- Угол и направление градиента
- Практические примеры
- Плагины для градиентов в Figma
- Как работать с плагинами?
- Инструкция по установке плагина на примере uiGradient
- Работа с плагином uiGradient
- Плагин Easing Gradients
- Плагин Chromatic Figma
- Домашнее задание
- Выводы
Probably, most of the readers of this lesson already know that a gradient – is a smooth transition from one color to another. To display a gradient, at least two colors are needed, that is, two key points between which a smooth transition will be formed, consisting of intermediate shades.
С помощью ключевых точек мы можем изменять градиент, чем больше их будет, тем более сложные переходы мы получим.
Мы с вами уже научились окрашивать объект в цвет с помощью пипетки в пятом уроке. Так же мы можем присвоить цвет объекту без использования пипетки, выбрав его самостоятельно. Для этого используем правую боковую панель. Перейдите к объекту и нажмите на панели настройки Fill. По умолчанию объект будет залит одним цветом (Solid). Мы можем это изменить, двигая кружок выбранного цвета мышкой на панели выбора цвета.
На цій же панелі у випадаючому меню Fill зверху зліва замість заливки кольором ви зможете вибрати заливку градієнтом. У більшості графічних редакторів є чотири види градієнтів: лінійний, радіальний, кутовий та градієнт-алмаз (ромбоподібний).
The color transition in this type of gradient occurs in a straight line. It is worth noting right away that in almost all cases, you will be using this gradient. It most naturally and attractively conveys transitions. To set a linear gradient fill for an object, select it in the Fill dropdown list on the panel and set the colors for the points, as shown in the video below.
В отличие от линейного, в радиальном градиенте цвет расходится по кругу, начиная с его центра. Цвет слева будет отображен по центру, а справа – на периферии. Чтобы использовать радиальный градиент, в меню 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 creating brand books. For example, the client in the technical task may 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.
Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.
За реквізитами пишіть в дірект Інстаграму @frusia.pro
Курс і уроки залишаються безкоштовними.
Домашние задания больше не проверяются для граждан россии.
- Максимально точно відмалюйте картинку з ілюстрацією, що представлена нижче. Спирайтесь на щойно набуті вміння роботи з градієнтами;
- Установите все три расширения для градиентов, с которыми познакомились на уроке;
- Нарисуйте любые три фигуры и самостоятельно настройте различные градиенты. После этого сделайте дубликаты этих фигур и примените к ним плагин Chromatic Figma. Результат отправляйте ссылкой на файл Figma.
Навички вправлятись з градієнтами у Figma значно розширить ваші можливості і зробить ваш дизайн більш цікавим і різноманітним. А інформація про існування та використання плагінів полегшить роботу у майбутньому. Сподіваюся ви добре засвоїли матеріал цього уроку і виконайте домашні завдання, які я для вас підготувала, адже попереду на вас чекає ще більш захоплюючий світ дизайну.
Підписуйтесь на мене в Instagram @frusia.pro і будьте у курсі анонсів нових уроків, переглядайте результати перевірки домашніх завдань у сторіс, ставте свої питання, а також на вас чекає безліч корисних постів про дизайн.
Продолжить обучение
