Restitching Plaid

Updating Plaid to modern app standards

—Nick Butcher and Florina Muntenescu

Cutting cloth: Plaid’s origin

Around 4 years ago (2014) I started seeing some of the early design work for what would go on to become Material Design. It got me excited — all of the amazing animated transitions, bold typography and color palettes, animated icons and a tangible elevation model. At the same time Android (Lollipop) introduced a number of new APIs to support building these experiences. I immediately wanted to start prototyping building the kind of designs I was seeing — to figure out how (or if!) you could build this in an Android app. This prototype kept growing as I investigated more interactions and patterns until it was starting to look like a coherent app. I realized that I wanted to open source this to share what I’d learned and put it in the hands of others to showcase what material design could be and how to build it. That’s how Plaid was born and ended up being open sourced in July 2015. It pulls design news and inspiration from APIs offered by Dribbble, Designer News and Product Hunt and displays them in a rich, interactive UI.

Visualizing how elevation reflects and reinforces the most important elements

The major goal of Plaid was to showcase material design and how to build it; providing both education and inspiration. I’m particularly pleased with some of the work on animations and transitions — it was one of the first showcases of shared element transitions and vector icon animation:

Shared element transitions guide users between screens

Icon animations ease state changes and provide character

Fast forward to 2018 and I consider that the app achieved that major goal of being a showcase of material design and how to build it. But all was not good. The two primary data sources it was built upon had changed significantly. Designer News launched v2 of their API which was a major departure from v1 and would require significant rework. Dribbble also launched a new version of their API which removed a lot of the functionality available in v1. With the changes to these data sources, you could no longer access sections of the app e.g. the above text transition into a Designer News details screen no longer worked. It wasn’t meeting its goals any longer.

On top of this the world had moved on. Plaid pre-existed our opinionated guide to architecture & the architecture component libraries and instead used… well no architecture beyond bloated Activities. It also pre-existed the Design support library let alone MDC-Android (which is why it has its own implementations of classes such as FABs or BottomSheets) or Material Theming. While I’d introduced some Kotlin into the project, it was still largely Java based. It had no tests! It had a lot of technical debt.

This technical debt made the prospect of updating the app for the revised APIs or perhaps even adding new data sources pretty daunting. I was contemplating whether I wanted to put in the time and effort investment that it needed… or if I should call it a day and retire the app. That’s when Florina Muntenescu came along with an interesting proposal. Over to Florina…