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.
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.
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.
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.
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.
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.