Paints & Gradients

Applying fills to layers lets you add color to text layers, shapes, vector networks, and boolean groups. Figma treats each fill as its own layer, allowing you to modify properties individually and toggle each fill's visibility on or off.

Here's how to add a fill:

1. Select the layer(s) you want to change.
2. In the Fill section of the Design panel, click the color swatch to open the color picker.
3. Pick a color manually, use the eyedropper to sample from your design, or enter a hex code.

You have the option to use colors, gradients, or even image fills for your layers. First, make sure a fill or stroke is applied to your layer to access the color picker.

Here's how to use the color picker:

1. Click on the current color swatch in the Fill section of the Design panel to open the color picker.
2. Within the color picker, you can either create a custom color or select from predefined color styles and variables from your libraries.
3. Choose your fill type from Solid, Gradient, Pattern, Image, or Video.
4. Use the hue slider to fine-tune your color. Dragging left or right adjusts the hue.
5. The second slider controls the color's opacity, enabling subtle transparency effects.

The color picker also provides options to preview and apply blend modes, allowing you to customize how your color interacts with layers beneath it.

The eyedropper tool allows you to quickly sample and apply colors from any part of your project, ensuring your palette remains consistent.

Here's how to use the eyedropper tool effectively:

1. Choose the layer you want to update with a new color.
2. Press the I letter key to activate the eyedropper tool. You can also initiate the eyedropper from within the color picker. Just click the eyedropper icon next to the color swatch in the Fill section of the Design panel.
3. Move your cursor over the desired color. A magnifying window pops up, displaying the color and its hex code, giving you a precise view of what you're about to select.
4. Click to capture and apply this color to your selected layer.
5. Alternatively, you can pick colors from your team's shared libraries by opening the Libraries tab in the Fill modal and clicking on the desired color with the eyedropper tool active. These library colors can also be accessed and selected under the Hex code section in the Custom tab of the Fill modal.

Blend mode allows you to control how two layers merge, affecting the pixels of each to produce various visual effects. You can find blend modes inside the Fill section. Open the Fill modal by clicking on the swatch, and in the top-right corner, there’s a blend mode option to change how that fill mixes with the layer below. It can also be found in the Design panel under the Appearance section when you select a layer. Click the Blend mode dropdown (shaped like a teardrop) to choose how your layer blends with layers below it.

These modes are categorized based on their effects:

• Default: Pass through and Normal modes that don’t apply alterations.
• Darker: Modes like Darken, Multiply, Color burn, and Plus darker enhance shadows and deepen colors, perfect for adding depth or texture to images.
• Lighter: Modes like Lighten, Screen, Color dodge, and Plus lighter brighten areas and create highlights and are useful for achieving a lighter, airier feel in designs.
• Contrast: Overlay, Soft light, and Hard light adjust contrast by blending light and dark elements for a balanced effect, ideal for complex textures or photorealistic effects.
• Comparative: Difference and Exclusion modes provide creative, often unexpected results by contrasting colors and tones.
• Color: Modes like Hue, Saturation, Color, and Luminosity focus on color adjustments, allowing for nuanced color manipulation across layers.

Gradients are a design technique that creates a smooth transition between two or more colors, adding depth, texture, and visual interest to designs. They come in various types, each offering unique effects:

• Linear gradients: These involves a color transition along a straight line. You can adjust the angle if you need a directional flow, like mimicking sunsets or horizon lines.
• Radial gradients: They originate from a central point and move outward in a circular pattern. Radial gradients are perfect for creating focal points or simulating light sources in designs.
• Diamond gradients: These gradients start from the center and extend out in four directions. They're great for highlighting central elements or adding a modern twist to icons and buttons.
• Angular gradients: Rotating around a starting point, angular gradients introduce a dynamic, circular transition effect. They help convey motion or energy, like in logos or dynamic backgrounds.

Applying a gradient adds a dynamic and visually appealing element to your designs. Here's how to apply a gradient to a layer:

1. Choose the layer you want to apply the gradient to.
2. In the Design panel, click on the Fill color to open the modal.
3. Click on the Gradient icon.
4. Select from linear, radial, or any other available gradient type.
5. Gradients consist of stops that define the transition colors. Click on the gradient bar to add or select a stop, then use the color picker to adjust its color. You can drag stops to change the transition's smoothness.
6. Adjust the opacity of stops to create softer transitions or make certain colors stand out more, adding a sense of depth or light.
7. Adjust the angle directly on the canvas to set direction and spread.

Applying gradients to the background of an interface can create a visually engaging space. However, it's crucial that gradients do not compromise the readability or navigability of your interface. Using analogous colors (the colors next to each other on the color wheel) provides smoother transitions and ensures there are no harsh contrasts. This choice is particularly supportive for users with visual impairments, maintaining clarity and preventing strain.

Recommendations for building a gradient background include:

• Prioritizing legibility: Ensure text and UI elements remain readable against the gradient.
• Testing across devices: Gradients can display differently on various screens, so it's important to check their appearance across devices.
• Using gradients purposefully: Gradients should enhance your designs, not distract from the functionality.

Applying gradients to a button can greatly enhance its appeal, making it an eye-catching call-to-action (CTA) on your page. Here are some tips for effective gradient use on buttons:

• Aim for smooth transitions. Sharp color changes can reduce visual appeal and affect accessibility.
• Choose colors with similar hues for a soft and attractive gradient.
• Avoid greyish tones in the center, as they can create unattractive grey areas and clutter the design.

Using gradients on strokes might not be the first design choice many think of, but it can significantly enhance the appearance of text, icons, or shapes, adding a layer of sophistication. Moreover, visually striking strokes can draw attention to specific objects, making them stand out.

To apply a gradient to a stroke:

1. Select the layer you wish to modify.
2. Navigate to the Stroke section in the Design panel. By default, the stroke is black with a thickness of 1. Modify the thickness as you like. Adjust the stroke's thickness for a more pronounced effect.
3. Next, navigate to the color switcher and select the Gradient icon.
4. Modify the gradient settings to achieve your desired effect.

Color styles are saved colors you use again and again in your design. For example, if your brand’s main blue is saved as a color style, you can apply it anywhere: buttons, backgrounds, text. If someone changes that blue in the style, all places using it update automatically. This keeps your colors consistent across the whole project.

How to create:

• Click on the color swatch in Fill section of the Design panel.
• Select a color and click on the + icon in top right corner of the modal.
• Select the Style tab and fill in the details for saving.
• You can find these saved styles in the Libraries section of the color picker modal.

Figma’s contrast checker helps you make sure your text and background colors have enough contrast to be easy to read.^[1] This is important for accessibility, so everyone, including people with vision issues, can use your designs comfortably.

Here’s how to use it:

• Select a layer and go to the Fill section in the Design panel.
• Click the color swatch to open the color picker modal.
• In the color picker modal, click the Check color contrast icon at the top-right corner.
• In the popup modal, Figma automatically shows the contrast ratio between the text color and its background.
• It indicates if the contrast meets accessibility standards like WCAG AA or AAA for normal text, large text, or graphics.
• You can click the AA/AAA button in the modal’s top-right corner to automatically adjust the colors to meet accessibility requirements.