Our needs

As Workday’s product offerings grew so too did our icon set. By 2016, we had over 500 icons and we encountered growing pains that were seemingly impossible to solve through manual design work.

The pipeline

Today, our assets are managed under a central project called Design Assets that’s built to accommodate for scale using both open source libraries and custom scripts.

Design Assets is a Lerna monorepo on GitHub enterprise. While we now use Figma, we still maintain a set of legacy icons in Sketch. We originally leveraged sketchtool to programmatically export SVG assets from Sketch files. Once we made the move to Figma, Figma's REST API was essential for our bulk exporting work. We used svgo, Jest, and other tools to test, optimize, and publish our icons using a pipeline that is continuously integrated and deployed.

A series of events kick off upon a change:

1. All assets start at a package that publishes a base format. Currently, our base format is a SVG. We use sketchtool and Figma to export SVGs and svgo, cheerio, and some custom scripts to optimize them.

2. We perform snapshot testing for every icon using jest-image-snapshot so we can see exactly how our icon sets have changed visually with every commit. We also perform unit testing to ensure icons are usable and have properly formatted names.

3. SVGs can then be transformed for their respective clients. For web, this may be as simple as adding accessibility attributes. For mobile, we may deliver PNGs or even a platform-specific format such as VectorDrawable (Android).

4. Icons are once again subject to another set of unit tests specific to their client’s specifications.

5. Each set of icons is published to the client’s package service (i.e. npm, Carthage, etc.). Clients can get the latest set of icons by simply upgrading their dependencies.

6. Assets are published to several CDNs.

7. Documentation is automatically generated that allows both designers and developers to see which icons are currently available.

We have full visibility through this entire process through Jenkins and GitHub status checks.

Ongoing challenges

Mobile

Our vision is to continuously deliver assets to all clients through one pipeline. However, my knowledge and expertise is concentrated on web technologies. I had to rely on collaborators on iOS and Android teams to help me understand their platform's requirements and how to deliver to them.

Expansive stack

Working on assets is particularly challenging because it requires more than a shallow understanding of each part of the stack our asset libraries touch. Workday has a proprietary language (XpressO) to allow developers to build features quickly. Icons are configured and accessed through an exclusive method with XpressO. However, we've also started building bespoke React applications in which icons are consumed in a more typical method through npm. iOS and Android, of course, have their own package management systems.