1.4 Functional colors

In the Figmaster - Lessons Figma file, open the 1.4 Functional colors page.

Introduction

In this chapter, you'll create functional colors for our design system. We will use functional colors to display feedback messages. These are the colors that communicate purpose. They help users convey messages. In our system, they will be mainly used for notifications and modals. We'll have four colors:

  1. Red for error and danger messages
  2. Orange for warning messages
  3. Green for success messages
  4. Blue for info messages

It's time to test your knowledge from the previous chapter about the primary color! You need to create your functional color palette based on the hex values I'll provide below. Don't worry. If you don't remember how to do it, you can go back to the previous chapter. You will also find the solutions to this chapter in the Figmaster - Solutions file included in the zip.

Step 1. Danger color

Use the methods from the previous chapter to create your palette of the Danger color. The hex code for the Danger / Main style should be E00000. In short:

  1. In Step 1 frame create five color rectangles with the color E00000:

  2. Danger / Main

  3. Danger / Surface

  4. Danger / Border

  5. Danger / Hover

  6. Danger / Pressed

  7. Use the plugin Tints and Shades to generate a consistent color palette based on our color.

  8. Pick the colors from the generated palette and apply them to our Danger / 'State' rectangles.

  9. Preview the colors in Step 1 - Preview Colors frame.

  10. Make your adjustments and reapply the colors to the rectangles. If you want to use my values, grab these:

  11. Danger / Surface - FFECEC

  12. Danger / Border - FFD7D7

  13. Danger / Hover - A20000

  14. Danger / Pressed - 630000

  15. Create the styles with the Chroma Plugin and rearrange them in the following order: Main, Surface, Border, Hover and Pressed.

Step 2. Warning color

Repeat the process for the warning color. The hex code for the Warning / Main style should be EA780E.

You can use my values for the states if you want:

  1. Warning / Surface - FFF2E7
  2. Warning / Border - FFCA99
  3. Warning / Hover - D16603
  4. Warning / Pressed - 653508

Step 3. Success color

Repeat the process for the warning color. The hex code for the Success / Main style should be 008243.

You can use my values for the states if you want:

  1. Success / Surface - EBF5F0
  2. Success / Border - B3DAC7
  3. Success / Hover - 006836
  4. Success / Pressed - 005029

Step 4. Info color

Repeat the process for the warning color. The hex code for the Info / Main style should be 0B5CD7.

You can use my values for the states, if you want:

  1. Info / Surface - ECF2FC
  2. Info / Border - B6CFF3
  3. Info / Hover - 044DBA
  4. Info / Pressed - 043C8F

Great job! You've just mastered creating simple color palettes! You can use this knowledge for your future projects. Now, you'll be able to create consistent and accessible colors in a swift. Let's continue to the next chapter.

PreviousNext