Elements from Facebook’s iOS 10 GUI

Giving Back to the Design Community

Why a small team of Facebook designers build resources for designers

Jeff Smith
Design at Meta
Published in
4 min readOct 17, 2016

--

Many of the designers at Facebook arrived here thanks in part to the resources and tools others created. Those tools enabled us to learn, move fast, and jump on opportunities. As a result we feel naturally inclined to give back to the design community by building resources and tools ourselves.

My path into design is a great example how those tools can have an impact on a young designer. I didn’t go to design school. My education came by way of the internet and by meeting with a handful of seasoned designers for coffee.

When I started freelancing, I remember sitting at my kitchen table with a mix of fear and self-confidence after overselling my skills to my first client. I found myself combing through the web, looking for guidance on how to design for mobile, and I stumbled onto one of Teehan & Lax’s iOS GUIs.

Photo Luke Chesser

I pulled that file apart layer by layer, reassembling screens for that client. At the time, it gave me a basic framework in which to work: loose mobile navigation patterns, guidelines for type, and a bounty of Photoshop best practices. I distinctly remember feeling a tremendous sense of gratitude for having that kind of resource, and to the people who created it.

Years after that first client, I joined Facebook — it was Jon Lax who’d found my portfolio, and Geoff Teehan who became my manager. Geoff and I talked over drinks about those iOS GUIs shortly after I joined. He shared what they meant for Teehan & Lax in the early days of their agency and mentioned that we should consider creating one at Facebook. I offered to lead the effort.

We released our first iOS GUI a few months after that conversation. It was a couple weeks of work from 14 people from across the entire Facebook design team. Designers from business products to Instagram to News Feed all got together after working hours and created layer after layer of that first release. It’s rare to see this sort of close collaboration among so many people from disparate teams across a company of Facebook’s size. I think most of us put in those late nights because their story wasn’t far off from mine — we all felt a strong desire to give back.

The first release of Facebook.design

After nearly 250,000 downloads and extending the collection to include a set of diverse hands and devices, I’m excited to share the next big release of Facebook’s design resources. We’ve added new Apple and Google devices and an iOS 10 GUI. We’ve also extended our set of components, making sure they match the standard components that an iOS developer would have at her disposal.

We also realize that creating resources for the design community is more than just producing Sketch and Photoshop files, so we’ve consolidated many other resources into Facebook.design. Our already-rich collection of Medium articles is a massive resource detailing our design thinking and values. In this collection, you’ll find articles about our tools, culture, process, case studies and more. Similarly, our growing collection of videos are intended to help share inspiration and insights from designers both inside and outside Facebook.

Assets from the updated Facebook.design featuring tools, writing, and videos

Giving back is an important part of growing as a person and an organization. Right now, somewhere out there, someone is learning how to move pixels around or thinking through a product flow for the first time. 10 years from now (after the tools we use today have ceased being relevant), that same person may be one of the designers many of us look up to. For them, as much as the experienced designer, we want to create resources that help designers create great things better and faster.

Giving back is an important part of growing as a person and an organization.

Facebook.design is just getting started. Like most things at Facebook, it will be iterated on frequently. But we hope this becomes a place where designers can find great resources to grow as a designer and develop in their career. Ultimately, we hope we can help push our discipline forward.

Thanks to Robin Clediere, Dan Lebowitz, and Andrew Aquino for designing and creating the updated site and all the other contributors behind Facebook’s design resources.

--

--