A Product, Service & UX Designer.
Case Study #7
A Token and Variable-Driven Experience Framework​
​
Bridging design and development while ensuring clarity and trust for Banking & FinTech products.
The Early Days
​
Designing digital products was once manual and time-consuming. Interfaces were crafted pixel by pixel in Photoshop, then handed off as static screens to developers. Every small change like updating a button color meant revisiting multiple files, manually adjusting components, and risking inconsistencies.
​
Tools like Sketch and Adobe XD improved collaboration but didn’t fully solve cross-platform consistency, theme updates, or state management. Maintaining a single source of truth felt impossible, and iteration cycles were slow.
The Evolution
​
With Figma and component-based design, I began building reusable components. Updating a master component now propagated changes to all instances, improving speed and reliability.
​
However, colors, spacing, and typography were still hard-coded inside components. Updating a brand color remained tedious every component had to be manually adjusted.
The solution? Token and variable-driven design.
Token & Variable-Driven Approach
​
I implemented a three-layered system:
​
1. Primitives (Raw Values)
2. Semantic Tokens (Contextual Usage)
3. Components Linked to Tokens
​
-
Buttons, cards, forms, and alerts reference semantic tokens.
-
States like hover, active, disabled are also tokenized.
-
Theme switching (light/dark) is effortless by redefining semantic tokens without touching components.
The Result
​
-
Instant global updates: Change a primary color once, update all components automatically.
-
Seamless theme switching: Light and dark modes applied with zero duplication.
-
Single source of truth: Tokens and variables scale across teams and platforms.
-
Responsive design: Components resize and adapt to any screen or layout.
-
Efficient collaboration: Designers and developers work from the same reference files, reducing handoff errors.
1. Light Mode
1. Dark Mode
This design system enables fast, reliable, and adaptable product design, ideal for the dynamic world of banking and FinTech. Designers can share assets with developers via Figma Tokens Studio or JSON for seamless code integration, and update or iterate with one click propagating changes in colors, spacing, typography, and themes across all instances instantly.
​
