Design Systems at Dropbox
An interview with Dropbox’s Zach Johnston on reusable components, evolving design tools and scaling with Framer.
Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →
Everyone loves a good origin story and Zach Johnston’s is a classic San Francisco tale. “Seven years ago I got in a Prius with two friends and drove across the country. I had just discovered that my HTML and CSS skills were in high-demand on the West Coast and figured the summer months of my sophomore year of college would be better spent building apps in San Francisco than crafting advertising campaigns in New York,” says Zach. Three months after that fateful road trip, it was abundantly clear that going back to Penn State was nowhere in his future.
Today Zach works on Dropbox Design Systems, a team that didn’t exist a year ago. In his three-year tenure at the file storage behemoth, Zach has had a chance to impact multiple products (including Teams and Business) and watched as the company— and design team—grew at a rapid rate.
On growth, scale and the need for design systems
“When I joined, our design team was only 20 people and we were all sitting together. Now we have over 50 product designers and dozens of writers, researchers, and illustrators,” says Zach.
Though the team managed to stay bonded, the product wasn’t always as cohesive. In response, the company began to invest more heavily in reusable components and last year, formed an official Design Systems team.
“One way we’ve enabled our design team is through UI Kits. We first made Sketch Libraries for each platform (web, desktop, and mobile) and just recently published Framer Kits. We keep an eye on which tools our design team is using most and then try to help them spend less time doing the mundane tasks like redrawing buttons,” says Zach, who focuses on the web platform.
He stresses that design systems shouldn’t be about second guessing decisions or implementing heavy processes. Dropbox’s mission is to unleash the world’s creative energy and he sees his team’s mission as unleashing Dropbox’s creative energy.
“For us, having a Design Systems team just means we can spend less time policing and more time enabling.”
Zach, along with Adam Noffsinger, are behind the Framer Desktop Kit, a hand-drawn, custom-built kit that consists of UI components, code snippets, and sample prototypes designed to speed up any desktop prototyper’s workflow.
In spite of the level of detail that went into the creation of the kit, Zach is quick to point out that he isn’t the most advanced Framer user on the design team at Dropbox. “But I’m definitely the loudest advocate,” he says, laughing. It’s a funny turn of events for this non-traditional designer, who spent much of his early years being staunchly anti-Framer.
On switching design tools and mindsets
In fact, not only was Zach not a Framer proponent, he spent a good amount of time as a Framer opponent. “Everyone at Dropbox loved Framer and I was the rebel in the corner who still prototyped using plain HTML/CSS/JS. Ed Chao (a product designer at Dropbox) turned me on to a static site generator called Cactus and for a while I was using that to manage and deploy HTML/CSS/JS prototypes.”
Then one night in 2016, Framer founders Koen Bok and Jorn van Dijk hosted a workshop for Bridge Fellows, a design program run by Designer Fund, and everything changed for Zach: “At the end of the night, Koen came by my table and asked how we were finding the new Design tab. I used the opportunity to lay out all the reasons I thought Framer was inferior to this other amazing prototyping tool, Cactus. He patiently listened and finally said “What if I told you we made Cactus?”
As someone who learned how to prototype without fancy tools, Zach felt that having direct access to the code was the purest form of creation. It took 7 years, but he finally changed his mind. “Cactus helped me realized that “fancy” tools can take your mind off the painful parts of prototyping like spinning up new projects, installing packages, and deploying to a server,” says Zach.
“But Framer’s Design tab showed me that visually laying out a page is far better than writing thousands of lines of HTML and CSS.”
On using Framer to sell product ideas internally
Despite finally seeing the light, there was a second pivotal moment that turned Zach from a mere Framer fan into an advocate. “My PM, Graciela Kincaid, and I had just presented a new Dropbox Business onboarding flow to senior leadership and got feedback that the flat mocks were hard to understand,” says Zach.
“They wanted to feel the onboarding flow, not just see it.”
Back at their desks, the pair strategized next steps and Zach proposed using Framer to make a more believable desktop prototype. “At this point, I knew Framer was powerful, but it took building out a complex desktop prototype to realize just how far it can go. Framer even made it simple to add in the background-blur effects on the Menu bar and Dock.”
“Pushing all of the layout detail to the Design tab and keeping the code to a minimum also made it easy for other designers to hop in and contribute.”
He adds that he and Graciela were eventually able to use the Framer prototype to sell leadership on their onboarding proposal and get buy-in from other teams.
On finding a design home
It’s no secret that Dropbox is doing well. A robust suite of products and a reported 500 million users make this 11-year old company an all-around attractive place to work. But it’s the collaborative and nurturing environment fostered by teams like Zach’s that make Dropbox a truly exceptional place to grow into a career in design. “It’s actually amazing how in spite of our fast growth, the design team still feels like a tight-knit family,” says Zach.
Dropbox loves hiring designers who can bring their designs to life with realistic prototypes — they’re even hiring a Design Systems team manager! Take a look at all their open roles here or DM Zach on Twitter for more information on how you can join a great team that is building tools to unleash the world’s creative energy. If you’re interested in desktop prototyping and plan to use the Framer Kit, read Zach’s Medium post to learn how to effectively utilize the kit in your own workflow.
