WWW… Wednesday! Style Dictionary

Style Dictionary is a tool for managing styles across multiple platforms that was created by Danny Banks with assistance from other developers at Amazon. In function, it’s similar to CSS. It stores style properties for the various elements you would traditionally see on your style sheet. You can control colors, type, images, all the usual suspects, as well as implement a logic structure for how to implement them. Style dictionary also gives you the ability to create platform-specific rules under each property should a platform require any special attention.

Where Style Dictionary differs from CSS or any platform-specific tool is in its ability to synchronize. From a single location, it’s able to push updates to any necessary platform, effortlessly keeping styles consistent. Traditionally, you would create a style guide that would then be used to flesh out a company’s presence across any necessary platforms. This process is time consuming and often requires separate developers for each respective platform. You might have a team for iOS, another for Android, and a third for CSS. Any change made to a style guide, no matter how small, resulted in a lot of man-hours being spent updating each platform to keep them visually consistent. With Style Dictionary, this is no longer the case. Any changes made to the centralized stylesheet update all of the platforms simultaneously. Rather than using an external style guide simply as a point of reference, Style Dictionary allows users to build out their style guide in a single location and easily export to all the various formats they may need.

As an added bonus, you’ll also save money on aspirin, because Style Dictionary eliminates the headaches of rolling out updates. You no longer have to worry about managing teams of developers with different coding abilities across multiple languages, or trying to synchronize rollouts across platforms and time zones. These are problems of the past. Having style documentation in a single location keeps everyone on the same page. Style Dictionary can also be used to build Sketch files which is useful if you haven’t yet jumped ship for Figma.

Style Dictionary is a huge time and money saver, both of which are spent in abundance to build and maintain a quality customer experience. It’s no wonder why, either. Brands want to establish and maintain trust, and ensuring a consistent experience across platforms is key in doing so. If the user experience for Android users is lesser than that of iOS users, Android users will feel underserved and trust in that portion of the market will suffer.

If you would like to try Style Dictionary for yourself you can find it on Github here. For a more extensive look at the architecture and some example use cases you can head here.