In Part 6 of Figma Basics, we'll learn how to work with gradients. Namely: what are the types of gradients, what settings can be applied to them and how to work with gradients in practice. We will also learn about plugins for Figma and master the process of installing them using a practical example.
- Gradients and color fills in Figma
- Linear gradient
- Radial gradient (Radial)
- Angular Gradient (Angular)
- Diamond Gradient
- Gradients settings
- Opacity
- Pipette
- Ability to set color code
- Adding more gradient points
- Gradient angle and direction
- Practical Examples
- Figma gradient plugins
- How to work with plugins?
- uiGradient plugin installation example
- Working with the uiGradient plugin
- Easing Gradients Plugin
- Chromatic Figma Plugin
- Homework
- Conclusions
Surely most of the readers of this lesson already know that the – it is a smooth transition from one color to another. To form a gradient, at least two colors are needed, in other words, two key points, between which a color transition will be formed, consisting of many other (intermediate) points.
With the help of key points, we can control the gradient, the more there are, the more predictable color transitions we will get.
You and I already learned how to assign color to an object using the eyedropper in lesson five. In exactly the same way, we can assign a color to an object without using the eyedropper by selecting it ourselves. For this we use the right sidebar. Select your object and click on the Fill option in the panel. By default your object will be filled with one color (Solid). We can change it by moving the slider with the mouse on the color bar.
On the same Fill panel, instead of filling with a color, you can choose a gradient fill. There are four types of gradients in graphic editors: linear, radial, angular, and diamond-shaped (diamond-shaped).
The color transition in this gradient is carried out in a straight line. It should be noted right away that in almost all cases, you will use this particular gradient. It most naturally and attractively conveys color transitions. To give your object a linear gradient fill, select it from the Fill panel and set the colors for the dots as shown in the video below.
Unlike a linear gradient, in a radial gradient, the color diverges in a circle, starting from its center. To use a radial gradient, select it from the Fill panel.
The color transition in this gradient repeats the shape of a spiral and simulates an "angle" on color connections. Let's see how it works in the Fill panel.
Creates color transitions, shading from the middle of a rhombus (diamond) to its edges. You can apply such a gradient in the following way.
It is not enough just to apply a gradient to get the desired result for the design. Therefore, Figma has additional settings for gradients, namely:
- opacity;
- dropper;
- the ability to set a specific color code;
- adding more gradient points;
- Angle and direction of the gradient.
Allows you to change the saturation of the color transition by changing the opacity of the key point. For example: if we have a linear gradient that consists of two points, the first with 100% opacity, the last 0%, then exactly in the middle of the gradient transition, the opacity will be 50%, since the editor will automatically calculate the opacity percentage.
Allows you to copy the colors for the key points of the gradient. In practice, a very useful function that allows, for example, to extend the background of an object, darkening / brightening it from the other side.
Allows the designer to specify precise color combinations. At the same time, the Fill panel in Figma allows you to work in different color schemes. The most popular HEX and RGB are actively used when creating brand books. For example, the customer in the TOR can often prescribe the desired colors with specific combinations.
The three previous functions absolutely also work with filling an object with one color (Solid).
Allows you to better control color transitions: avoid transitions with dirty colors, as well as create multi-color gradients.
A popular successful example of a multi-color gradient is the logo of the social network Instagram, which has been popularizing the trend for gradients in the digital sphere for several years in a row.
I think from the previous videos you already visually understood that we can set the gradient to any angle. To do this, we need to open our gradient so that the points are visible on top of the shape and manually rotate it with the left mouse button.
Gradients have a ton of uses in both graphic and UI design. Let's take a look at some good options together that you can use on your own in practice.
Adding volume to a shape. We don't use 3D here, but the ball seems to be quite voluminous. Color transitions imitate the play of light and shadow.
Simulate the movement of a shape. Again, it's only through color transition and playing with opacity that the human eye perceives the object as a shape that moves. Such illustrations, even in static form, can be an excellent visual addition to the site.
You can also support the theme of volume with the help of gradient buttons.
Gradient on background. Compare two background fill examples below. Both, of course, have the right to life, but you must admit that the second has more advantages. The human eye has something to catch on, the light area focuses on the text, and the color scheme looks more interesting.
Another example is comparing a background fill with a gradient and a single color. The gradient adds quite a bit of accent.
If you have gone through the previous lessons, I think you have already paid attention to the fact that we are still studying the basic functionality of the Figma graphic editor. But besides it, there are special plugins – these are additional modules that are made to facilitate, speed up work or add new functionality.
At the very top panel of Figma, you have the Plugins tab, which allows you to run already installed plugins, as well as find and add new ones (the Browse Plugins in Community menu item is responsible for this).
Community in Figma – it is a space in which users share usefulness with each other. For example, in addition to plugins, you can find icons, site layouts, mockups, illustrations and much more there.
This tool offers you a choice of dozens of successful color combinations. If it is difficult to find a good gradient, uiGradient will help with this.
Let's use his example, try to install your first plugin for Figma. For this:
- Go to the main Figma page and click on your nickname in the upper left corner. You should have the option to go to Community - click on it.
- Select the Plugins tab at the top of the window and enter the name of our plugin “uiGradient” in the search box.
- Search pulls up results, select the one you want and click on it.
- At the top we have an Installed button - press it.
- For the plugin to work, you need to restart Figma.
The same action could be done through the Plugins tab and the Browse Plugins in Community function. But it was important for me to show you exactly how we can access the Figma Community so that you can explore it further on your own.
Everything is pretty simple here. You need to select the object and run uiGradients. We can do this in two ways:
- through the Plugins tab, selecting the plugin we need from the list;
- through the search by pressing Ctrl (Cmd) + / and writing in the search bar the name + Enter.
The second method can be more convenient if you want to install a lot of plugins in the future and it will be more difficult to quickly find them in the list.
This is a nice tool for making softer transitions in the middle of the gradient itself. Essentially, the plugin is designed for gradients that fade into transparency. It works especially well with black and white.
Example: very often, to improve the readability of the text in the photo, on one side of it, a gradient fill is made, which should smoothly dissolve into the photo. But in small images, the transition can be quite noticeable. This is where the Easing Gradients plugin comes in handy, allowing you to adjust the gradient using curves.
In order for the plugin to work, you must first select a shape with an already applied gradient, and then run the plugin through the panel or search.
The second problem, after hard transitions, is the so-called “color muddiness”. Between the two key points of the gradient, the machine sometimes picks up a rather messy transition. You can fix this problem manually by adding new keypoints with purer color tones.
But if you still don’t see colors well enough, and this is common to all beginners, then you can use the Chromatic Figma plugin, which will visually improve the gradient for you.
Select your gradient, then run the plugin, select Fix Gradient and click on the Apply button.
- Copy the picture with the illustration below. Recreate it as accurately as possible, based on the skills of working with gradients that you received in this lesson;
- Install the three gradient plugins described in this tutorial;
- Draw any three shapes and try to give them different color gradients. Then make duplicates of these shapes and apply the Chromatic Figma plugin to them. Send the result with a link to the Figma file.
The ability to work with a gradient in the Figma graphics editor will give you many opportunities to make UI design interesting and diverse. And information about the existence and use of plugins will facilitate your work in the future. I hope you have learned the material of this lesson well and do the homework that I have prepared for you, because an even more exciting world of design awaits you ahead.
Follow me on Instagram – @frusia.pro – stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.
Stay tuned!