How One Pivotal Designer Escaped the Export-upload Abyss

The developer-designer handoff is an imperfect thing. In theory, a designer finishes a UI and sends it to the engineer to code, like a whistling baseball pitch that’s then bashed into the outfield. In reality, the process looks more like a volleyball game. Back and forth the files fly through the Interwebs as both parties cross their fingers they don’t accidentally work off an outdated document.

This was the experience of the design and engineering team at Pivotal, the software and services company based out of San Francisco. Colby Sato, one of Pivotal’s Product Designers on their Platform Monitoring team, would spend days managing the developer documentation on each project.

“You’re never done designing — things are always changing because you’re always getting fresh information,” Colby said.

Days spent on dev documentation

To keep the engineers in the loop about design updates, Colby would export the design frames as images, then upload those images to engineering cards in Pivotal Tracker (Pivotal’s project management tool). That happened 15–20 times per project.

The engineers’ used hundreds of cards for each project, so Colby would have to spend hours searching for the right cards. Sometimes, he would occasionally forget to update an image and engineers would work off the wrong file.

“It loses time for the developer and it’s embarrassing,” Colby said.

The Figma way

Then Colby’s manager introduced him to our tool, Figma. We’re a lot like Google Docs for design.

Colby loves the fact that his Figma design files are in the browser, which means they’re always up to date, accessible from any computer, and shareable with a link (no software downloads necessary). The tool also has a commenting function for explaining how frames are supposed to function.

“It’s not just a design tool — it’s a design management tool in a way,” Colby said.

Once Colby used Figma, he no longer had to update the developer cards when designs changed — he just made sure to include the Figma link when the card was first created.

“I don’t need to worry about the engineers going to the right file, I know they will,” Colby said. “It easily saves me two days of work per project.”

Comments in context

Figma also helped shorten Pivotal’s design reviews and make them more effective, according to Colby. At the company, engineers take part in design critiques weekly. They used to write down their notes on post-its and share aloud one-by-one, a slow, laborious process.

“Post-it notes are without context — they’re like floating ideas,” Colby said. “People reading theirs out will drone on. But with Figma we can understand them better because the notes are attached to the design itself.”

While engineers reviewed the design, Colby could watch everyone’s activity in the file, following their cursors around. If developers focused on a part of the design Colby didn’t need help on — like a component that’s set by Pivotal’s style guide — he could prompt them in the right direction.

“It gives the person receiving the critique more control over what they want feedback on,” Colby said.

Ultimately, Figma eased the developer to designer hand off and sped up the design critiques. That made it easier for Colby to work with his counterparts at Pivotal. It gave them more time to focus on the quality of the work itself, instead of the logistics of tracking updates and feedback.

“At Pivotal, we feel like a team that has input from everyone in developing a product is going to build a better product,” Colby said. “Figma enables that.”

You can read more about how Pivotal approaches building great user experiences by reading the Design section of Built to Adapt, Pivotal’s publication on Medium.