WWW… Wednesday! Adobe XD Spectrum Plugin

by Taylor Slattery | October 7, 2020

Spectrum is the name given to Adobe’s design system, the principles and guidelines employed to keep Adobe’s products cohesive in appearance and function. Even when dealing with a smaller brand, it can be challenging to maintain cohesion across different platforms, so you can imagine the challenges presented by doing so across 50 different products. The current iteration of Spectrum is one derived from decades of experience and trial and error. It’s built upon the collective knowledge of Adobe’s vast network of creatives, employees and users alike.

Recently, a plugin for Adobe’s XD, which was previously reserved for Adobe’s product designers, was made available to the public. In addition to the value it offers third-party developers who make things like plugins for the many Adobe apps, it also offers some valuable insight into the creation and management of design systems.

Traditional design systems typically consist of a style guide which designers use to ensure their decisions align with the company’s outlined aesthetic. While this solution might be fine for smaller organizations, the larger the number of people depending on this document and the more diverse their needs, the more problems present themselves. For Adobe, maintaining something as simple as a button would require countless iterations to ensure compatibility across their ecosystem. Creating documentation to support such needs proved impossible and as such the cohesion of their products suffered.

adobe xd plugin2

But times are changing and so are our tools. If anybody has the power to solve this problem, it’s certainly Adobe. Fortunately for us, they have, and now we can see just how they’ve done it.

The Spectrum plugin for Adobe XD serves as a library of components, styles, and colors which designers can use to create and edit products while maintaining the Adobe aesthetic. We’ve seen a number of products arise in recent years with the aim of creating future-proof design tools. A common pain point for designers is the tedious task of updating elements across a number of different platforms whenever a change is made, no matter how minute. As such, one common feature we’ve been seeing a lot lately is the seamless updating of all instances of an element. This allows users to experiment more freely without the time cost of manual updates.

The Spectrum plugin is built in the same way. As Spectrum changes, so does the plugin. Everyone is kept up to date, and it’s all accessible via a simple series of dropdown menus. This has allowed new team members to hit the ground running without an extensive onboarding process, as well as granted the team as a whole, designers and non-designers alike, greater insight into the system’s inner workings. It’s made for easier collaborations and has ensured adherence to Adobe’s accessibility standards as well.

As we continue to move toward more approachable and inclusive design, there’s a lot to be learned from industry giants like Adobe. If you’ve got Adobe XD installed on your computer, you can get the plugin here.