2.2 Badge

In the Figmaster - Lessons Figma file, open the 2.2 Badge page.

Introduction

This one will be easy, but it'll be a great warm-up before the next chapter. Let's create a badge. Badges are labels that hold small amounts of information. They are useful in table cells where we can display the status of the data in the row.

Plugins in this chapter

Contrast

Step 1. Base

  1. Use the text tool (T) and click on a canvas to type. Create a text layer with 'Badge' text inside.
  2. Change its style to Text S/Medium.
  3. Group it CTRL + G.
  4. Rename CTRL + R the group to Badge.
  5. Apply the auto layout to the group with SHIFT + A.
  6. In the Auto layout panel, set up the following padding values:
  7. Padding Left and Right: 8 px.
  8. Padding Top and Bottom: 2 px.
  9. Add the following color styles to the layer:
  10. Layer's fill to Primary/Surface.
  11. Layer's text to Primary/Main.
  12. Layer's stroke to 1 px Primary/Border Inside.
  13. Set the corner radius to 32 px to keep it rounded.

Step 2. Badge status

  1. Duplicate the layer to the bottom, so there are five elements in total (while holding SHIFT + ALT and then pressing CTRL + D). The space between them should be 24 px.
  2. Rename the layers from top to bottom in the following order: Badge / Primary, Badge / Danger, Badge / Warning, Badge / Success, Badge / Info.
  3. Select the second layer (Badge / Danger).
  4. In the Selection colors panel on the right, there are three colors. Change them accordingly to match the Danger swatches.
  5. Repeat the action for the remaining layers.

Step 3. Contrast

Let's check if text elements pass the accessibility standards.

  1. Open the Contrast plugin and select each text to see if they pass the test. Remember that the Figmaster Plugin will close when you open the Contrast plugin. Reopen the Figmaster plugin after you identify the issue.
  2. As you can see, the text in Badge / Warning has some accessibility issues. We need to fix that.
  3. Change the text color from Warning / Main to Warning / Pressed.

Great job! Now our layers are accessible, and we can proceed to the next step.

Step 4. Component and variants

  1. Standard procedure. Select all elements and press Create multiple components in the Component dropdown menu (four squares at the top of the Figma UI).
  2. On the right, in the variants panel, press the 'Combine as Variants' button.
  3. In the variants panel, rename 'Property 1' to 'Status'.

Easy peasy lemon squeezy! It was a great warm-up before the next chapter, where we'll create button components. Let's continue.

PreviousNext