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.

Check out how we design for our employees in Google’s new Centered video series. Video credit: Google Design.

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.
Image credit: Walmart.

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.

Example of a horizontal guide and padding nested in a tab symbol. Image credit: Walmart.

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.

Example of a vertical guide in a toolbar symbol. Image credit: Walmart

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.

Text baseline guides are extensively used to help designers resize symbols to fit text. Image credit: Walmart.

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.

Tabs and active indicator respond to the text length. Image credit: Walmart.
The text box border and cursor moves as the text length changes. Image credit: Walmart.

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.

Designers can change a symbol’s color and opacity from the override menu. Image credit: Walmart.

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.

The library’s color theme is changed by modifying the primary and secondary color symbols. Image credit: Walmart .

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.

A 1-line list symbol is configured to show an avatar and selected checkbox. Image credit: Walmart.

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.

No need to select the icon color in some symbols. White-colored icons are provided for dark backgrounds, and black-colored icons for light backgrounds. Image credit: Walmart.

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.

When the art boards in the sticker sheet are converted to symbols, they appear in all relevant override menus. Image credit: Walmart.

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.

This page in the sticker sheet only contains 3 symbols, but shows the various configurations that are possible. Image credit: Walmart.

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.

An installer is provided to easily make the sticker sheets available as a Sketch template. Image credit: Walmart.

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.

A fresh copy of the sticker sheet can be created from the Templates menu. Image credit: Walmart.

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.

Image credit: Walmart.

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.

The library version number can be found in the template thumbnail in release notes symbol name.. Image credit: Walmart.

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.

GitHub Page is used to generate the product page. Image credit: Walmart.

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.

Example of release notes, using GitHub Releases. Image credit: Walmart.
Release notes are available in the library as a symbol. Image credit: Walmart.

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.

Bugs and feature requests can be tracked and discussed using GitHub Issues. Image credit: Walmart.

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.

Like what you read? Give Travis Folck a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.