Colors are one of the important elements in design. The well use of color can move audience and make them felt connected emotionally. Color is one of the ways that humans relate to objects. From experiencing the chaning seasons to watching a truly amazing sunset, color evokes feelings. As a UX designer, it’s important to learn how to harness that emotioal connection as you add color to designs.

Figma has a dynamic system that allows designers to enhance mockups with color. Let’s examine the basics.

Create and apply colors using Fill

1. Open a file in Figma.
2. Select the Rectangle tool. It’s listed as the fourth icon from the left in the toolbar, to the right of the Frame tool.
3. Draw a rectangular shape on the Frame.
4. Select the shape.
5. In the Properties panel, on the right side of the Figma screen, there is a section toward the bottom titled Fill.
6. In this section, find the box with the default color, gray (hex code: C4C4C4). Click the Color Box to make the color palette appear, as shown in the image below. Choose any color on the spectrum. For example, you can drag the Color Selector to the top left corner for a crisp white or to the bottom left corner for a deep black.
7. Below the color box is the Color Picker, which is also known as eyedropper. Using the Color Picker you can take a “drop” of color for one design, image, or text on your Canvas, and apply it to another design element. Try it out in your own design.

Adjust color values

There are other elements in manipulating colors beside changing the color.

Gradient

At the top left of the Fill section, you’ll notice the word Solid. If you click the word Solid, a dropdown menu will appear with some fun things that you can do with gradients. Think of gradient as opacity but from specific directions. The types of gradients you can apply are:

• Linear: Full color on one side of the shape that fades out
• Radial: Full color at the center of the shape that fades out in a circle
• Angular: Full color in one area of the shape that fades clockwise
• Diamond: Full color both horizontally and vertically in the shape of a plus sign that fades away towards the edges in the shape of a diamond
• Image: Places an image inside of the element that you’ve created. It’s not really a gradient, but this is where the image option lives on Figma.

Each of these gradient types allows you to adjust the direction and color. To learn more about using gradients in Figma, check out this Figma Help article: Paints in Figma.

Hue

Under the Color Box, there’s a rainbow slider bar with which you adjust the hue and find the perfect shade of a color for your design. For example, choose an olive green by moving the hue slider to green, then adjusting the Color Selector.

Opacity

Below the hue slider is the opacity slider. Opacity is the degree to which a color is opaque or transparent. In other words, adjusting the opacity slider will change the intensity of the color. Opacity at 100% is rich, full color, which is also known as opaque. Opacity at 50% is transparent, meaning that the color is light enough to recognize but is also see through. Opacity at 0% means that the color is no longer visible.

One way to think about color opacity is with paint. Applying multiple coats of a red paint will get you colse to 100% opaciy. Applying just one coat of red paint on a white wall will still be somewhat transparent. And a completely blank wall is 0% opaque!

Create and apply colors using Stroke

Now let’s apply the same principles to change the stroke of a shape. The stroke of a shape is the boundary or outline of that object. Here’s how you can modify the stroke:

1. Select a shape that you’ve created.
2. In the Properties panel, on the right side of the Figma screen, navigate to the Fill header and the Stroke section.
3. Double-click the word Stroke. Or, press the Plus (+) button on the right side.
4. Notice the default color, black (hex code: 000000), and the default line thickness (1). The stroke, or line thickness, can range from 1 to 1000. Try adjusting the line thickness number and see what happens in your design!
5. There’s also a drop-down menu with the word Center visible. This drop-down menu will change where the stroke is placed. By default, the stroke is placed around the shape, like a border. You can change the stroke to be inside or outside of the shape.
6. Click the three dots to the right to open the Advanced Stroke menu. Here, you can change the shape of the outline, including the angle.

Applying a stroke to your designs can help colors stand out and can create dynamic shapes within prototypes. Here’s an article from Design Code that will help you learn to implement stroke changes to your designs: Figma Handbook: Fill, Stroke, and Advanced Stroke.

Set and save color styles

Finding the best colors for your designs can take time and a lot of iteration! Once you settle on color choices, save yourself time in the future by saving the color palette to Figma.

1. In the Layers panel, on the left side of the Figma screen, select the shape that has the color you want to save and reuse.
2. In the Design panel, on the right side of the Figma screen, navigate to the Fill header. Click the Style icon, which is represented by four dots shaped like a square.
3. A menu will appear called Color Styles. Click the Plus (+) icon in the top right corner of the Color Styles menu.
4. Name the Style.
5. Click Create Style.

And that’s it! You’ve now saved a color to reuse again in different parts of your designs. To use a color that you’ve saved:

1. In the Layers panel, on the left side of the Figma screen, select a shape that you want to match a saved color.
2. In the Design panel, on the right side of the Figma screen, navigate to the Fill header. Click the Style icon, which is represented by four dots shaped like a square.
3. A menu will appear called Color Styles. Select a color style from the list.

If you need help or if you want to learn more, visit Figma’s Help Center to explore creating styles for colors, text, effects and layout grids.

To learn more on choosing colors

• The role of color in UX by Toptal.
• The Color Guide: An Introduction To Color Theory and Color Palettes by CareerFoundry.
• Google’s Material Design on Applying color to UI
• Need help on choosing color, The Coolors website can help you generate complementary colors with a click of your space bar.

You can twist what you learned above in Adobe XD because the underlying principle is the same. It should give you a rough idea on how to play around with the color.

Good luck!