2020, Year of Remote Work
Thanks to COVID-19, 2020 is the year that forced many companies to adopt a remote work model. There are many tools, such as Slack and Zoom, to enable most teams to work together without seeing each other in real life.
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)
The mobile DS team really tries to make use of many features that Figma has to offer. Master components are used to make sure that if there are updates to the master components, the instances are updated automatically. It also puts restrictions on design patterns that can be used by other designers to ensure a cohesive look and feel of the product. Auto layout is used, where appropriate, to lessen repetitive work.
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.
Confluence, the Information Central
In addition to creating the components in Figma, component guideline drafts are also created in the proposal files. Illustrations and reference images in the guidelines are then added to an Illustration Figma file. Then, the guidelines are translated into Confluence, where many other types of documentation are stored. A screenshot of the Confluence page is added as the final guidelines into the “good copy” Figma files alongside the actual components.
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
On an endnote — as an added bonus for cross-functional team collaboration, Figma simplifies the design-engineer handoff process.
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.