Building UI Components and Managing a UI Library at a Start Up Company
By: Yen Hung, Jeff
Tags: UI, UX, Design, Product Design, Sketch

3. Introducing Atomic Design

Atomic Design has been used by our engineering team for many years, and I wanted to bring this design theory into the product team’s work flow. In order to systematically manage the Sketch UI library, I specifically utilized Sketch Nested Symbols (based on Atomic Design) when building each Sketch UI component. This ensures that the UI visual language is consistent, and when the UI components need to be updated, we can systematically update all components in the Sketch UI library.

4. Make sure all the UI components have enough states

When designing product, designers must consider user experience in different UI states. In order to provide designers with UI components with a range of states, I first write a list of important and most frequently used states. When using Sketch to build each UI component, I also build the UI component in the various states on my list. It is important to use Sketch Nested Symbols in this process, so that all the UI visual language is consistent and future visual language updates are convenient.

When using Sketch to build each UI component, I also build the UI component in the various states on my list.

5. Sketch UI library release notes and UI Wiki-page

I created Sketch UI library release notes on Google Sheets, so that my colleagues can easily access and download the newest library. The release notes include the newest release date, a list of updated items, and links to the newest and past versions of the library. Once I finish the newest release of a Sketch UI library, I share the link to the release notes with my colleagues via Slack. If anyone wants to use a previous version of the Sketch UI library or wants to know what items have been updated, they can access the release notes. This cuts down on a lot of unnecessary communication.

Additionally, as I gain experience in the creation and management of our Sketch UI library, I’ve accumulated tips and advice I hope to share with others. This is why I created a “Wiki-page” using Dropbox Paper. The Wiki-page records 1) why our team chose to use a Sketch UI library, 2) notes on how to use each UI component, 3) software variable settings, 4) plugin recommendations, and more. When my colleagues have questions about UI or if new designers are unfamiliar with the Sketch UI library, they can often find the answers to their questions on the Wiki-page. This page has been a timesaver for me.

6. Setting up the SOP for Sketch UI library updates and management

Even the most well-organized Sketch UI library can fall prey to chaos without a standard operating procedure (SOP) for management. Below is my Sketch UI library management SOP.

1. Regularly meet with the product and engineering team to ascertain if there is a need to update, alter, or add new UI components. 2. Input all requests into the UI component backlog and start working on the most important ones first. 3. Test UI component changes to make sure they fulfill internal or user needs. 4. Update the Sketch UI library release notes and Wiki-page, then share the latest links via Slack. 5. Regularly do research on new UI component building and management methods and consider ways to improve.

7. Miscellaneous

Make sure the Sketch Symbols are built well from the very start.

Well built Sketch Symbols might take more time to build, but putting in extra effort from the start will save a lot of time in the future when using and managing the symbols. It is a good idea to use the following features in Sketch when building Symbols: 1) Resizing, 2) Overrides, 3) Symbol Masters, and 4) Smart Layout + Minimum Width.

（Left）Resizing，（right）Overrides。

（Left）Smart Layout + Minimum Width，（Right）Symbol Masters

Utilizing Sketch Plugins

When managing the Sketch UI library or working on design projects, think of ways to increase workflow. Below are plugins I swear by:

Conclusion

The point behind UI component building and management is to continuously help the design team increase work efficiency. The 8 points above are a summary of what I have learned in the past year. I hope this article has been helpful to you, and if you have any feedback or would like to chat, feel free to contact me or leave a comment below.