GitHub takes its collaborative culture to a new level
Learn how GitHub uses Figma to build its design system.
Where do developers go to build software? GitHub, of course, which is home to more than 31 million developers around the globe. Founded in 2008 and part of Microsoft since 2018, the GitHub development platform is where developers learn, share and work together to build amazing software.
The platform makes it easier for developers to work together, solve challenging problems, and create the world’s most important technologies. It does this by fostering a collaborative community that comes together—as individuals and in teams—to create the future of software and make a difference in the world.
“GitHub has a great culture of collaboration,” says Diana Mounter, design operations manager at GitHub. “But we’re also a remote company, with designers, engineers, product managers and others working from many different locations. We needed a way to break down the barriers to collaboration and creativity that can happen when you’re not sharing the same physical space as someone else.”
Growing the design system and the team that supports it
When Mounter joined GitHub in 2015, the company didn’t have staff dedicated fulltime to a design system. “Designers had to recreate the same thing over and over, there was missing documentation, patterns were outdated, and other issues existed that people were trying to solve on their own,” says Mounter. “We decided to start a grassroots effort to streamline our processes with a design system and documented workflow.” Within six months of the start of the effort, a permanent team was formed, including Mounter and one other person.
That was then. Today, the design systems team has seven people (out of 25 on the overall product design team) dedicated to delivering reusable, interchangeable components to make the design process at GitHub efficient, repeatable and scalable. “Design systems have become core to the way we design and build at GitHub,” explains Mounter in an article she published.
Fixing the bugs in the design workflow
While having a dedicated team to build and maintain the design system helped address some of the design team’s efficiency and consistency issues, the workflow for the system and the tools required to support it were keeping the team from working efficiently and collaboratively on core components.
“We had some painful steps in our workflow that made it restrictive and confusing for contributors who wanted to iterate or update things like icons in our SVG icon library,” says Jon Rohan, system designer and engineer at GitHub. “People needed to have specific software installed and knowledge of certain tools to make contributions.”
To resolve the issues with updating the icon library, called Octicons, GitHub kicked off an experiment with Figma. “We got excited about Figma because it didn't require downloading and installing software as part of the workflow to update icons,” says Mounter.
For Rohan, it was the combination of Figma and the Figma API that would allow GitHub to make the contributing experience as frictionless as possible. “By migrating Octicons to Figma and using the Figma API, we could automate the workflow, which allows people to contribute to the design system using powerful, platform-agnostic design tools without any complex setup.” For the full story on Octicons, checkout the GitHub blog.
Realizing the potential impact Figma could have on the team’s workflow, the design systems team began migrating its UI components to Figma as well. “Nearly everything that designers and developers need to build and design GitHub are now available in Figma,” says Mounter.
Creating a “DesignHub” for remote collaboration
Although the team has always been tool-agnostic, Figma’s use began to spread like wildfire. As a remote team, the fact that Figma is web-based design enabled them to overcome the physical separation and begin collaborating in a very real and efficient way.
“Being able to jump in the same file with someone fills the gap of not being able to gather around a whiteboard with someone,” says Mounter. “Figma replaced the whiteboard for us.”
Kathy Zheng, senior product designer at GitHub couldn’t agree more. “For the first time since joining GitHub, I can experience design collaboration and get all of the benefits of a team that's physically together. And perhaps it's even more fun than whiteboarding because you have powerful features at your fingertips.”
For Zheng, Figma puts creativity back into the process. “No matter where you are in your design process, how do you play a little bit, so that you might stumble across something novel?” she asks. “The moment that I started doing design jams where I was jamming in Figma files with other designers, I got that feeling back, that by disseminating an idea, we can create gravity and momentum around it.”
Today Zheng uses Figma for “basically everything that revolves around storytelling.” Design is storytelling and prototyping puts a story in action. “Prototyping is now a integral part of my workflow because it is so easy,” she says. “I can quickly drag stuff around to suggest the flow I'm designing for without switching tools.”
GitHub is a space for collaboration. Everything that we build, the features and the tooling, should enable that collaboration. Figma is a natural tool for us to use because it embraces and supports collaboration between designers and engineers.
Accelerating feedback for faster delivery cycles
Designers like Zheng appreciate how Figma improves and accelerates the feedback cycle, lowering the barrier for non-designers to participate. “At GitHub, we’re always closely collaborating with our project and engineering teams,” says Zheng. “The more we invite engineering into our feedback cycle, the better the outcome for both parties and the shorter the overall cycle.”
Ash Guillaume, graphic designer at GitHub, agrees. “I can instantly take my design and share the link with any of my team members,” he says. “They can open it in Figma and give me feedback through the commenting system, speeding up the feedback loop.”
Rohan from the design system team believes that sharing more than a screenshot is essential to communicating and getting feedback. “People can look at the actual design, which is super valuable for us because we ship incremental, early and often, and the speed and momentum to make changes quickly is crucial,” he says. “A lot of engineers love being able to go to a Figma link and see designs and prototypes.”
Seeing success spread across the company
When asked about the success of Figma at GitHub, first and foremost for Mounter is how it helps the design systems team. “With Figma, it’s easier to keep our design system up to date,” she says. “But I think the other measure of success is just seeing more engineers and product managers joining in and finding it useful to collaborate with designers. The ultimate success is seeing Figma usage spread across the GitHub organization.”
Figma helps designers at GitHub expose more about what happens between the start of an idea and the finished design. According to Mounter, “there's less of a barrier to getting access to work-in-progress for people outside of the design team which means more people can participate and more innovation happens.”
That collaboration is at the heart of what GitHub has always been about — creating something amazing by bringing individuals and teams together in one place.
Another designer and I were jamming together in a Figma design file, just exploring, having fun and bouncing ideas off of each other. When someone else joined in and saw all the work that we were doing, it started new conversations that wouldn't have happened otherwise. That's something that I haven't experienced in any other design software.
