05. Decorate styles and layers

We will see how to transform different layers using different visual techniques such as color, thickness, image, gradient, etc.

color fill

You can add color to the shape layer. You can set whether or not to show the color using the eye icon and – icon in the right inspector. It can be specified using the commonly used HEX code, and transparency and blending mode can be set.

image fill

You can also fill the image. You can place an image saved on your local computer inside the shape. When you place an image, you can also specify how the image appears inside the shape, such as by filling, aligning, stretching, or tiling. Additionally, Figma is capable of simple image correction on its own.

gradient fill

You can also fill it with various gradients. The general gradient input method is the same, and gradients can be filled in the form of Linear, Radial, Angular, or Diamond.

line

All layers except text layers can have as many borders as you want. You can set different thicknesses, colors and blend modes. The line can be set to be located at the center, inside, or outside of the shape, and is usually set to inside for pixel perfection.

join with end

End allows you to set the end of the line or path.

• Butt cap: This is the default option and the end is not marked separately.
• Round cap: Displays a rounded end.
• Projecting cap: Marks the angled end.

You can set how the bending part of the line is displayed in Join.

• Miter join: Displays in an angled form as the default option.
• Round join: The border will have rounded corners. (radius is border thickness)
• Bevel join: A diagonal beveled edge appears on the edge of the border.

shadow

Shadows can appear both internal and external. You can set the X,Y position of the shadow and specify the radius and scattering range of the blur effect. You can also overlap multiple shadows and set blend modes.

blur

You can express blur in two ways.

• Layer Blur: Blurs the ends of the layer itself.
• Background Blur: Blurs all content that appears behind the layer. (You will need to adjust the opacity of Fill to see the background blur effect.)

How to figma Basic