Have you ever looked at a color and felt an emotional connection? Color is one of the ways that humans relate to objects. From the changing seasons to a truly amazing sunset, color evokes feelings. As a UX designer, it’s important to learn how to harness that emotional 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
- Open a file in Figma.
- Select the rectangle tool. It’s listed as the fourth icon from the left in the toolbar, to the right of the Frame tool.
- Draw a rectangular shape on the frame.
- Select the shape.
- In the design panel, on the right side of the Figma screen, there is a section toward the bottom titled fill.
- In this section, find the color swatch showing the default color, white, to the left of the hex code: FFFFF. Click the color swatch to make the color picker appear, as shown in the image below. Choose any color on the spectrum. For example, you can drag the circle known as the color selector at the top-left corner for a crisp white or to the bottom-right corner for a deep black.
- Below the color box is the eyedropper tool. Using the eyedropper, 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
Now that you know how to change the color of a design element, what else can you do?
Choose a type of paint
With the color picker window open, in the top-left corner, under the menu bar, you’ll notice a row of four icons that represent the four different types of fills.
- Solid: The solid black square indicates a solid color paint fill.
- Gradient: To the right of the solid fill is the gradient fill icon. If you click the gradient fill icon, a drop-down menu appears with some fun things that you can do with gradients. Think of gradient as opacity but from specific directions. Each of the gradient types allows you to adjust the direction and color. To learn more about using gradients in Figma, check out this Figma Help article: Apply paints with the color picker.
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: Next is the image fill, which allows you to place an image inside an element.
- Video: The fourth fill type in the row allows you to place a video inside an element.
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 close to 100% opacity. 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
Great job so far! You have learned how to change an object’s fill color. 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:
- Select a shape that you’ve created.
- In the design panel, on the right side of the Figma screen, navigate to the stroke section.
- Click the word stroke. Or, press the plus (+) button on the right side.
- 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!
- There’s also a drop-down menu with the word Inside visible. This drop-down menu will change where the stroke is placed. By default, the stroke is placed inside the shape, like a border. You can change the stroke to be centered or outside of the shape.
- 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.
- 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.
- 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.
- A menu will appear called Libraries. Click the plus (+) icon in the top-right corner.
- Type in a name for the Style.
- 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:
- In the layers panel, on the left side of the Figma screen, select a shape that you want to match a saved color.
- In the Design panel, on the right side of the Figma screen, navigate to the fill section. Click the style icon, which is represented by four dots shaped like a square.
- A menu will appear called Libraries. 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
Learn how to choose colors
Now you know how to add color to your designs in Figma! But how do you choose the “right” color to use?
There is an entire section of design that investigates how color unconsciously affects how we perceive objects. To learn more about applying color theory to your designs and effectively using color, check out these resources:
- Some colors have universal meanings. You can use those meanings to impact the work you create. Toptal has an interesting article that examines the role of color in UX.
- Curious about color theory and don’t know where to start? Here’s a brief yet thorough beginners’ guide to color theory from CareerFoundry: The Color Guide: An Introduction To Color Theory And Color Palettes.
- Learn how to use color to create modern-looking designs with this article from Google’s Material Design.
Not sure where to start with your colors? Coolors has you covered!
will generate complementary colors with a click of your space bar. Chances are, after you go through a few palettes, you’ll get a better idea of what colors you want to use in your design.