Figma vs. Tokens Studio

Simplifying UX Updates in Legacy Applications with Tokens.

Nov 13, 2024 - 03:04

Nov 13, 2024 - 03:03

0 100

No Way, It’s Not Possible…

The UX team typically doesn’t consist of engineers. When a task seems simple, they ask many questions, but when it's complex, they can often expect a quick turnaround. The irony, amirite?

But You Can Try?

If you have a legacy enterprise solution, your UX team probably wants to update how it looks. In my experience, every 3-5 years, the UX team either adds or removes padding between components or changes component/input sizes. To make these updates easier, I suggest using tokens. Depending on your budget and needs, you can choose between Figma’s native tokens or the Tokens Studio plugin. There are probably more plugins out there, but I’ve only worked with Tokens Studio as it’s popular and feature-rich.

Here’s a detailed comparison of the two options:

Feature	Figma Tokens (Native)	Tokens Studio Plugin
Color Tokens	✅ Yes	✅ Yes
Typography Tokens	❌ No	✅ Yes
Spacing Tokens	❌ No	✅ Yes
Shadow Tokens	❌ No	✅ Yes
Border Tokens	❌ No	✅ Yes
Opacity Tokens	❌ No	✅ Yes
Radius Tokens	❌ No	✅ Yes
Sizing Tokens	❌ No	✅ Yes
Composite Tokens	❌ No	✅ Yes (e.g., Semantic Tokens)
Token Relationships	❌ No	✅ Yes
Dynamic Values	❌ No	✅ Yes
Versioning	❌ No (file-level)	✅ Yes
External Syncing	❌ No	✅ Yes (e.g., GitHub)
Custom Export Formats	❌ No	✅ Yes
Conditional Tokens	❌ No	✅ Yes
Integrated Experience	✅ Yes	❌ No (plugin required)
Learning Curve	✅ Low	⚠️ Moderate to High
Native Support in Figma designs	✅ Yes	❌ No

With this, I hope you can make informed decisions as your business needs requires.

What to do?

Your UX team can create tokens for things like colors, font sizes, and spacing. Then, when they need to change padding, they only have to adjust the token sizes. They check that everything works in UX, and then the application can be updated. No matter which tool you choose, the main idea is to have tokens in place.

Architecture

Here’s the architecture we used in my project:

The UX team updates the tokens.
The dev team reviews the tokens to ensure they’re exported correctly from Figma.
Before updating the entire app, testing these changes locally and in a test environment makes sense. That’s why we have manual package updates and no CI pipeline for this process.

Conclusion

For big legacy applications with long lifespans, it makes sense to implement tokens. Tokens serve as a language between the UX and dev teams, ensuring that UX can quickly make changes and catch bugs earlier in the process.