The Switch to Variables
Since Figma introduced variables last year, the team at Rangle.io has been evaluating the best token tool for our projects. Currently, Figma offers two main methods for creating tokens: the Tokens Studio plugin and the recently introduced local variables. This article compares the two, summarizing their strengths and weaknesses. For background on our token discussion, refer to our previous blog post about tokens.
Tokens allow companies to have a source of truth for their styles, consistency, agility, themability, scalability, and a common language between design and development. In general, tokens are a means to facilitate many great benefits for teams, but also come with an overhead, so being conscious of how and when to use tokens for projects is very important.
To learn more about tokens and Tokens Studio, read our previous blog post here.
Comparing Figma Variables to Tokens Studio
Our comparison involves the latest versions as of March 2024: Figma variables version 116.17.11 and Tokens Studio version 1.38.9.
| Comparator | Variables | Tokens Studio |
|---|---|---|
| Tokenizable | Missing tokenization for typography (but coming very soon). Use workarounds / future-proofing to fill in the gap of missing tokens. Component properties can have tokens applied to them, allowing for responsive layouts and components. | Almost all values can be tokenized. Component properties can have tokens applied to them. |
| Token Structure | A consistent and complete set of tokens is available to the designer. Tokens are divided into collections and modes, allowing for the same structure of tokens to be repeated easily. Creating one-off tokens is not an option; it must be in a mode and collection. Modes act as a toggle. This better matches the mental model of working with CSS layers. The model of variables was intended to support multi-brand design systems and, in the near future, will have “Extended Collections” to match Tokens Studios model as well. | Depending on which tokens are enabled, the available tokens may differ. In some contexts, token names may not exist. Collections act as a boolean, turning on and off sets of tokens. |
| Token Creation | Tools like exporting and reloading the tokens can help with mass edits. | For more significant token edits, tokens can be edited quickly as a JSON and for more minor changes, drag and drop for the reordering of tokens. Large token libraries can take some time to load, especially when synced from external sources. |
| Context | The context of which mode is active is visible in multiple locations. Colours do not render the value and are only available in the editor context. | The context of active token sets is lost once deselected. Looking at the individual token gives context to the value of the token. |
| Documentation | No/little documentation is needed because of the native UI displaying the tokens. Hand-off is easier because of the consistency of the documentation (built-in tooling). Developers need to have Dev Mode. | Easy to auto-generate documentation. Documentation needs to be updated when changes are made. No reliance on Development tools. |
| Adoption | As a native feature of Figma, variables are easier to understand and start using. | The need to install a plug-in, always keeping the plugin open to view tokens, and potentially connecting it with an external token source (GitHub) can be quite a barrier to using Tokens Studio. |
| Applying Tokens | Managing and consuming tokens use different UI, giving a very integrated experience. The workflow for applying tokens is for small single edits, but for larger edits, it can become tedious. | A single interface for the creation and consumption of tokens. You must open the Tokens Studio to apply tokens. By having the same interface for consuming and creating, consumers cannot be isolated from contributing. Editing/adding tokens should be limited to just one user at a time to avoid conflicts. Applying the token repeatedly to multiple components can be done quickly. |
| Paid Features | With the recent updates to Dev Mode and read-only mode, Figma will require you to buy additional licenses for developers. Depending on your product tier, this can cost up to $35 USD per developer per month. This can be avoided by creating documentation, but the creation of documentation can be time-consuming and error prone. | There are a few features behind paywalls. These features are more advanced and not core to the product's use. For basic token usage, the free version of Tokens Studio will work. However, as your team grows and the design system becomes more complex, the paid version, which is 16 € per user a month, will be required. |
| Exporting | Third-party tools and custom plugins are needed to export the tokens. | GitHub and external token management integrations. Native ability to edit/copy/export tokens directly to JSON. |
Implications for Design Systems
What impact does this have on the design system you are creating?
Maintainability
Variables provide a more transparent, staffable, and maintainable solution for long-term token usage.
When opening a design file for the first time, it is not apparent that Tokens Studio is being used. This lack of evidence will require governance to raise awareness of tokens. We’ve seen edits to design systems where Tokens Studio was in use but not used for the edits (this takes time to clean up).
In the long term, with variables being a native integration, it will become the more popular tool for tokens. Having more designers who understand variables will make it easier to find maintainers.
If creating a design system, variables also allow consuming designers to understand how tokens are used and will enable them to expand the design system within their own projects. Applying variables is no different than applying styles.
Extensibility
Adding to an existing design system that uses variables is relatively simple. The way Figma has structured tokens with modes is designed to accommodate this type of extensibility. This makes onboarding a new brand or extending current brands relatively simple because all token sets are kept in sync with each other. This does add limitations to creating snowflake/one-off/custom brands, but the system's stability is more valuable than the one-off edits.
Only a few months after introducing variables, the Figma ecosystem of plugins and widgets is massive. These plugins extend the native functionality of variables, adding exporting and importing tokens, automation of documentation and code generation. We see a lot of potential for plugins and widgets for Figma and are excited to see what people create.
Summary
When starting a new project, we would use variables. At present, we’ve found appropriate workarounds for typography, and with multiple ways of doing this, it’s not a barrier to using variables. For any of the other cons to variables, we can either create or find plugins to solve our needs.
When taking on an existing project using Tokens Studio, it becomes more of a discussion of whether it’s worth the migration. The migration is not a one-click solution, so considering when to migrate is a big decision. The main factor at the moment is typography in variables. If you migrate right now, you will use both systems: Tokens Studio for Typography and variables for everything else.
Another consideration would be if Tokens Studio is new to your team, is causing troubles with upskilling, or is set up strangely. In that case, migrating sooner might be better than waiting.
Overall, we are excited about the new possibilities that variables present to us and have been having a lot of fun creating new plugins and working with Radius to accelerate the building of design systems!
