Introducing Figma variables and a consolidated “All themes” library!

The Carbon Design team, in partnership with the IBM Figma guild, has enhanced our core theme Figma libraries to incorporate the latest feature enhancements introduced by Figma during Config 2023. We’re most excited about the new variables feature, which allow us to now apply design tokens in a more optimized and enriched way than ever before.

What’s new?

With the introduction of variables, we no longer need four separate files for our Carbon core themes. Now, we can store them in one centralized library file — creating a much more streamlined user experience. This consolidation is available in both v10 and v11 libraries.

Themes are applied similarly to style sheets in code, allowing you to easily switch between pre-defined value sets known as modes in Figma. But variables aren’t just for color tokens and theming; this update includes additional variable collections to help you with other aspects of design as well:

• Aside: a Figma utility to help with configuring layouts and grids
• Breakpoints: applies Carbon’s screen breakpoints; use for responsive screen resizing
• Column span: a Figma utility to help regulate the widths of elements across responsive columns
• Grid mode: applies Carbon’s three grid modes (wide, narrow, condensed)
• Radius: a Figma utility to regulate corner radius
• Spacing: applies Carbon’s spacing tokens; use in auto-layouts, gutters, and padding
• Theme: applies Carbon’s color tokens; use to render Carbon’s four themes

This article focuses mainly on the theme modes and color variables. In the future, we will provide additional information and tutorials explaining in-depth how these other variables work and how they can improve your design process when building with Carbon.

Benefits of the consolidation
Maintaining design consistency is a critical aspect of any design system. By unifying all our themes into a single file, we streamline the design process, making it easier for our team to maintain and update components while ensuring the utmost consistency throughout the system. Now, we only have to maintain one set of components instead of four, reducing the number of supported Figma components from 428 to 107. This reduction in maintenance will increase our response time for kit fixes and enhancements and decrease the overall time needed for kit support work, allowing us to focus less on tooling and more on system improvements.

Benefits of using variables
Figma says it best: “Variables store values — like fill colors, padding, visibility, and more — that can be reused throughout designs. When you update the value of a variable, you can update designs across files accordingly. This helps to create consistent designs across projects and makes updating design systems more efficient.”

Variables can also be assigned as values for other variables, allowing us to connect our primitives from the IBM Design Language (like our color palette) to other library variables (like our color tokens in the All themes library). Previously, with color styles, the two libraries were not connected, and the design language value was entered manually as a hex code in the theme library’s color token styles. Now, if we make changes to our primitive palette, the changes will automatically be applied to any connected color token variable (much like it works in code).

How to use color variables
Color variables are accessed the same way as color styles. In fact, you will often see them appear in the same list. Swatches for color styles use circles, while variable swatches appear square. Each color token in Carbon is available as a color style and a variable. The original color styles are daisy-chained to its new correlating variable. So you may still see color styles used throughout components using the All themes, but they will still render themes correctly because of the nesting strategy. However, it is best to use color variables directly instead of color styles, as known rendering problems with nested styles have occurred.

Color styles have circle swatches (left), while color variables have square swatches (right).

How to access the updated library
To enjoy the benefits of these improvements, all you need to do is head to our Carbon Design System component library on Figma and turn on the [v11] All themes — Carbon Design System or the [v10] — All themes library if you’re still using Carbon v10. We recommend making all new designs and assets with this new All themes library.

We converted the previously named [v11] White theme — Carbon Design System to include all four themes. If you were using the White theme library, then all you need to do is accept the library update. If you use one of the other three themes, you’ll need to migrate to the new library. We’ve included a guide below and links to other tutorials to help make this upfront migration as easy as possible.

How to migrate to the new library and apply a theme
To opt into these new variable features, you’ll need to migrate any assets previously connected to the Gray 10, Gray 90, or Gray 100 theme. Below are a few easy steps to migrate your assets to use the new All themes library. For a detailed walkthrough and some in-depth tips on migrating whole libraries, watch the IBM Figma Friday replay (available for IBMers only).

1. Open the Libraries panel and swap to the new All themes library (be sure to pick the right Carbon version). Note down any unmatched components/styles for troubleshooting later.
2. Wait for the update to complete, this may take a minute. If needed, consider breaking up large libraries and reconsolidating them after the migration.
3. Repeat the process for any of the other Carbon themes used (Gray 10, Gray 90, Gray 100).
4. Set the desired theme mode by selecting a page and then changing the theme in the Page section on the right panel. The theme swap will have set everything to the White theme mode by default.
5. Apply inline theming for components with mixed themes. Select a different theme mode at the component level by selecting a component, then change the theme mode in the Layer section in the right panel.
6. Check for unintended overrides and resolve issues.
7. Repeat as needed for all libraries, files, and assets.

Deprecating the other theme library files
We have deprecated the Gray 10, Gray 90, and Gray 100 theme library files in favor of the All themes library file. The deprecated files are still available in our system, but we will stop updating and supporting these theme files moving forward. We have implemented this in the v10 theme libraries as well. The names of these files will now read as “🚫[v11] Gray 10 — Carbon Design System [Deprecated]”.

Don’t worry, though! We’re not deleting these other libraries any time soon. You will still have access to them, and nothing in your files connected to the theme should change or break. The only difference you may notice is the name change and its order placement in the library panel.

Embracing the Future of Design
At IBM, we remain committed to providing the best design resources for our community. This update is just one of the many steps we are taking to stay at the forefront of design trends and technology, empowering designers and developers to create exceptional digital experiences.

Stay tuned for more updates as we keep pushing the boundaries of design excellence. Whether you’re an existing user or someone new to Carbon, we invite you to explore the enhanced library and give us feedback on GitHub.