Effect Styles in Figma

Key Concepts

• Drop Shadow
• Inner Shadow
• Blur
• Background Blur

Drop Shadow

Drop Shadow in Figma adds a shadow effect to an object, creating a sense of depth and separation from the background. This effect is particularly useful for making elements stand out. To apply a drop shadow, select the object, go to the Effects panel, and choose "Drop Shadow." Adjust the offset, blur, and color to achieve the desired effect.

For example, adding a drop shadow to a button can make it appear elevated, enhancing its visibility and interactivity. This effect is commonly used in user interfaces to highlight clickable elements.

Inner Shadow

Inner Shadow in Figma adds a shadow effect inside an object, creating a recessed or embossed appearance. This effect is useful for giving elements a three-dimensional look. To apply an inner shadow, select the object, go to the Effects panel, and choose "Inner Shadow." Adjust the offset, blur, and color to achieve the desired effect.

For instance, applying an inner shadow to a text box can make it look like it is carved into the background, adding a subtle depth that enhances the overall design.

Blur

Blur in Figma applies a Gaussian blur effect to an object, softening its edges and reducing clarity. This effect is useful for creating focus or emphasizing certain elements. To apply a blur, select the object, go to the Effects panel, and choose "Blur." Adjust the radius to control the intensity of the blur.

For example, blurring the background of a hero image can draw attention to the foreground text, creating a sense of depth and hierarchy. This effect is often used in landing pages to highlight key messages.

Background Blur

Background Blur in Figma applies a blur effect to the background of a frame, while keeping the foreground elements sharp. This effect is useful for creating a sense of separation and focus. To apply a background blur, select the frame, go to the Effects panel, and choose "Background Blur." Adjust the radius to control the intensity of the blur.

For instance, using background blur in a modal window can make the content within the window stand out, while the blurred background provides context without distracting from the main message. This effect is commonly used in pop-ups and dialog boxes.

Examples and Analogies

Think of drop shadow as placing a book on a table. The shadow cast by the book gives the illusion that it is raised above the surface. Similarly, in Figma, a drop shadow can make an element appear elevated.

Inner shadow can be compared to carving a design into a piece of wood. The shadow inside the carved area gives the impression of depth and texture. In Figma, an inner shadow can add a similar sense of depth to elements.

Blur is like looking through a frosted window. The view is softened, but you can still make out the shapes. In Figma, blur can be used to soften backgrounds or create a sense of focus on specific elements.

Background blur is akin to using a camera lens to focus on a subject while blurring the background. This creates a clear distinction between the subject and the surroundings. In Figma, background blur can be used to highlight foreground elements while keeping the background contextually relevant.