Lesson 12. Gradients. Plugins

Module 2. Figma basics.
Free UX / UI design course for a newcomer

To start learning, take tests and track progress, you need to enroll in the course. It's free.

In the sixth part on the basics of Figma, we will learn how to work with gradients. Specifically, we will understand the types of gradients that exist, how to create and customize them in practice. We will talk about plugins for Figma and install and use several of them right during the lesson.

Gradients and Color Fill in 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.

With the help of key points, we can change the gradient; the more there are, the more complex transitions we will achieve.

We have already learned how to paint an object in color using the eyedropper in the fifth lesson. We can also assign a color to an object without using the eyedropper by selecting it manually. To do this, we use the right sidebar. Go to the object and click on the Fill settings panel. By default, the object will be filled with a single color (Solid). We can change this by moving the selected color circle with the mouse on the color selection panel.

In this same panel, in the Fill dropdown menu at the top left, instead of filling with color, you will be able to choose a gradient fill. Most graphic editors have four types of gradients: linear, radial, angular, and diamond gradient (rhombus-shaped).

Linear Gradient (Linear)

The color transition in this type of gradient occurs along a straight line. It is worth noting that in almost all cases, you will be using this gradient. It most naturally and attractively conveys transitions. To apply a linear gradient fill to an object, select it from the dropdown list Fill on the panel and set the colors for the points as shown in the video below.

Radial Gradient (Radial)

Unlike linear gradients, in radial gradients the color spreads out in a circle, starting from its center. The color on the left will be reflected at the center, while on the right - at the periphery. To use a radial gradient, in the Fill menu select Radial.

Corner Gradient (Angular)

The color transition in this gradient mimics the shape of a spiral and at the color junctions imitates a "corner". Let's see how it works on the Fill panel.

Diamond-shaped Gradient

Creates color transitions from the center of the diamond to its outer facets. Similar to a radial gradient, but in the shape of a rhombus. It should be applied in the following way.

Gradient Settings

It is not enough to convert the fill to a gradient to achieve the desired design result. Therefore, Figma has additional settings, namely:

  • opacity;
  • eyedropper;
  • the ability to specify a specific color code;
  • adding additional points;
  • the angle and direction of the transition.

Opacity

Allows you to change the saturation of the color gradient by altering the opacity of the key point. For example: if we have a linear gradient consisting of two points, the first with an opacity of 100%, the last 0%, then in the middle of the gradient transition the opacity will be 50% and the editor will automatically calculate the final color.

Pipette

Allows copying colors for key points of the gradient. In practice, it is a very useful feature that allows, for example, to extend the background of an object by darkening/lightening it from another edge.

Ability to enter a color code

Allows the designer to specify the color for each key point accurately. The Fill panel allows working in different color formats. The most popular are HEX and RGB, which are actively used when creating brand books. For example, the client in the technical assignment can specify the required colors with specific values. Examples of HEX codes: #021A0D or #C22900.

The three previous functions also work with filling the object with a single color (Solid mode).

Adding Points to the Gradient

Allows for better control of color transitions: avoiding transitions with muddy shades, as well as creating very complex gradients.

A popular successful example of a multicolored gradient is the logo of the social network Instagram, which has been popularizing gradient trends in the digital sphere for several years now.

Example of a gradient in the Instagram logo

Angle and Direction of the Gradient

I think from the previous videos, you have already visually understood that we can set the gradient to any angle. To do this, we need to open our gradient in such a way that the points are visible over the shape and manually rotate it by holding down the left mouse button.

Practical Examples

Gradients have a multitude of applications in both graphic and UI design. Let's look at some examples that you can use independently in practice.

Adding volume to a figure. We simulate a three-dimensional render, but using only two-dimensional tools. In this way, the ball appears quite voluminous. Color transitions replace the play of light and shadow.

Gradient - Light and Shadow

Imitation of figure movement. Again, only through color transition and playing with opacity, the human eye perceives the object as moving. Such illustrations, even in static form, can become a wonderful visual addition to the site.

Gradient Motion Simulation

Volumetric interface elements. You can support the theme of volumetricity through interface elements, for example, with gradient buttons. Remember that moderation is key in everything!

Work by Saikat Kumar from the Dribble community

Gradient on the background. Compare the two examples of filling below. Both certainly have their merits, but agree that the second has more advantages. The human eye has something to latch onto, the light area draws attention to the text, and the color solution looks more interesting.

Design without gradient on the background

Gradient Design on Background

Another example – compare the background fill with a gradient and a solid color. The gradient adds just a few accents, but makes the image as a whole more interesting.

Gradient on the background or color fill

Plugins for Gradients in Figma

If you have completed the previous lessons, I think you have already noticed that we are currently studying the basic functionality of the Figma graphic editor. But besides this, there is the possibility to add new features using plugins.

Plugin – is a separate module created by a third-party developer to extend the functionality of Figma or to simplify or speed up the work of existing capabilities.

How to work with plugins?

In the main menu of Figma, there is a Plugins item that allows you to run already installed plugins as well as find new ones. This is managed by the Manage Plugins item.

Plugins menu in Figma

Introduction to plugins and Figma Community using uiGradient as an example

Community in Figma – is a community of Figma users where designers share useful resources with each other. You will find both free and paid content there. In addition to plugins, you will see icon sets, website layouts, mockups, templates, illustrations, and much more.

uiGradient is a plugin that quickly applies a gradient to your selected shape. It contains dozens of beautifully curated color combinations. If you find it hard to choose a good gradient, uiGradient was created for you.

Let's try to install your first plugin for Figma:

  1. Go to the main page of Figma.
  2. Then click on Explore community in the lower left corner.
  3. You can use the Plugins tab to manually search for the necessary plugins. But it will be much faster to enter the name of our extension "uiGradient" in the search field and press Enter.
  4. The search will yield a list of results, find the required plugin and open it in one of your files.

This action could also be done through the Plugins tab and the Manage Plugins function. But it was important to show you another way so that you can explore the Figma Community resources on your own in the future.

Working with the uiGradient plugin

The extension is open. Now you need to understand how to work with it. First, select the object you want to recolor. Next, launch uiGradients in one of these ways:

  • through the Plugins context menu item, selecting the desired extension from the list. To bring up the context menu, right-click;
  • through search by pressing Ctrl (Cmd) + / and typing the name in the search bar + Enter.

The second method may be more convenient if you want to install many plugins in the future and it will be harder to quickly find them in the list.

Easing Gradients Plugin

This is a good tool that allows for smoother transitions within the gradient itself. Essentially, the extension is designed for gradients that use opacity at key points. The result is especially impressive with a black-and-white palette.

Example: very often, to improve text readability on photos, a gradient fill is applied on one side that should smoothly fade into the photograph. However, in the case of a small image size, the transition can be quite noticeable. This is where Easing Gradients comes in handy, allowing you to adjust the steepness of the transition using curves.

In order for the plugin to work, you first need to select a shape with an already applied gradient, and then run the plugin through the menu or search.

Example of gradient in Instagram logo

Chromatic Figma Plugin

The other problem, after harsh transitions, is the so-called «color dirtiness». Between two key points of the gradient, the computer sometimes selects a rather dirty transition. This problem can be fixed manually by adding new key points with cleaner shades of color.

But if you still do not feel colors well enough, which is typical for all beginners, you can use the Chromatic Figma plugin, which will visually enhance the gradient and literally do the dirty work for you.

Select a shape with a gradient, run the plugin, choose Fix Gradient, and click Apply.

Example of gradient in Instagram logo

Homework

From now on, this course is designed for independent study and completion of homework assignments. I understand that some tasks may be challenging for you.

For additional support, please use the chat on Telegram. Here you can ask questions related to the lessons or view examples of correct execution from other students.

The chat is not available for citizens of Russia.

  1. Recreate the image with the illustration presented below as accurately as possible. Rely on the recently acquired skills in working with gradients;
  2. First homework assignment for lesson 9
  3. Install all three gradient extensions that you learned about in the lesson;
  4. Draw any three shapes and independently adjust different gradients. After that, create duplicates of these shapes and apply the Chromatic Figma plugin to them. Send the result via a link to the Figma file.

Conclusions

Practicing with gradients in Figma will greatly expand your capabilities and make your design more interesting and diverse. The information about the existence and use of plugins will make your work easier in the future. I hope you have grasped the material of this lesson well and complete the homework I have prepared for you, as an even more exciting world of design awaits you.

Follow me on Instagram @frusia.pro to stay updated on announcements of new lessons, check the results of homework reviews in stories, ask your questions, and look forward to many useful posts about design.

Take quiz

To pass the lesson and check your knowledge, you need to correctly answer 80% of the questions from the quiz. To do so, you need to login and enroll to the course or signup, if you haven't done so yet.

Take quiz

Leave a comment

Place the handle into the purple zone

Comments

скажена черепахаUkraine flag підтримує ЗСУ 7 March 2024 15:57  
привіт! буду вдячна за відгуки )
https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=314%3A9&mode=design&t=WPmRc6m50leplemk-1

Коментар frusia.pro:

Помилок не знайшла, все чудово! Молодець.

Даша6 April 2023 13:02  
Доброго дня
https://www.figma.com/file/kSCP9cjGRVcpT0jsiKlPsO/6-8-lesson?node-id=71%3A93&t=OHbXSLgYAhh4ZcCn-1

Коментар frusia.pro:

Завдання 1. Перемалювати ілюстрацію з градієнтом. Гарно відтворили, молодець. Зверніть увагу на білі проміжки по краях вашого фрейму. Щоб їх не було – старайтесь дотягувати ваші фігури.

Завдання 3. Застосувати плагін до градієнтів. На деяких фігурах добряче видно результат до і після використання плагіну. Як я розумію ви розібрались із застосуванням, молодець!

ВарвараUkraine flag підтримує ЗСУ 13 March 2023 17:21  
Добрий день)

https://www.figma.com/file/Dy1fUf6L4DZSfVxQCFVSvm/UX%2FUI-Frusia-2?node-id=203%3A28&t=saNPz1TzVKoTc5jq-1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Все супер! Молодець!

Завдання 3. Застосувати плагін до градієнтів. Бачу зміни у фігурах, надіюсь із плагінами не виникло проблем та ви розібрались.

Чекатиму домашку до останнього уроку

Yuliya LepenkoUkraine flag підтримує ЗСУ 25 September 2022 17:25  
Добрий день:)

https://www.figma.com/file/I08T3W8u2GI3NE21Xv5DTd/HW7?node-id=37%3A2

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Чудово попрацювали, ідеально перемальовано. Якщо вже дуже докопуватись, то у верхньому правому кутку трохи градієнти відрізняються, але це не суттєво. Завдання зараховується, молодець!

Завдання 3. Застосувати плагін до градієнтів. Бачу, що у точок у градієнтів стало значно більше, а отже ви розібрались, як встановлювати та використовувати плагіни, все правильно.

У вас все добре виходить, продовжуйте та переходьте до останнього уроку

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 10 September 2022 16:49  
Добрий день! Дуже цікавий урок і завдання, надсилаю дз)
https://www.figma.com/file/VLBmrdtp4jYbdm0ZFCMdHS/%D0%A3%D1%80%D0%BE%D0%BA-9?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Все зроблено дуже добре, помилок не знайшла.

Завдання 3. Застосувати плагін до градієнтів. Бачу що у фігурах є зміни, значить ви розібрались як працювати із плагінами.

Добре попрацювали, переходьте до 10-ого уроку

БогданаUkraine flag підтримує ЗСУ 1 August 2022 19:37  
Люба, добрий вечір!
Дуже вдячна за правки та відеопояснення до дз)
Все виправила і була дійсно вражена від ефекту плавного градієнту від плагіна у 3 завданні :)

Буду вдячна за перевірку)
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=271%3A24

Коментар frusia.pro:

Добрий вечір, будь ласка! Так, тепер все супер, по останньому завданню також бачу нові точки у градієнтах, ви розібрались, молодець!

Переходьте до останнього уроку

БогданаUkraine flag підтримує ЗСУ 30 July 2022 14:10  
Люба, вітаю!
У минулому завданні виправила заливку на прозору і виконала дз до цього мегацікавого уроку із градієнтами ;))
Коли перечитала матеріал, то автоматично у стрічці Інсти та Пінтереста почала помічати особливо цікаві дизи із градієнтами і уявляти в голові, як вони правильно виконуються))

Прикріпляю готове дз і буду вдячна за перевірку!
Мирного дня та чудового настрою)
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=271%3A24

Коментар frusia.pro:

Добрий день! По минулій домашці все супер!

Завдання 1. Перемалювати ілюстрацію з градієнтом. Дуже добре, усі кольори точно підібрані, по формі також все гарно. У деяких градієнтів трохи неправильно виставлені кути, під якими формуються градієнти. Записала відео, щоб вам було зрозуміліше:

https://drive.google.com/uc?id=1fD_t8aF4gpFFioO8q-Ul3a9HDZoGZ0ks

Завдання 3. Застосувати плагін до градієнтів. Бачу фігури з градієнтом, але не бачу нових точок, схоже, що плагін не був застосований. У відео за посиланням вище показала, як встановити плагін і застосувати його у вашому випадку.

Чекаю на виправлення Якщо щось незрозуміло, то задавайте питання, будем розбиратись.

Yana UsachovaUkraine flag підтримує ЗСУ 15 July 2022 11:57  
Доброго дня, дякую за зауваження, виправила
https://www.figma.com/file/MXbElNPI2qPu6ebirFQLuM/Untitled?node-id=15%3A3

Коментар frusia.pro:

Добрий вечір, будь ласка Бачу виконане третє завдання, молодець, ви розібрались, як застосовувати плагіни, бо у градієнтах з'явилась купа нових точок.

Сміливо переходьте до останнього уроку

Марія СUkraine flag підтримує ЗСУ 13 July 2022 01:02  
Доброго вечора, в другому завданні застосувала плагін хроматік фігма, там де "фікс градієнт", не впевнена, чи це те, про що йшлося в завданні))
https://www.figma.com/file/b9x48nptCrdpmKNtgdzxY5/9-%D1%83%D1%80%D0%BE%D0%BA?node-id=5%3A17

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Все зроблено ідеально, молодець!

Завдання 3. Застосувати плагін до градієнтів. Бачу нові точки у фігурах, отже, плагін застосовано правильно.

Вийшло дуже добре, переходьте до 10-ого заключного уроку

Yana UsachovaUkraine flag підтримує ЗСУ 12 July 2022 11:46  
доброго дня, https://www.figma.com/file/MXbElNPI2qPu6ebirFQLuM/Untitled?node-id=5%3A36
дуже цікавий та складний тк варіантив безліч та який самий гарний одразу й не зрозумієшь

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Дуже добре попрацювали. Лише в основі обеліска чомусь у вас виліз прямокутник, але це не має значення. Головне, що ви розібрались у роботі з градієнтами.

Завдання 3. Застосувати плагін до градієнтів. Не бачу другого завдання. Можливо він в іншому файлі?

Чекаю на третє завдання

АннаUkraine flag підтримує ЗСУ 9 July 2022 21:56  
https://www.figma.com/file/uiyn1dUjEaQVz5dVos2cfP/9-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1
Виправила:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все чудово відмальовано, єдине маленьке зауваження: отвір в обеліску чомусь сірого кольору.

Коментар frusia.pro:

Привіт! Тепер все добре, переходьте до заключного уроку

АннаUkraine flag підтримує ЗСУ 7 July 2022 23:46  
https://www.figma.com/file/uiyn1dUjEaQVz5dVos2cfP/9-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Дякую!

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Все чудово відмальовано, єдине маленьке зауваження: отвір в обеліску чомусь сірого кольору.

Завдання 3. Застосувати плагін до градієнтів. Бачу нові точки у градієнтах, плагіни застосовані правильно.

Все супер, переходьте до завершального уроку

Ірина С.Ukraine flag підтримує ЗСУ 30 June 2022 19:51  
Добрий вечір! Надсилаю дз до 9 уроку.
https://www.figma.com/file/kTIuOK9OuEpqJTYLXrXyT3/Homework-9?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Перемалювати ілюстрацію з градієнтами. Молодець, все добре. Основа обеліску трохи відділилась від підлоги, але це дрібничка.

Завдання 3. Застосувати плагін до градієнтів. Ви навчились застосовувати плагін, бачу нові точки у градієнтах.

Переходьте до наступного уроку

ІннаUkraine flag підтримує ЗСУ 30 June 2022 18:44  
Добрий день! Ось посилання на виконана домашнє завдання - https://www.figma.com/file/71PUJb4Y9wz1l4pgpe3qFS/Lesson-9?node-id=20%3A10

Дякую за класний урок!

Коментар frusia.pro:

Добрий день! Будь ласка

Завдання 1. Перемалювати ілюстрацію з градієнтами. Все правильно, добре повторили форми і самі градієнти, молодець! В правому верхньому кутку є невеликі відмінності, але схоже що там просто йде два градієнти, які накладаються один на одний. Потрібно вже вгадувати.

Завдання 3. Застосувати плагін до градієнтів. Бачу нові точки у градієнтах, все правильно.

Гарно попрацювали, переходьте до останнього уроку

КатеринаUkraine flag підтримує ЗСУ 19 June 2022 11:47  
Добрый день!)
ДЗ к 9 уроку

https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/%D0%BE%D0%B1%D1%83%D1%87?node-id=374%3A2

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Дуже добре! У більшості учнів є проблеми з градієнтом у верхньому правому куті, у вас все добре.

Завдання 3. Все правильно, бачу що застосували плагін, так як з'явились нові точки.

Рухайтесь до десятого уроку

Анна СмірноваUkraine flag підтримує ЗСУ 18 June 2022 00:26  
Доброго вечора!
Дякую за неймовірно цікаве домашнє завдання!
Надсилаю посилання:
https://www.figma.com/file/aoeG9bjIed8vDYp1taE0Ba/UI%2FUX-home-work-lesson-9?node-id=4%3A172

Коментар frusia.pro:

Добрий вечір! Будь ласка, рада, що вам сподобалось

Завдання 1. Все максимально точно перемальовано і підібрано. Навіть знайшли оригінальний шрифт для напису, молодець!

Завдання 3. Ви обрали досить складні фігури, особливо іконка браузеру Firefox. Бачу, що ви застосували плагіни, так як з'явилось багато нових точок у градієнтах. Все правильно.

Переходьте до останнього уроку

Люба Фурсеєва4 May 2022 16:08  
Андрей Дьяченко, дякую.
Андрей Дьяченко4 May 2022 14:59  
Огромное Вам спасибо!!!! Отличный урок и плагины!!! Вы лучшая!!!!
Нина24 December 2021 17:41  
Здравствуйте, результат по домашке тут https://www.figma.com/file/oBRO7AcMCIq4r8PaA3N9C7/%D0%94%D0%B7-7?node-id=307%3A258

Комментарий frusia.pro:

Задание 1. Есть небольшое несовпадание по цветам градиента в верхнем правом углу.

Комментарий frusia.pro ошибка дизайна Nina

Задание 2. Это если уже цепляться, то у иконки приложения Daum должна быть обводка серого цвета.

Комментарий frusia.pro ошибка дизайна Nina-2

Полина25 November 2021 21:17  
Добрый вечер!
Спасибо за еще один интересный урок, ждала, когда вы раскроете тему плагинов :) Проверьте пожалуйста мою домашку, ссылку прикрепляю
https://www.figma.com/file/cWzLEXXn8GtxvGBIfpwIbG/%D0%9F%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D1%8B?node-id=10%3A91

Комментарий frusia.pro:

Задание 1. Иллюстрация сделана отлично, молодец!

Задание 3. Хорошо, что вы взяли не простые геометрические фигуры, а именно логотипы, заодно потренировали другие инструменты Figma и лишний раз подметили для себя, как можно использовать градинеты, чтобы показать объем.

Виктория13 November 2021 12:30  
Здравствуйте) Проверьте пожалуйста задание:
1. https://www.figma.com/file/WELDofOaSfWpdMP2rjvZQN/%D0%93%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D1%8B?node-id=0%3A1

Комментарий frusia.pro:

Задание 1. Отобразили градиенты идеально, умничка!

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

To start learning, take tests and track progress, you need to enroll in the course. It's free.