Project — UX Engineering · Design Systems
Design Token Engine
A design token pipeline connecting Figma to code — processing and exporting tokens across CSS, JSON, and Swift formats. Built for SE-350 Object Oriented Software Development at DePaul University.
Role
Solo Project
Context
DePaul SE-350
Status
In progress
Stack
Java 17, JSON, CSS
The problem
Design tokens are the foundation of scalable design systems. But getting them from a design tool like Figma into production code — consistently, across platforms — is a manual and error-prone process. A designer changes a color in Figma, but that change has to be manually propagated to CSS, iOS, and Android separately.
The Design Token Engine automates that pipeline. A token is defined once, processed through the engine, and exported into whatever format the consuming platform needs.
The pipeline
Three-layer pipeline
Design patterns used
Builder + Factory
Token and TokenGroup construction uses the Builder pattern for step-by-step object creation. Factory pattern picks the right exporter at runtime.
Strategy
Export algorithms are swappable via Strategy pattern — CSS, JSON, and Swift exporters share the same interface without changing core logic.
Composite + Observer
TokenGroup containing Tokens uses Composite for natural nesting. Observer broadcasts token changes to all dependent components.
Command
Export and edit actions use the Command pattern to enable undo history across operations.
Why this matters
UX Engineers bridge design and engineering. Design token tooling is a core part of that role at companies building large-scale design systems. Tools like Amazon Style Dictionary, Figma Tokens, and Theo solve this problem in JavaScript. This project explores the same problem space using Java OOP principles — demonstrating that understanding of the full pipeline, not just one layer of it.
This project connects directly to Betancur DS — the same token architecture documented in Figma is what this engine is built to process and export.
Status
View on GitHub →Done
- Core token model
- Token, TokenType, TokenGroup
- TokenRegistry
- Builder pattern
In progress
- TokenResolver (alias resolution)
- Export layer (CSS, JSON, Swift)
- Factory + Strategy patterns
Planned
- Observer + Command patterns
- Undo history
- Live theme switcher demo