Skip to main contentCarbon Design System

Design kits

Rapidly build beautiful and accessible experiences. The Carbon kit for Adobe XD contains all resources you need to get started.

The Adobe XD kit is maintained by members of the Carbon community. For support, contact the kit’s maintainers.

Get the libraries

Install Adobe XD

To design with Carbon you must have the most recent version of Adobe XD installed.

Get the Adobe XD Creative Cloud libraries

  1. Open the Creative Cloud Library App.
  2. Navigate to the Files tab in the header (A). Select the Your libraries page in the left hand navigation (B).
adobe xd instructions part 1
  1. Select the Browse all button to browse all libraries (C).
adobe xd instructions part 2
  1. In the search bar, search for “Carbon Design System” (D).
adobe xd instructions part 3
  1. You will see the four Carbon theme libraries that are available to Add (E) by hovering over the library previews. Once you add a library, the library will be marked with a checkmark (F).
adobe xd instructions part 4

To view the four Carbon theme libraries on the web, visit these links.


Start designing 

Components

Included in the library are all 32 of the Carbon components and their variants. To insert a component, select the Document assets icon in the left side rail (G).

adobe xd instructions part 5

Find the component you would like to use under the Components section (H) in the document assets panel. Drag the component from the panel onto the canvas.

adobe xd instructions part 6

View the name of the component in the right sidebar. If the component has variants, you’ll see the variants under the Component (instance) section to configure the properties and values of that component set.

For more help on how to use Adobe XD components, see the Adobe XD docs.

Grids

Grid templates are included in each Carbon themed library. These grid templates are on a canvas that can be configured at the five 2x grid breakpoints and also includes the 16 column grid.

Colors

The Carbon color tokens are added as colors in the component assets panel in Adobe XD. To apply a color, select an object then in the Colors section of the component asset menu you can select a color from the Carbon theme library. In addition to applying colors to objects, you can also apply colors to text layers.

To learn more about applying colors in Adobe XD, see the Adobe XD docs.

Character styles

To apply a character style, select a text layer. Then in the component assets panel, select the character style from the Carbon theme library. Use color to change the color of a character style.

To learn more about applying character styles in Adobe XD, see the Adobe XD docs.

Icons

The IBM Icon library is separate from our theme libraries. Add the library by using the Creative Cloud app or by visiting this web link.

Support

If you’re brand new to Adobe XD, they offer some great tutorials.

Releases

Enhancements to the kit will be rolling out in the future. When a new version of the library is available, you will need to download the new file to replace the old one. Releases will be posted to the GitHub repo.

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.