Building Obsidian, Tinder’s Design System

When Tinder first launched in 2012, it pioneered a brand new user experience: the Swipe Right® and “Swipe Left”™ features. The app’s simplicity was a big part of what made it so appealing. <img alt="A user interface with the Tinder logo at the top, a profile photo of a woman, her name and age, and a set of icon buttons representing actions like swiping left and right." src="https://miro.medium.com/v2/resize:fit:213/0*fDrjah0dLI55mjcx" style="height:421px; width:237px" /> An early version of Tinder We’ve emphasized building new features and moving fast while growing, but a decade later, Tinder has become a significantly more established app. It’s become harder to maintain consistent design practices across every screen and component and the codebase suffered too. <img alt="6 lines of code defining the style of a button in Swift" src="https://miro.medium.com/v2/resize:fit:630/0*LH6jEdtNZ0vaXrts" style="height:186px; width:700px" /> The cost of designing, building, and maintaining features was becoming unsustainable. We needed a way to unify the appearance of the application, save time for product managers, designers, and engineers, and deliver a more consistent appearance to our end users. We needed a design system. <h1>What is a design system?</h1> Using patterns in designing software isn’t a new idea — it’s been around since at least the 1960s. But it was Brad Frost who popularized the phrase “Design System” with his 2016 book <a href="https://bradfrost.com/blog/post/atomic-web-design/" rel="noopener ugc nofollow" target="_blank">Atomic Design</a>. A design system is essentially a standardized collection of styles and reusable components that dramatically reduces the cost of design and development and increases the quality of an application. One common idea across many design systems is the notion of “Design Tokens”. These are tiny bits of design data that can be used to build interfaces. Design Tokens can consist of colors, gradients, font faces, border radii, or any other value that’s used in a UI. <a href="https://medium.com/tinder/building-obsidian-tinders-design-system-e127770d8e3f">Visit Now</a>