Color, Effects & Styles in Figma

Introduction

Color and effects are more than decoration — they communicate meaning, define structure, and bring personality to your design. In this deep dive, we’ll explore how to apply fills, strokes, gradients, shadows, and blurs in Figma. You’ll also learn how to create and reuse color styles, and how to apply visual hierarchy using effects — even on the free plan.

1. Fill, Stroke, Gradients, and Color Control

Image Placeholder: Examples of shapes using solid fill, gradient, and stroke variations

Every shape or text element in Figma can have:

• Fill: A solid color, gradient, image, or video
• Stroke: A border that wraps around the shape (outside, inside, or center)
• Opacity: Applied at the fill/stroke level or the entire layer

Gradients include:

• Linear
• Radial
• Angular
• Diamond

You can use the gradient editor to adjust color stops, direction, and transparency.

Pro Tip: Use multiple fills on a single object to create layered effects — like adding a translucent texture over a color background.

2. Effects: Shadows, Blurs & More

Image Placeholder: Side-by-side comparison of drop shadow, layer blur, and background blur

In the Effects section of the right panel, you can add:

• Drop Shadows – simulate elevation and depth
• Inner Shadows – create inset lighting effects
• Layer Blur – blur the selected object
• Background Blur – blur only the content behind the object (great for glassmorphism)

Each effect has customizable properties like blur amount, color, opacity, angle, and offset.

These visual cues help emphasize interactive elements (like buttons) and build realistic surfaces.

3. Creating and Applying Color Styles

Image Placeholder: Color style panel with saved swatches in use

Color styles help maintain consistency across your design and speed up changes later. Even on Figma Free, you can create and reuse styles within the same file.

To create a style:

1. Select an object with your desired color
2. Click the four-dot icon next to Fill or Stroke
3. Click “+” (Create Style) and name it (e.g., Primary/Blue, Text/Muted)

You can now apply this style to any element and update all instances at once by editing the style.

Best Practices:

• Use naming conventions like Primary, Accent, Background, Text/Heading
• Create both light and dark mode variants if needed
• Apply styles to strokes and effects, not just fills

4. Visual Hierarchy with Opacity & Effects

Image Placeholder: UI example showing varying opacities for headings, subheadings, and disabled text

Using opacity, contrast, and depth helps direct users’ attention and establish importance.

• High opacity + bold color = strong emphasis (buttons, headlines)
• Lower opacity or muted tones = less visual weight (secondary text, placeholders)
• Shadows help elevate elements (e.g., floating cards)
• Blurs and overlays draw focus while keeping context

Build hierarchy by varying these values, not just font size or color.

Example Hierarchy Strategy:

• H1: #000 @ 100%
• H2: #000 @ 80%
• Body: #000 @ 70%
• Caption: #000 @ 50%
• Disabled: #000 @ 30%

Conclusion

Color and effects are key to crafting beautiful, readable, and intuitive designs in Figma. Whether you’re adjusting shadows, applying gradients, or organizing your colors into styles, understanding these tools will level up your visual communication. And the best part? You can do all of this — even on Figma’s free plan.