Loading…
Building Obsidian, Tinder’s Design System
TinderTinder
Summary
As Tinder scaled over a decade, maintaining visual consistency across its client applications became unsustainable and increased engineering overhead. To address this, the UI Platform team developed Obsidian, a unified design system combining design tokens, reusable components, and documentation. Designers define base and context tokens in Figma using the Tokens Studio plugin, which are then transformed by Style Dictionary into native artifacts for iOS, Android, and Web. Web developers integrate these tokens using Atomizer to generate static stylesheets, while a Zeroheight documentation portal and a custom token lookup tool assist legacy migrations. The ongoing migration has streamlined collaboration between designers and engineers, resolved styling ambiguities, and improved color contrast accessibility across platforms.
Context
Over a decade of rapid feature development at Tinder led to inconsistent design practices across screens and components. The cost of designing, building, and maintaining features across iOS, Android, and Web became unsustainable due to fragmented styles and thousands of hardcoded raw values in the codebase.
Approach / What changed
Tinder's UI Platform team built Obsidian, a design system centered on design tokens and reusable UI components. Designers define tokens in Figma with Tokens Studio, and a pipeline using Style Dictionary transforms this data into code artifacts for Kotlin, Swift, and TypeScript. For Tinder Web, tokens integrate with Atomizer build-time stylesheets. To support migration, the team launched a Zeroheight documentation site with over 100 pages and built a token lookup tool that maps raw values and names to cross-platform code snippets.
Takeaways
- Obsidian categorizes tokens into base tokens for raw styling values and context tokens for semantic usage and theming, enabling automatic dark mode adaptation.
- Tokens Studio in Figma serves as the source of truth, where a custom script and Style Dictionary transform token data into native artifacts for iOS, Android, and Web.
- Tinder created a token lookup search tool and over 100 pages of Zeroheight documentation to help engineers replace thousands of legacy raw hex and font values.
Related reading
Tinder ·
Sharing Tinder’s latest contributions to the open source community
Tinder open-sourced several iOS development repositories, including Layout, Nodes Architecture Framework, and CombineUI, to share the engineering patterns supporting its iPhone application. As the app expanded across diverse device profiles and scale, engineering teams faced reliability, consistency, and memory challenges under their legacy architecture. In response, Tinder developed Nodes, a plugin-based architecture framework using compile-time dependency injection and lifecycle hooks that enforce complete memory release upon feature dismissal. For interface construction, Tinder created Layout, a domain-specific Auto Layout wrapper offering declarative syntax for UIKit views to eliminate storyboard merge conflicts while preserving native capabilities. The resulting stack enables isolated testing of business logic, native reactive event binding, and incremental adoption of SwiftUI across the codebase.
TinderTinder ·