How We Used an Ecosystem of Tools to Work Collaboratively + Remotely

(Image Creds to Keila Hötzel)

2020, Year of Remote Work

However, just using the tools is not enough to ensure transparency and productivity in a remote work environment. In addition, teams need to establish an organized ecosystem of tools to eliminate problems such as communication gaps.

For my 5th co-op term, I worked as a mobile design systems (DS) intern at a multinational company and worked with people from 3 different time zones. The time zones introduce problems with time availability — the time overlap when people are able to host a meeting is reduced, and that might cause double meeting bookings.

With that problem in mind, our tools need to be able to support a continuous workflow even when meetings are not feasible.

  • Figma is the holy grail tool that really helps with real time collaboration
  • Confluence serves as the home of many types of documentation such as design guidelines, progress tracking, meeting notes etc

Figma Magic (and a bit of Slack)

All the work is automatically saved by Figma and immediately available for everyone on the team to view. At this point, you might be wondering, “where’s this ecosystem of tools you were talking about?” Glad you asked. Figma is only the foundational tool where the most of the collaboration is done. The rest of the ecosystem is built around Figma.

The mobile DS team uses a status system to track the progress of design components in Figma. We start off with a Proposal file for each component in a different folder than where the “good copies” of components would live. This ensures that the design component library won’t accidentally be changed. All the initial stage iterative work is done in the proposal file until the first draft version is ready to be added to the “good copy of components” folder.

To streamline the process from a proposal file to a good copy file, updates of the status of components are shared on Slack. Each update includes links to Figma files when available, the components that are In Review, In Progress and Up Next. This is a quick way for people to be notified of changes and voice any concerns or comments directly in Figma using the comments feature.

Typical Slack Update Message

Confluence, the Information Central

The new tool introduced in the process above is Confluence. This is a wiki tool that is used by not only designers, but engineers as well. So having design guidelines on there will make it easier for engineers to search for design-related information. Confluence is also used by the team for progress tracking summaries. The tracking doc provides high level progress information on all DS components so other designers are able to efficiently find information about a component. There are many other types of documentation on Confluence, such as Audits and Meeting Note. It’s going to take days to walk through how each type of documentation plays a role in the collaboration of remote work. But in summary, the DS’s ecosystem of tools aims to provide a comprehensive information central to unify designs of the product.

More Figma Magic

They’ve got code for designs so engineers won’t have to hound the designers for specific hex color codes. Direct commenting also helps raise concerns and addressing those concerns about certain designs.

Engineers have access to CSS, Android, and iOS code right here on Figma

Designer with a comp sci degree

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store