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

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

My Favourite Front-End Interview Question to Ask Candidates and Why

Simplifying UX Updates in Legacy Applications with Tokens: Figma vs. Tokens Studio

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Accessible Custom File Upload

3 Simple Reasons Why Coding Pixel Perfect Designs is So Painful

5 Best Mobile App Design Tools in 2022

6 Examples of Higher-Level Skills to Grow as a Designer

Adobe Pigs Out (Again)

Accessible Custom File Upload

3 Simple Reasons Why Coding Pixel Perfect Designs is So Painful

5 Best Mobile App Design Tools in 2022

6 Examples of Higher-Level Skills to Grow as a Designer

Adobe Pigs Out (Again)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps