In the sixth part on the basics of Figma, we learn how to work with gradients. Specifically, we will understand what types of gradients exist, how to create and customize them in practice. We will discuss plugins for Figma and install and use several of them right during the lesson.
- Gradients and Color Fill in Figma
- Linear Gradient (Linear)
- Radial Gradient (Radial)
- Angular Gradient (Angular)
- Diamond Gradient (Diamond)
- Gradient Settings
- Opacity
- Eyedropper
- Ability to Set Color Code
- Adding Points to the Gradient
- Angle and Direction of the Gradient
- Practical Examples
- Plugins for Gradients in Figma
- How to Work with Plugins?
- Installation Instructions for the Plugin using uiGradient as an Example
- Working with the uiGradient Plugin
- Easing Gradients Plugin
- Chromatic Figma Plugin
- Homework
- Conclusions
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 key points, we can modify 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. Similarly, we can assign a color to the object without using the eyedropper by choosing it manually. For this, we use the right sidebar. Navigate 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 circle of the selected color with the mouse on the color picker panel.
In this same panel in the Fill drop-down menu at the top left, instead of a solid color fill, you will be able to choose a gradient fill. Most graphic editors have four types of gradients: linear, radial, angular, and diamond gradient (rhomboid).
The color transition in this type of gradient occurs along a straight line. It is worth noting right away that in almost all cases, you will be using this gradient. It conveys transitions in the most natural and attractive way. To set a linear gradient fill for an object, select it from the Fill dropdown list on the panel and set the colors for the points, as shown in the video below.
Unlike linear gradients, in a radial gradient the color spreads out in a circle, starting from its center. The color on the left will be reflected at the center, and on the right – at the periphery. To use a radial gradient, in the Fill menu select Radial.
The color transition in this gradient mimics the shape of a spiral and at the color junctions imitates a "corner". Let's see how this works on the Fill panel.
Creates color transitions from the center of the diamond to its external facets. Similar to a radial gradient, but in the shape of a diamond. It should be applied in the following way.
It's not enough to convert the fill into a gradient to achieve the desired design result. Therefore, Figma has additional settings, namely:
- opacity;
- eyedropper;
- ability to specify a specific color code;
- adding additional points;
- angle and direction of the transition.
Allows changing the saturation of the color transition by modifying the opacity of the key point. For example: if we have a linear gradient consisting of two points, the first with 100% opacity and 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.
Allows you to copy colors for key gradient points. In practice, a very useful feature that allows, for example, to extend the background of an object by darkening/lightening it from the other edge.
Allows the designer to specify the color for each key point accurately. The Fill panel allows working in various 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 assignment can specify the required colors with specific values. Examples of HEX codes: #021A0D or #C22900.
The three previous functions also work with filling an object with a single color (Solid mode).
Allows for better control over 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.
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 on top of the shape and manually rotate it by holding down the left mouse button.
Gradients have a multitude of applications in both graphic and UI design. Let's take a look at some examples that you can use independently in practice.
Adding volume to the figure. We simulate a three-dimensional render, but using only two-dimensional tools. At the same time, the ball appears quite voluminous. Color transitions replace the play of light and shadow.
Simulation of figure movement. Again, it is only through color transitions and playing with opacity that the human eye perceives the object as moving. Such illustrations, even in a static form, can become a wonderful visual addition to the site.
Volumetric interface elements. Support for the theme of volume can also be achieved through interface elements, such as gradient buttons. Remember that moderation is key in everything!
Gradient in the background. Compare the two examples of filling below. Both certainly have a right to exist, but agree that the second has more advantages. The human eye has something to latch onto, the light area focuses attention on the text, and the color solution looks more interesting.
Another example - compare the background fill with a gradient and a single color. The gradient adds just a few accents, but makes the image overall more interesting.
If you have gone through the previous lessons, I think you have already noticed that we are currently studying the basic functionality of the graphic editor Figma. But besides this, there is a possibility to add new capabilities through plugins.
Plugin – is a separate module created by a third-party developer to extend the functionality of Figma or to facilitate or speed up the work of existing capabilities.
In the main menu of Figma, you have the Plugins item, which allows you to run already installed plugins, as well as find and add new ones. This is handled by the Browse Plugins in Community item. To access the main menu on the Windows platform, you need to click on the Figma logo in the upper left corner of the application window.
Community in Figma – is a community of Figma users, where useful developments are shared with each other for free. Thus, in addition to plugins, you can find icon sets, website layouts, mockups, templates, illustrations, and much more there.
This extension quickly applies a gradient from among dozens of well-chosen color combinations to your selected shape. If you find it difficult to choose a good gradient, then uiGradient was created for you.
This extension quickly applies a gradient from among dozens of well-chosen color combinations to your selected shape. If you find it difficult to choose a good gradient, then uiGradient was created for you.
Let's try to install your first plugin for Figma:
- Go to the main page of Figma by clicking on the home icon in the upper left corner.
- Next, click on Explore community in the menu on the left.
- Select the Plugins tab and enter the name of our extension «uiGradient» in the search field. Then press Enter.
- The search will return a list of results, find the one you need and click the Install button to the right of uiGradient.
- Done, no need to restart the application.
This action could also be done through the Plugins tab and the Browse Plugins in Community function. You will be able to explore all the works of the Figma Community on your own.
The extension is installed. Now you need to understand how to activate 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 invoke 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.
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 cool to see with a black-and-white palette.
Example: very often, to improve the readability of text on a photo, a gradient fill is applied on one side that should smoothly fade into the photograph. But 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 the shape with the already applied gradient, and then run the plugin through the menu or search.
The other problem, after harsh transitions, is the so-called «color dirtyness». Between two key points of the gradient, the computer sometimes selects quite a dirty transition. This problem can be fixed manually by adding new key points with cleaner color shades.
But if you still don't quite feel the 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.
Due to the large influx of those wishing to take the course, I am making the homework check paid. 30$ (at the current exchange rate), I will transfer 10% to the Armed Forces of Ukraine. For one donation, I will check the homework for all lessons.
For details, write in the direct messages of Instagram @frusia.pro
The course and lessons remain free of charge.
Homework is no longer checked for citizens of Russia.
- Recreate the image with the illustration presented below as accurately as possible. Rely on the newly acquired skills of working with gradients;
- Install all three gradient extensions that you learned about in the lesson;
- Draw any three shapes and independently adjust different gradients. After that, make duplicates of these shapes and apply the Chromatic Figma plugin to them. Submit the result with a link to the Figma file.
Practicing with gradients in Figma will greatly expand your capabilities and make your design more interesting and diverse. Additionally, information about the existence and use of plugins will make your work easier in the future. I hope you have thoroughly understood the material of this lesson and complete the homework I have prepared for you, as an even more exciting world of design awaits you ahead.
Follow me on Instagram @frusia.pro to stay updated on the announcements of new lessons, view the results of homework checks in stories, ask your questions, and you can also look forward to a multitude of useful posts about design.
Continue learning
