2.10 Notification

In the Figmaster - Lessons Figma file, open the 2.10 Notification page.

Introduction

Notifications are messages that communicate information to the user. In this chapter, you'll create the notification component all by yourself! Don't worry, you can always check the solutions page if you feel stuck. The Notification component will be almost identical to the Modal / Danger component we've created in the previous chapter but without buttons. You can also go back and check how we did each step. Below, you will find the properties of each component.

Step 1. Notification - Danger

Create a Notification / Danger with the following properties:

Part 1. Header

  1. Text: Notification message title.
  2. Text Style: Text M/Medium.
  3. Text Color: Neutral/100.
  4. The icon on the left: Icon / WarningCircle.
  5. Icon Size: 24x24 px.
  6. Icon Color: Danger/Main.
  7. Icon on the right: Icon / X.
  8. Icon Size: 20x20 px.
  9. Icon Color: Neutral/70.
  10. Auto Layout Settings:
  11. Spacing between items: 8 px.
  12. Alignment: Left - Center.

Part 2. Text

  1. Text: Monotonectally syndicate multifunctional functionalities and low-risk high-yield infrastructures. Continually revolutionize functional channels after user-centric imperatives.
  2. Padding Left: 32 px.

Part 3. Wrapper

  1. Direction: Vertical.
  2. Spacing between items: 8 px.
  3. Padding: 16px.
  4. Fill color: Neutral/10.
  5. Stroke: 1px Neutral/40 Inside.
  6. Corner radius: 4 px.
  7. Effect: Shadow 2.
  8. Width: 480 px.

Step 2. Notification - Warning

Duplicate the Notification / Danger and readjust it, so it becomes the Notification / Warning.

  1. Name: Notification / Warning.
  2. Icon: Icon / Warning.
  3. Icon Color: Warning/Main.

Step 3. Notification - Success

Duplicate the Notification / Warning and readjust it, so it becomes the Notification / Success.

  1. Name: Notification / Success.
  2. Icon: Icon / ShieldCheck.
  3. Icon Color: Success/Main.

Step 4. Notification - Info

Duplicate the Notification / Success and readjust it, so it becomes the Notification / Info.

  1. Name: Notification / Info.
  2. Icon: Icon / Info.
  3. Icon Color: Info/Main.

Step 5. Component

Now, convert the groups into components and set their variants. The Property 1 label should be Status.

Outstanding work! You've done it entirely by yourself! Let's continue to the next chapter!

PreviousNext