Adobe Logo

Spectrum

Spectrum for Adobe XD plugin

The Spectrum for Adobe XD plugin lets you use actual design system components in your XD projects, making it easy and fast to iterate on designs while still ensuring they’re up to date with the latest specs and looking like Adobe interfaces.

Download plugin
The Spectrum XD plugin panel in various states, including the default controls, color picker, and component detail.The Spectrum XD plugin panel in various states, including the default controls, color picker, and component detail.

Table of contents#

Getting the plugin#

Downloading and installing#

To get the Spectrum for Adobe XD plugin, you’ll need to install the latest version of Adobe XD. After you’ve installed XD, go to this link to do a direct download of the plugin.

If you already have the latest version of Adobe XD, you can also search “Spectrum” in the Plugin Manager, then install it from there.

Features#

Components#

The Spectrum XD plugin lets you select Spectrum components from a panel and place these on your canvas, with the ability to customize all component options, theme, platform scale, and more, with in-line documentation. Available components are grouped in the same way as this documentation website, making the plugin a tool to be used in partnership with the guidance here.

Most Spectrum components are available, but not all of them quite yet. More components and other features will be added gradually in upcoming plugin releases.

Detail of Spectrum XD plugin panel showing available components including Action button, Checkbox, Color wheel, Dropdown, and other components.

Typography#

This plugin includes all Spectrum typography components: Heading, Body, Detail, and Code. Each typography component is fully customizable. You can also turn any text layer into a typography component by clicking on it in the panel.

Example of Spectrum XD plugin panel showing 4 typography components, Heading, Body, Detail, Code.

Colors#

The color feature includes all of Spectrum’s colors. You can click to change a layer’s fill, border color, or copy the hexadecimal values.

Example of Spectrum XD plugin panel showing color theme picker in Light theme option.

Icons#

This plugin includes access to Spectrum’s icon library, making it easy to search for and use icons in your designs for buttons, action buttons, and more. There’s also a “single icon” feature that lets you place any icon on the canvas, to use when creating a new component.

Example of Spectrum XD plugin panel showing icon picker and Spectrum icon options.

Questions and feedback#

Contact us#

For general inquiries, feedback, bug reports, and other communication about the Spectrum plugin, please email us.