This guide covers the design and documentation of styles, patterns, and components for the UI Library.

What to do

When following the process below for creating a UI Library, it will help to make sure you’re not overlooking anything. The creation of a UI Library has a lot of moving parts and it’s easy to forget small, important details.

<aside> 💡 Quick note on the term “UI Object” For the sake of brevity, we use the term “UI Object” instead of writing “styles, patterns, and components” a million times.

</aside>

Step 1: Evaluate and understand how the UI Object will be used

Before designing the UI object, it’s best to have a strong understanding of its intended use. This is where the System Inventory & Audit can be a valuable resource. A good way to view this step is a mix of requirements gathering and research.

Step 2: Create UI Object

Once you have a solid understanding of the UI object, you can start creating it in your design tool.

Step 3: Test UI Object

Now you want to test out the UI object in your design tool. Do all the constraints work as expected? Are there too many overrides? How does this look inside the actual product environment?

Step 4: Write documentation for UI Object

Everyone’s favorite part! Writing documentation can be daunting, we know, but we have a handy template to help you get started. It’s based on the UK Gov Design System component documentation template.

The template is intended to be a starting point. If you need to add/remove/tweak it for your needs and project, go for it.

UI Object Documentation Template

Step 5: Review Design Review Checklist

This last step is really QA. This is a simple checklist to run through to ensure that the team is creating high quality UI objects. This is similar to the checklist pilots run through before taking off.