Skip to main contentCarbon Design System

Design kits

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

v11 themes are now available! All themes for the v11 libraries are available to IBM’s internal users and the public community. We have leveraged Figmas latest features in this release which may result in breaking changes to some of our components.

Internal users

Get the libraries

1. Sign into Figma using IBM SSO

You should be added to the IBM Figma organization automatically once you sign in. You do not need to join or request to join any specific team to access the libraries.

2. Turn on the v11 theme libraries

There are four Carbon v11 theme libraries, two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can turn on as many libraries as you’d like. The v11 theme libraries are now available to IBM’s internal users and the public community. We have leveraged Figmas latest features in this release which may result in breaking changes to some of our components.

Inside of a design file, navigate to the Main menu panel in the top left of the toolbar (A). Open the menu and select Libraries from the list (B).

internal figma instructions part 1

Then in the Libraries modal that appears, find the team called IBM Design Systems (C) and switch the toggle beside a themed library, for example the (v11) White Theme - Carbon Design System to on (D).

internal figma instructions part 2

To preview the four v11 Carbon theme libraries, visit the following view-only links. To access the v10 Figma libraries, see v10 Design Kits.


3. Turn on IBM Design Language libraries 

Under the same team IBM Design Systems you can also turn on the following IBM Design Language libraries or visit these view-only links.

  • Color styles - IBM Design Language
  • Hover color styles - IBM Design Language
  • Text styles - IBM Design Language
  • Icons - IBM Design Language
  • Pictograms - IBM Design Language

External users

Get the libraries

1. Sign into Figma

2. Get the theme libraries

There are four Carbon v11 theme libraries, two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can turn on as many libraries as you’d like. The v11 theme libraries are now available to IBM’s internal users and the public community. We have leveraged Figmas latest features in this release which may result in breaking changes to some of our components.

Navigate to the Community tab in the left side panel (A).

external figma instructions part 1

Select the Design Systems category (B) and search for Carbon Design System (C).

external figma instructions part 2

See the Carbon Design System libraries that are available.

external figma instructions part 3

3. Duplicate the file of your choice to your workspace

4. Publish as a library to your workspace

To preview the four Carbon v11 theme libraries, visit these view-only links.

3. Bring in additional colors and icons

Use these additional IBM Design Language libraries to have access to color styles, hover color styles, text styles, icons, and pictograms.