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.
Maintaining Component Names
As library components, known as Symbols in Sketch, increase in quantity and as their compositions change, vocabulary used in the names of both artboards and layers may need to be adjusted to more precisely describe categories and variant. No matter a design team’s naming protocol (clearly described in detail in design documentation, of course), groups of existing Symbols’ names will need to be modified. To do this, I recommend two Sketch plugins:
Both plugins allow designers to use a Find and Replace functionality to update a string of text immediately for every instance; one-at-a-time per instance; or immediately for one or more selected artboards/layers.
A few bonus advantages of each:
The Find and Replace Text plugin allows a designer to not only search at the page-, artboard- or layer-level, this functionality also applies to override values. This can be especially useful for updating placeholder text in nested Symbols.
Find and Replace Text plugin can bulk modify override values.
The Rename It plugin allows designers to not only add or modify custom text string prefixes and suffixes, but it also provides the option to integrate useful, dynamic values to artboard or layer names such as a layer’s width, a layer’s parent name or sequential numbering.
Rename It plugin provides dynamic prefixes and suffixes.
Maintaining Easy Use of Overrides
Consistent naming and ordering of nested Symbol layers is vital to making sure that overrides are easy to modify during a designer’s workflow. Often, it is useful for different Symbols to have the same names when they are nested in and layers of other Symbols, and when they perform the same semantic use in these Symbols. For example, different Symbols may be used for the purpose of ‘title’ within multiple, more complex Symbols, but, as a user of these components, a designer only needs to know in which field to input the ‘title value’ within the Overrides panel. Therefore, all “sub-Symbols” used for title-purposes, may have the layer name “Title”. Eventually, it may be necessary to change all nested Symbols/layer names from “Title” to “Header”. To do this, I recommend the Select Similar Layers plugin, by wonderbit, to instantly select all layers with name “Title”. (Without this plugin, the desired layers would have to be individually selected, which can be a tedious and time-consuming process especially when there are hundreds or more layers.) Then, either of the renaming plugins can do the rest.
Select Similar Layers by Name
Additionally, since the order of Symbol layers also facilitates better or worse usability for a designer working with overrides, the Select Similar Layers plugin can also be useful in bulk reordering layers. For example, for designers immersed in cultures that read left-to-right, the overrides should be listed top-to-bottom based on the sub-Symbols’ layout order from left-to-right or top-to-bottom. If a change to the library causes layers of the same name or properties to be out of order within multiple Symbols, the Select Similar Layers plugin can batch select to allow for a batch layer reorder.
Ensuring Everyone is Synced
Once all Symbols have been modified and organized at the artboard level and below, the page may have to be reorganized. The plugin Symbol Organizer, by Jason Burns automates this. It visually orders artboards by group level (identified by the “/” in each artboard name) as specified by the designer. By organizing the Symbol artboards, both in the layer list and visually in the main editing area, other designers should be able to easily navigate the library file.
Symbol Organizer plugin organizing artboards.
For design teams larger than one, lone multifaceted designer, it is important to ensure that design language changes are accessible (as soon as possible) to all other team members. In order to avoid extra work or confusion that can be caused by using old or the wrong versions of components, there are now a growing number of tools that allow designers to sync, see a history of changes in, revert and see diffs between Sketch files; essentially these are “git for Sketch” tools. While there are multiple options out there, I have used Abstract and Versions by Sympli and they both provide the ability for designers to see all the changes to a file and access the most up-to-date “source of truth”. While version control is is an extremely valuable function to have when collaborating on mock ups, it is vital to the process of transparently and seamlessly scaling a design language.
Cover Image Photo by Erol Ahmed on Unsplash
