Design with Carbon: Update your Sketch symbols to V10

We’re Carbon, the design system for IBM. We ship open-source styles and components in Vanilla, React, Angular, and Vue for anyone building on the web.

Making the switch to Carbon v10? Carbon v9 Sketch symbols can quickly be swapped out with the v10 library versions. Here are two methods to easily update your components.

Things to note:

  • We recommend against mixing version components. The layout and spacing has changed significantly between v9 and v10, and mixing pieces of each version will produce weird results.
  • The Carbon library naming has changed. The old library is labeled with “v9” and the v10 Carbon library is simply “Carbon Design System.”

First method

  1. Select the symbol you want to update.
  2. Right click the symbol
  3. Select Replace WithCarbon Design System , then simply select the v10 version of the symbol

Pro-tip: You can update multiple symbols of the same kind at once. The symbols should maintain their content overrides, so there’s no need to fret about losing your content.

Second method

  1. Select the v9 symbol
  2. In the inspector on the right open the menu under Symbol.
  3. Navigate to Carbon Design System and select the v10 component version.

Some symbols may be incorrectly sized after the swap. If this happens, right click the symbol and select Set to original size.

Pro-tip: Turn on the spacing token to help adjust the component to its new size.

And presto! The symbol is updated.

If you’re not set up with our new Sketch libraries yet, head over to our Getting started guide to start building with Carbon.