Pattern Libraries

15 September 2023

Design can be a repetitive task but you don’t need to reinvent the wheel with every new interface when you already have assets that have been tried and tested. Pattern Libraries are a great way to reuse existing designs that will save you time as well as maintaining consistency.

Many people confuse the term Pattern Library with Design System. A Design System is a documented guideline (sometimes referred to as brand guidelines) whereas a Pattern Library refers to reusable design assets.

Elements such as navigation bars and footers are a great example of patterns that are repeated a lot that rarely change. Without a pattern library, designers will often find themselves digging through old designs and copying and pasting elements to suit their needs. With a pattern library, these kinds of elements can be accessible at all times and dragged and dropped into Figma.

Below is the process I use to maintain a successful pattern library:

• Identify the existing patterns that are required for a page and what new ones need created
• Design the new patterns by referencing the Design Systems and accessibility best practices
• Test the pattern with users and get sign off
• Maintain and update patterns when necessary