Fill and gradient in Figma

   By default, each figure in Figma is created in gray. Let's figure out how the fill works.

   So, the fill is in the inspector - Fill. You can add several fill layers at once by clicking several times on "+". You can hide the fill layer by clicking on the "eye", or delete it by clicking on "-". 

   To change the fill color, click on the color itself in the inspector. Select a color, edit it: change saturation, transparency.

   Just below we have the color palette of this document. These are all the colors that we used in our project. Here you can also change the color palette to the colors that are used in our group.

   Above the palette are the fill modes themselves.

   Let's take a look at the "linear gradient" (Linear gradient). By default, we have two extreme points - this is a 100% filled color and this same color, only filled at 0%. We can always change these values, that is, you can always recolor one of the points, add transparency to it, etc.

   You can change the angle of the gradient by dragging a point or a line. In addition to the gradient line itself, there is an additional control point, which is responsible for the angle of contact of the gradient. If you drag this point while holding down Alt, the angle of incidence will change noticeably.

Fill and gradient in Figma

   To add new colors to the gradient, you need to hover the cursor over the line itself, control points will appear. Let's put them where we need them. Each of these points can be changed, change its color. To delete a control point, you need to select it and press Delete.

   Radial gradient - essentially, this is the same linear gradient, but in the form of a circle. All its settings will be the same.

   Fill layers can be copied all together and applied to another shape. To do this, select the entire line with this fill and press Ctrl + C, and then on the new shape Ctrl + V.

23:20
No comments yet. Be the first to add a comment!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.