Related Videos

• Add fills to text and shape layers

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with Can edit access to a file can add or adjust fills.

  Paints are colors, gradients, or images. Fills are just one of the ways you can use paints in Figma.

  Apply paints to text layers, or any vector object, this includes shapes, vector networks, and boolean groups. You can add, adjust, and remove fills in the Fill section of the right sidebar.

  

  Add fills

  Add fills to text layers, frames, and any vector objects. You can even add more than one fill to a single layer. This allows you to layer gradients over images, or apply blend modes to create unique effects.

  We treat each fill as a unique layer, so you can adjust the properties individually. You can even toggle the visibility of each fill independently.

  1. Select the layer(s) you want to add a fill to.
  2. In the Fill section of the right sidebar, click the icon to add a fill to the layer.
  3. Figma will add a default Solid fill with a hex value of C4C4C4. Click on the fill swatch to open the color picker:
  4. From the color picker you can select a paint type, choose a color, and apply blend modes. Learn more about using the color picker →

  Want to reuse fills across your designs? Create Color Styles from fills or strokes and apply them to objects in the canvas.

  Adjust fills

  Add, remove or adjust fill properties at any time. You can adjust fill in the Design panel of the right sidebar.

  Selection colors allows you to view and adjust the paints applied to a selection, individually. This also allows you to change the Fills of child objects, when you have the parent selected.

  If selected layers share the same fill properties, you can adjust them in the Fill section of the Properties Panel.

  If selected layers have different Fill properties, you can adjust each fill individually in the Selection colors section of the Properties Panel.

  • Hover over the left edge of the fill to reveal the drag handles . Click and drag on the handles to reorder fills.
  • Click the icon to toggle visibility off and the icon to toggle visibility on. Learn more about toggling visibility →
  • Click the icon to remove a fill from your selection.

  

• Paints in Figma

  Who can use this feature

  Supported on any team or organization plan.

  Anyone with can edit access can apply or edit paints

  Paints can be colors, gradients, or images. In Figma, you can use the Color picker to apply paints to fills and strokes.

  Paints can be applied to the following objects and shapes using the fill or stroke properties:

  • Text layers
  • Basic shapes
  • Vector networks
  • Boolean operations
  • Frames

  

  Paint types

  There are three different types of paints you can apply:

  • Solid: a solid color or paint.
  • Gradients: choose from four different gradients:
    • Linear (gradient): a progressive transition between two colors on a straight line. You can choose the angle of the line.
    • Radial (gradient): a circular gradient that has a color at the center which transitions to another color on the edge. This could be another color, or a fade to transparent.
    • Diamond (gradient): a gradient with four points that starts in the center of the object or layer. You can adjust the width and height of the gradient individually.
    • Angular (gradient): creates a gradient clockwise from the starting position. You can adjust the location of both colors in the gradient to create a softer or harsher angle.
  • Image or GIF: a static image or animated GIF. Learn more about adding images to your designs.

  

  Figma Tutorial: Gradients
• Color models in Figma

  Before you start

  Who can use this feature

  Colors are available on any team or plan

  Anyone with can edit access to the file can use the color picker and select a color model.

  There are lots of terms used to describe color. In this article, we use the term color model to describe the different ways your can represent a color.

  Figma allows you to see colors across five color models: HEX, HSB, HSL, CSS, and RGB.

  Switching between color models only affects how Figma describes colors, it doesn't affect how Figma renders them.

  

  Color profiles do affect how Figma renders colors. If you are using the Figma Desktop app, you can choose to apply a different color profile to your working space. 

  Regardless of your desired color profile, Figma exports all assets using the sRGB color profile. Learn about color management in the Desktop app.

  Color models in Figma

  By default, Figma represents color values using the HEX model. You can also view color notation for other models in the color picker.

  HEX

  Is the default color model in Figma and refers to the Hexadecimal color. This is an alphanumeric shorthand representative of the RGB values.

  Creators in web, or digital design refer to the notation for this color model as hexcodes.

  RGB

  RGB or Red Green Blue is the most commonly used color model.

  Every color that is rendered on a monitor or screen will be made up of varying amounts of Red Green and Blue.

  You may have also seen RGBa referenced in other resources. The a in RGBa stands for alpha, which represents the opacity of the color. This represents opacity as a value between 0 and 100%.

  HSB

  Hue Saturation Brightness is an alternative representation of the RGB model.

  This is based around how the human eye perceives color, versus how a display would (in RGB).

  All color models will have an additional Alpha channel (or value), which represents the Opacity of the color.This represents opacity as a value between 0 and 100%.

  HSL

  Hue Saturation Luminance is another color model based around how the human eye perceives color.

  Like HSB, it is an alternative representation of the RGB model. The main difference between HSB and HSL is how saturation and lightness are treated.

  CSS

  The CSS color model allows you to view or enter RGBa values using CSS syntax. This includes the format, followed by the values for each color: rgba(47, 128, 237, 1)

  Want to communicate colors to a developer or engineer? The CSS model lets you copy CSS-friendly notation for the selected color. This lets you paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.

  View Color models in the Color Picker

  While Figma exports everything in the sRGB color model, you may want to view colors in another color model.

  View and update colors across different color models in the Color picker.

  1. Click on the Fill or Stroke in the right sidebar to open the Color picker.
  2. Below the Hue and Opacity sliders you can see the current color model and the corresponding values.
  3. Use the drop down to switch color models. Choose between HEX, HSB, HSL, CSS and RGB:
  4. Figma will show the values in the notation you selected.
• Create unique effects with Blend modes

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Users with edit access to a file can add or adjust Blend modes

  Blend Modes allow you to define how you want two layers to blend together. This involves taking the pixels from each layer and applying calculations to them.

  This allows you to adjust aspects of an image, like the background color. Or, create interesting overlays and textures.

  You can adjust the Blend mode of an entire layer, or an individual fill. You can only apply one blend mode to each layer or Fill.

  Blend Modes

  There are 16 Blend modes available in Figma.

  • Normal
  • Darken
  • Multiply
  • Color burn
  • Light
  • Screen
  • Color dodge
  • Overlay
  • Soft light
  • Hard light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

  Fill

  1. Click on the Fill thumbnail in the Properties Panel to open the Color picker.

  2. Click the droplet icon in the top-right corner of the Color picker to select a Blend mode:

     

  3. Select the desired Blend mode to apply. You can only apply one blend mode to each fill.

  4. Click the X to return to the Canvas.

  Tip: Preview blend modes on the canvas by hovering over each option in the menu before selecting it.

  

  Layer

  Apply a blend mode to an entire layer in the Layer section of the right sidebar.

  1. Select the layer you want to apply the blend mode to.

  2. In the Layer section of the Properties Panel, click on the blend mode field. This will be set to Pass Through by default.

     

  3. Select the desired Blend mode to apply. You can apply one blend mode to each layer.

• View and adjust colors in a mixed selection

  Before you Start

  Who can use this feature

  Users on Any plan can use paints in their designs

  Users with Edit access can view and update paint properties in a mixed selection

  The Selection Colors feature allows you to view and adjust any colors applied to objects in a selection.

  • Select objects or layers and view or adjust individual colors in the selection.
  • Select a parent object, like a Frame, Group, or Component. View and adjust the color properties of any child objects.

  Note: You can still adjust the properties of the parent object in the Properties Panel. This allows you to update Fill and Stroke properties of the Frame, without affecting child objects.

  Selection colors include:

  ✅ Fills
  ✅ Strokes
  ✅ Solid colors
  ✅ Gradients (linear, radial, angular, diamond)
  ✅ Boolean groups*

  Selection colors do not include:

  🚫 Images
  🚫 Hidden fills
  🚫 Masks

  *Note: Only colors applied to the combined Boolean group will be included in the Selection Colors. Colors applied to any child objects won't show up in the Selection Colors section.

  View Selection Colors

  View colors in your selection in the Selection Colors section of the Properties Panel.

  Figma groups colors into Color Styles and Paints - any Fills or Strokes that you haven't saved as Styles.

  Paints or Styles only appear once in the Selection colors section. By default, we show the three most frequently used Paints and Styles.

  1. Click on a Paint to open the Color picker. This allows you to adjust the paint type, color, hue, opacity, and blend mode. Or, pick another color from your Document colors.
  2. Click on a style to open the Style modal. This allows you to select from your list of local styles, or styles from enabled libraries.
  3. Click the detach icon
     to detach the style
  4. Click the target icon
     to select all layers that use that color
  5. Click the Style icon
     to open the Style picker. This allows you to apply a Style to the selected color, or create a new Style.
  6. Use the percentage field to adjust the opacity of a paint
  7. Click the See all colors or See all styles link to view the rest of the colors in the selection

  

  Want to swap two colors around? We won't update the Selection colors section until you close the Color Picker.

  1. Click on the first color you want to swap.
  2. Select the second color in the Document colors section of the Color picker.
  3. Without closing the Color picker, click on the second color in the Selection Colors section.
  4. Select the first color in the Document colors section.
  5. Close the Color picker.