3.9 Badge

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

Step 1. Page

  1. Paste the Accordion page on the canvas.
  2. Change the name of the frame and header title to Badge.
  3. Readjust Menu items states.
  4. Link to 2.2 Badge page in the Header's button.

Step 2. Wrapper

  1. Delete the Accordion Group component in the Wrapper group.
  2. Open the Assets panel and find Badge.
  3. Drop it in the Wrapper group.
  4. Select the Component Wrapper group.
  5. Group it and apply auto layout.
  6. Rename it to the Component States.
  7. In the auto layout panel:
  8. Direction: Horizontal.
  9. Spacing between items: 16 px.
  10. Select the Component Wrapper group inside.
  11. Change its Resizing (width) property to Fill container.
  12. Duplicate it, so there are five items in total.

Step 3. States

  1. Change Label text in the first item on the left to Primary.
  2. Change Label text in the second item to Danger.
  3. Select the Badge component under and change its Status to Danger.
  4. Repeat the action for Info, Success, and Warning items.

Great work! Copy the entire Badge page, and let's practice more in the next chapter.

PreviousNext