Themes (pro)

In software and web development, a Theme defines the styling choices applied to the graphic elements of an interface, influencing the appearance and atmosphere of websites and software applications within a specific context, such as a brand, platform, or user preference.

When you are working with Design Tokens, the concept of theming enables you to style the same components in different ways so you can do more without needing to manage more components.

For example, instead of having 2 button components, light-mode button and dark-mode button, you have a single button component that takes on the styling properties of the color mode theme that is currently active.

The Themes feature in Tokens Studio allow you to define combinations of Token Sets that are intended to be applied together to style design elements. Under the hood, the Plugin creates a themes configuration file that can be shared with developers and used in code.

Multiple Themes can be applied at the same time to create a matrix of possible concepts that a single design element can be styled with. This is also known as multi-dimensional theming.

Themes Guides

Themes that switch - a simple example.

Export to Figma Styles and Variables using Themes.

We are working on several new guides to help you master working with Themes in the Tokens Studio Plugin for Figma - coming soon!

• Creating, editing, and removing themes.

• Multi-dimensional theming.

• Detach styles and variables from Themes.

• Attach local styles and variables to Themes.

Transforming Themes for use in Code

As soon as your Token project includes Themes, there are JSON files created by the plugin to save your configuration data so it can be shared with developers. Once developers have the new Themes files in your external storage provider, they can use that data in their transformation process to turn the themes file into usable code.

Engineers typically transform Tokens used in code with Style Dictionary, which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: @Tokens-studio/sd-transforms, an npm package that prepares Tokens for Style Dictionary.

SD-Transforms generic package includes a specific transforms to convert Tokens Studio themes into individual theme files for all possible permutations

→ SD-Transforms Read-Me Doc, Theming

Plugin Sync Settings

If this is the first time you are working with Themes in your project, theres a couple things you'll want to do in the Plugin Settings make the transformation process as simple as possible:

Sync to a remote storage provider, like GitHub, GitLab, Bitbucket or Azure DevOps.

Configure your sync settings to save to a folder in your repository with multiple files.

Resources

Mentioned in this Guide

• SD-Transforms Read-Me - Theming

Community resources:

• None yet!

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Themes

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email [email protected]

Requests, roadmap and changelog

• None

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.