Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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.
SD-Transforms generic package includes a specific transforms to convert Tokens Studio themes into individual theme files for all possible permutations
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:
Mentioned in this Guide
Community resources:
None yet!
None
→
SD-Transforms Read-Me -
Tokens Studio Plugin GitHub -
💡 Something to share?
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💌 Visit to contribute or subscribe to updates.
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
