Gradient and Pattern Fills in Figma

1. Linear Gradient

A Linear Gradient in Figma is a fill that transitions colors along a straight line. This type of gradient is useful for creating smooth transitions between two or more colors. You can control the direction of the gradient by adjusting the angle.

For example, if you are designing a button, you can apply a Linear Gradient to give it a sleek, modern look. By setting the gradient from top to bottom, you can create a subtle transition from a lighter color at the top to a darker color at the bottom, mimicking the effect of light hitting the button.

2. Radial Gradient

A Radial Gradient in Figma is a fill that transitions colors outward from a central point, creating a circular or elliptical effect. This type of gradient is ideal for simulating light sources or creating focal points in your design.

Imagine you are designing a logo with a sunburst effect. By applying a Radial Gradient, you can create a sun-like appearance with the center being the brightest and the colors gradually fading outward. This technique can add depth and visual interest to your design.

3. Angular Gradient

An Angular Gradient in Figma, also known as a Conical Gradient, transitions colors around a central point in a circular pattern. This type of gradient is useful for creating unique and eye-catching effects, such as color wheels or circular patterns.

For instance, if you are designing a circular icon, you can use an Angular Gradient to create a rainbow-like effect. By setting the gradient to transition through a range of colors around the center, you can achieve a vibrant and dynamic look that stands out.

4. Pattern Fill

A Pattern Fill in Figma allows you to apply a repeating pattern to your design elements. This can be a tiled image or a predefined pattern, adding texture and visual interest to your designs. Pattern fills are versatile and can be used for backgrounds, icons, or any other design element.

Consider designing a website header with a subtle background pattern. By applying a Pattern Fill, you can add a textured look that enhances the overall aesthetic without overwhelming the content. For example, you might use a geometric pattern to create a modern and cohesive design.