Layer Styles and Effects in Figma

1. Drop Shadow Effect

The Drop Shadow effect in Figma adds a shadow to a layer, creating a sense of depth and dimension. This effect is controlled by several parameters, including the shadow's color, offset (horizontal and vertical distance from the layer), blur radius, and spread.

For example, when designing a card interface, applying a drop shadow to the card can make it appear as if it is slightly raised above the background. This subtle effect enhances the visual hierarchy and makes the card stand out more prominently.

Think of a drop shadow as the shadow cast by an object in the real world. Just as a book on a table creates a shadow beneath it, a drop shadow in Figma mimics this natural effect to give your design a more realistic and three-dimensional appearance.

2. Inner Shadow Effect

The Inner Shadow effect is similar to the Drop Shadow but is applied inside the layer's boundaries. This effect is useful for creating the illusion of depth within a layer, such as highlighting the inner edges of a button or a container.

For instance, when designing a button, applying an inner shadow can make the button appear pressed or recessed. This effect can guide users to perceive the button as interactive and tactile.

Imagine an inner shadow as the effect you see when you press a button on a remote control. The button appears to sink slightly into the surface, creating a shadow around its edges. This same principle is applied in Figma to give elements a more tactile and interactive feel.

3. Gradient Overlay

The Gradient Overlay effect allows you to apply a gradient color fill over a layer. This effect can be linear, radial, or angular, and it can be adjusted to create various visual effects, such as adding depth, highlighting, or creating a sense of movement.

For example, when designing a hero section of a website, applying a gradient overlay to the background can add a dynamic and modern look. The gradient can blend multiple colors smoothly, creating a visually appealing transition that draws the user's eye.

Think of a gradient overlay as a smooth transition between colors, much like the colors of a sunset blending into each other. This effect can transform a simple background into a captivating visual element that enhances the overall design.

4. Stroke Effect

The Stroke effect adds a border around a layer, which can be adjusted in terms of color, thickness, and position (inside, outside, or centered). This effect is useful for creating outlines, borders, or frames around elements.

For instance, when designing icons, applying a stroke effect can help define the shape and make it more visible. A stroke can also be used to create a border around a text box or a container, enhancing its visual separation from the background.

Imagine a stroke as the outline of a drawing. Just as an artist uses a pen to outline a sketch, a stroke in Figma outlines your design elements, making them stand out and providing a clear boundary.