The arena of UX Design tools is growing – both in quantity and functionality – to empower designers to more precisely convey their creations to development teams. This expansion is driven by the increasing requirement to design and build visually pleasing products that allow instantaneous understanding of complex functionality. Consistency in component styling, micro-behavior, and page layouts are key to facilitating usability but they can also be challenging to maintain, especially as product requirements grows. To support the necessary clarity and thoughtfulness during the creation phase, more design teams are implementing design language systems. At minimum, these are libraries of components with documentation of the patterns and contexts that leverage the components.
While there are many possible tools for and approaches to building a design language system, this article will focus on tips when building upon an established component library in Sketch. In order to mitigate design language system confusion, of which teams can be at high-risk when rapidly iterating on mock ups and integrating new concepts and components, I have outlined three goals:
- Maintain component name consistency in library files so that they adhere to the constantly evolving vocabulary rules
- Allow designers to easily identify and customize subcomponents in mock ups (in Sketch, these are known as Overrides)
- Ensure designers are able to navigate the library files and have easy access to the most current version of each component
While Sketch plugins (and products built to integrate with Sketch) will be the methods described below to achieve these goals, there are many other products that could provide the same functionality.