Simplifying UX Updates in Legacy Applications with Tokens: Figma vs. Tokens Studio by@kartaplyany1smoothie
Simplifying UX Updates in Legacy Applications with Tokens: Figma vs. Tokens Studio
by Artsiom MarozauOctober 16th, 2024
Too Long; Didn't Read
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.
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.
L O A D I N G
. . . comments & more!
. . . comments & more!
