Dribbble scores with live design collaboration for its completely remote team

What do basketball and design have in common? Why, Dribbble, of course. 

We all know Dribbble and its pink basketball logo, but did you know that Dribbble has shared more than 3 trillion pixels since it was founded? The go-to resource for discovering and connecting with designers and creative talent around the globe, Dribbble helps 40,000 of the world’s best design-forward companies — Apple, Airbnb, IDEO, Facebook, Google, Dropbox, Slack, Shopify, and Lyft, to namedrop a few — get exposure for their design teams and hire talented creatives.

Hitting the court with remote players

Because Dribbble believes that creative collaboration can happen anywhere and wants its team members to work where they feel most comfortable and inspired, the company is fully, 100 percent remote. 

While the positive aspects of remote work — flexibility, better work/life balance, no commute, living and working wherever you want — help the company attract talent from everywhere, the logistics of teamwork can be more complex than walking around the office and chatting with coworkers.

For the growing design team, which includes seven product designers and developers, the biggest challenge was how to foster collaboration among designers when everyone is working remotely across multiple time zones. For Sarah Kuehnle, vice president of product at Dribbble, the goal was to make collaboration as easy as being in the same room together.  

Navigating time zones and continents, the design team relied on a slew of tools to help keep them in sync. “We used video conferencing and a mishmash of collaboration tools to support our design process and try to enable collaboration,” she says. However, none of the tools offered a seamless way of working together. 

There were other challenges as well. “We didn’t have insight into other designers’ work,” says Kuehnle. “Plus managing files and multiple streams of feedback took time away from actual design work.”     

Making long-distance collaboration a team sport

As a remote team, Dribbble’s designers are always looking for ways to optimize their workflow. When a new member introduced Figma to the design team, their curiosity was piqued. “Figma was immediately interesting to us because we could all jump in a file at the same time,” says Kuehnle. “We realized we could recreate the experience of working together in a meeting room, on a whiteboard, brainstorming designs and sharing comments in real time.”

Not only could Figma offer a way to easily share design files, but because it is online, it’s also easy to find current files without pinging multiple people or jumping in and out of various tools. “It’s great to stay heads down, in the file and ecosystem that I am creating in instead of incurring the productivity costs of switching from app to app,” says Rogie King, senior product designer at Dribbble.

King also appreciates how Figma handles vectors and its simple approach to copy-paste attributes. “It’s amazing,” he says. “The way Figma treats images simply as a fill of an object is super brilliant.” Check out King’s Twitter thread on designing in Figma. “I want the team to use the tools they love, but they also need to be effective for us as a design team as well as for the larger organization,” says Noah Stokes, director of design at Dribbble. “Figma has the capability to replace multiple tools in one swoop, giving us a single place to have our versioned work where anyone on the team can leave feedback and review new work. It’s pretty revolutionary, in my opinion.”

Naturally, some team members were hesitant about adopting a new tool and the effort required to get up to speed. The concerns went away once everyone realized that Figma made it easy to ingest other design file types to get started. “To ease the transition even more, we took our existing user interface and recreated it in Figma,” says Kuehnle. “That gave everyone familiar building blocks to work with.”  

💡 Share work to Dribbble directly from FigmaDribbble used Figma’s API to create an integration so you can send your work directly from Figma to Dribbble. Available today in the Figma web and desktop apps, it’s as simple as selecting a Layer and navigating to Integrations ▸ Dribbble, where you’ll be taken to the Dribbble desktop upload flow with your artwork.

Teaming up to solve problems faster

Using Figma for live, remote collaboration plays well with the Dribbble team’s strategy of using design pairs to tackle a problem or project. “We’ve found that working in design pairs helps us deliver products faster at a level of design for which we want to be known,” says Kuehnle. “Working together in a single file means design pairs can be that much more efficient.” By eliminating the friction of working between tools, team members have more time to focus on what they do best — design.

“The single source of truth helps to keep us all synced on the most recent design changes and reduces communication friction,” says King. “In larger team settings, with many iterations of a design file and many people riffing off of or adhering to a style guide, Figma flexes hard.” 

Dribbble is also using Figma to hold more frequent design critiques and tighten feedback loops. Multiplayer allows all the designers to jump into a single design file to share work. And because they are all working from the same file, the remote team can easily duplicate frames to brainstorm new ideas, make comments or implement changes all in real time.   

This means that Dribbble designers can iterate on designs faster, solving problems in minutes compared to days. Kuehnle cites a recent example: “We wanted to add something new to a user profile and I already had a frame in Figma that I presented to the team on a video call,” says Kuehnle. “Five of us all jumped on the file, brainstormed solutions, critiqued each other’s ideas, and within 20 minutes we had a design that we all liked. This is exactly how it should work.”

Making design transparent and collaborative for everyone

For the first time, Dribbble has one single source of truth for the team’s designs, which streamlines project management and creates greater transparency for designers, developers and stakeholders. “With Figma, there’s one place for feedback instead of managing different feedback threads separately,” says Kuehnle. “In addition to helping us solve design challenges faster, it helps us save project management time as well.” 

For King, Figma’s multiplayer mode helps him educate other designers on his workflow. By clicking on his avatar in Figma, designers can follow along as he designs and learn new things by watching what he does. Sometimes, he puts a Figma link into a Slack channel and invites people to his file, giving them a way to learn through osmosis — a method not otherwise possible for a remote team. 

Even the designers that use the Dribbble platform are collaborating and providing suggestions and feedback via Figma to the Dribbble team. “We redesigned the shot page a few months ago and immediately got intense feedback on it,” says Kuehnle. “Our users really care about Dribbble and several invested their own time in creating a Figma file with our new design and iterating on it. We got some great suggestions and actionable feedback from that effort.”

While Dribbble is tool-agnostic and prides itself on working with all design tools, the design team still turns to Figma to come together and collaborate across multiple time zones as if they were in the same room. “Figma allows true collaboration with not only fellow designers, but with all stakeholders,” says Stokes. “When everyone from our c-level folks down knows where to find design work to review, then we’re winning.”