Helping Designers Adhere to a Design System with Sketch
At Walmart Labs in Bentonville, our internal design team creates applications for associates (Walmart’s name for employees) in our stores, distribution centers and corporate offices. We design everything from wearable devices to desktop systems, and our users’ environments range from brightly lit offices to warehouses. In order to help our associates move swiftly across multiple digital tools, we created a system of shared interactive and visual patterns based on Google’s Material Design. Our design system is built in Sketch and this post shares learnings from our experience managing this language.
Where to start
If you’re a designer who needs to create and manage a library to help others adhere to a design system, read on. We’ve found the following helpful as we design digital tools that over 1 million associates use throughout the U.S.
Design consistency can be challenging in an enterprise environment, especially with diverse audiences and varying contexts of use. Memorizing and using all of the specs correctly can be overwhelming and time consuming. Designers, even seasoned ones, may have to continuously reference design specs. This consumes valuable time in an already aggressive design cycle.
The answer? Bring the design system to the designers, in their design tool.
Our design system library — internally known as Ignite — is built in Sketch. We selected Sketch so designs don’t have to worry about compliance to the design system, instead they can focus on designing the ideal experience. Our designers work more accurately, efficiently, and consistently with this tool. It also empowers designers to create reusable patterns from the library, inheriting updates when the library is updated.
A few key features include:
- Configurable symbol for each component in the design system
- Guidelines as a nested symbol, addressing padding and font treatment
- Adaptable text with other elements responding to the text length
- Ability to add custom colors, fonts and avatars without modifying the symbol library
Nesting the design specs
Sketch is not a design system. , but it is one of our preferred tools. When managed correctly, Sketch can help designers follow rules and guidelines seamlessly. We bring the design system specs to the designer by nesting them in each symbol. Designers can focus more on the flow and less on remembering the rules.
Vertical guide
Guides can show where to resize symbols vertically. In the below example, a toolbar height changes for landscape and portrait mode. This technique is useful for resizing component height from normal to dense layout.
Text baseline guide
Text baseline helps designers change the height of a symbol to match the text height. Designers change the symbol height until the baseline is at the baseline of the last text line, no measuring required.
Adaptive text
Our designers insert real text and information into their comps, and our text and elements in symbols are responsive to the length of neighboring text. Symbols move as the text length changes to maintain the padding. The text decoration and padding are set in the symbol, allowing designers to focus more on the content.
Color as a symbol
Walmart has multiple divisions and subsidiaries, each with their own color pallet. Previously, it would be very tedious to update all the colors of a design to for another area of the company. We would need to duplicate the file and have to main two copies for any updates.
Each color in our pallet is a symbol, including the primary and secondary color and are nested anywhere color is needed. This has greatly reduced the need to detach symbols and provides color flexibility.
Instantly update the color of all symbols
Designers can explore colors throughout the entire app by changing the library color options. The color customization page allows them to see results in real-time as they change the primary, secondary and actionable text color, no plugins required. Symbols using symbol-colors are updated instantly. Actionable text colors are managed through Sketch’s text style. This allows text color to be updated while allowing symbols to have adaptive text.
Updates are simplified too. Designers are prompted to update the library when they open a file that uses the library. When accepted, the new colors are applied.
This technique also allows designers to create, save and apply custom color-themed libraries to any other project. It also greatly reduces the number of symbols to create and maintain in the symbol library.
Configurable symbols
The override menu allows symbols to be configured into any state or variation described in the design system. Designers can further customize them by selecting relevant images, icons and colors.
We reduce unnecessary override menus by doing a little extra work in the library. For example, symbols with dark background will only show the white version of icons.
Sticker sheet template
Using the library symbols, the sticker sheet provides common patterns and a mixins page to make custom colors, icons and avatars appear in relevant library symbols. It also contains a summary page for providing notes, comments and the primary and secondary colors used in the design
Mixins: adding custom color, icons and avatars
Through our iterations, we found designers needed to add custom icons, colors and avatars. Detaching a symbol prevented it from receiving future updates and Choose Image only works for a single instance of the symbol.
Without modifying the Ignite library, designers can add custom icons, colors and images appear in Ignite symbols. Sketch uses symbol dimensions to populates override menus. Art boards with appropriate dimensions are provided in the sticker sheet.
To add a new icon, the designers convert the provided icon art board into a symbol. The symbol now appears in any override menu with the existing Ignite-provided icons.
Symbol configuration examples
A single symbol can be configured in multiple ways. The sticker sheet displays the the various configurations for the most common symbols.
Sticker sheet as a template
Sticker sheets can get messy the more they are used. Things get moved around, when copying and pasting from them. We provide a easy way to add the sticker sheet to Sketch’s template folder. Like installing apps on a Mac, designers drag the file to the folder.
New sticker sheet from template
After installing the sticker sheet, designers can get a fresh copy to start a project by selecting the sticker sheet from the template menu.
The sticker sheet uses symbols from the library, but can be upgraded independently. This allows new patterns to be added to the sticker sheet, without waiting for the next release of the library.
Managing and publishing the library
The Ignite Sketch library is treated as a product with a release cycle, feature backlog, versioning and release notes.
Version numbering
We try to update library symbols in a way that won’t break designs when upgrading. The version number tells designers the level of capability with the library version they are currently using.
The version number appears in the sketch library thumbnail, making it easy to see what version is loaded. The version can also be found in the release notes symbol name.
Distribution
GitHub is not just for code. It can be used to manage non-text files and provides a simple and easy-to-create a product page.
Designers download a zipped folder that contains the newest version and previous versions. If designers experience a problem, they can quickly roll back to a previous version.
Release notes
It’s important to inform designers about new features and bug fixes. GitHub Releases is used to publish the release notes, with the library file attached. The latest release notes are also provided in the library and can be accessed from the symbol menu.
Tracking bugs and feature requests
GitHub Issues provides an easy way to submit bugs and feature requests. Each submission is a discussion thread where anyone can engage in the conversation. Labels, projects, milestones and assigned person can be added for tacking.
A projects page can be created for the next release and all relevant bug/feature submissions can be added via the tags, making it easy to track exactly what will be for the next release.
Communication
We have a dedicated Slack channel to be accessible to designers and announce new releases. For each release, we post the release notes and link to the product page.
Now it’s your turn
Through continuous feedback and iteration, we strive to improve the library and help our designers design more accurately, efficiently, and consistently.
It may be worth the investment to create a Sketch symbol library, if you’re finding consistency difficult or spending too much time recreating the same components.
Striking the right balance between a locked down and extremely flexible symbol can be difficult. Start small, share frequently with designers and iterate quickly. If the library helps designers be more consistent and move faster, you won’t have to sell it. Designers will demand it.
