Home > User Experience > Putting Figma to the Test. How to make your virtual collaborations… | by argodesign | Jul, 2020

Putting Figma to the Test. How to make your virtual collaborations… | by argodesign | Jul, 2020

Putting Figma to the Test. How to make your virtual collaborations… | by argodesign | Jul, 2020

Workplace technology is clearly trending towards real-time, high-bandwidth collaboration. Digital product design is increasingly influenced by this shift with tools like Figma, whose web-based foundation allows users to build digital products together in synchronous workflow.

When our team at argo started a project for a major telecom client, we decided to test Figma’s potential by using it for as many aspects of the design process as we could. We did this partly out of curiosity, but we also saw promise in Figma’s collaborative nature to accommodate a remote teammate.

In our experience, Figma cleverly supported remote collaboration in almost every aspect of the design process — although we encountered roadblocks in building presentation decks.

Using its web-based foundation, Figma has its own file storage environment where users establish teams, set up projects, manage permissions and access files. Although this custom file environment was a departure from our experience navigating design files in Finder directories with synced Google Drive or Dropbox accounts, learning to use Figma’s system was quick and intuitive. The built-in hierarchy of Teams > Projects > Files resolved any confusion around file organization.

Figma makes it easy to create custom thumbnails for your files. To help new team members jump in and find the right file, we established a text and color-based wayfinding system. This was especially useful in a remote working environment where you can’t ask the person next to you for guidance.

Text and color-based wayfinding system using custom thumbnails

A minor drawback: because Figma’s file directory only supports Figma files, we had to keep our other various file types in a Google Drive directory. This was an easy workaround.

Few rituals are as sacrosanct to studio culture as gathering around an array of post-its for brainstorming and synthesis. Our distributed team needed Figma to simulate those collaborations virtually.

We started by creating virtual post-its out of components in which colors represented different archetypes, and unique text codes represented specific participants. Once we had our system set up, we each gathered notes on our personal boards. We then used video conference time to drag-and-drop individual notes into clusters of thematic observations.

Virtual research synthesis process

The process was successful, although it did lack some of the social energy of a live experience. Figma’s “Clean Up” feature produced a much more presentable artifact than your typical wall of post-it notes. And especially for this research synthesis, it was advantageous to have all of our design and research located in one place.

We used the same power of components to draft and illustrate journey maps. Figma allowed us to add some visual finesse to the published artifact, and gather feedback directly in the software using commenting.

User journey built in Figma using components

Figma’s in-app commenting was critical to our virtual collaboration. Our distributed team was able to suggest copy edits on screens throughout the process, and request and share feedback with minimal disruption to our workflow. Once we got into detailed design, the feature let us collect feedback from the client on specific screens, features, and interface elements. If the client had questions, we could answer them directly in the file without having to write a summary email or wait for another meeting. This feature was especially vital to our all-in-one experiment.

Where Figma’s capabilities fell short was in crafting our final presentation. This was a critical step in our design process, because after all the work that went into the design, the presentation deck was how we delivered our ideas for execution. For this task, while Figma has some interesting feature innovations, we found it ultimately limited.

A few of Figma’s feature innovations worked well for building presentations. Creating and swapping instances of a master was useful. Formatting presentations based on screen dimensions let us seamlessly switch between copy and detailed screen designs.

Editing master slides using component instances
Swapping slide styles using component instances
Presentation format based on screen dimensions

And the all-in-one aspect of the Figma toolset continued to be really impactful here: building presentations and designing screens in the same software made it easy to paste or drag our designs onto slides, saving the tedious step of exporting and importing each time.

We also appreciated the refreshing flexibility that Figma allowed for in structuring slides. Presentation tools like Keynote and Google Slides establish a singular and linear view of slides, while Figma gives you the ability to organize slides along x and y axes. This view helped expose which sections carried more weight, and which areas felt bloated.

Presentation slides organized along x and y axes

At the same time, because Figma is non-linear, it isn’t set up to do page numbering like standard presentation tools. We had to manually order frames and run a plugin, which ate precious time. It’s also easy to accidentally change the frame dimensions around a slide component, which is tedious to track and fix. These difficulties underscored how the rigidity and simplicity of a tool like Keynote enables you to build presentations faster.

Another challenge was the steep learning curve for non-designers. Figma’s similarity to other design software meant designers were quick to learn, but non-designers who were critical in assembling important presentations were not able to work in the tool as effectively. This placed strain on our team’s designers.

Finally, we missed several features that have become standard in other tools. It lacks a simple auto-underline spell check. There is no way to mark slides to skip, which meant we could not have a “present” version and “send to client” version in the same file. Also Figma doesn’t currently support .mov or .mp4 files, so we could not embed video.

Figma is very well suited for in-progress or informal design share-outs and prototype presentations. But overall, Figma was not designed as a tool for building traditional presentations and therefore lacks the focused feature set that makes presentation software efficient, especially when non-designers need to play a key role.

Riding on the coattails of ubiquitous computing, recent innovations in software are bringing geographically distant teams closer together in virtual space. Slack’s now dominant messaging environment has made digital communication more akin to casual office conversation than exchanging formal emails. Google Slides has enabled us to build presentations together concurrently instead of passing files back and forth. Figma’s collaborative multiplayer feature set and web-based foundation keeps designers on the same page — literally.

For argodesign, this paradigm shift has helped us establish one unified organization across three global studios. The creative process in design software has historically been a mostly private experience. Tools like Figma have propelled us towards an increasingly team-player mindset. For some, sharing a virtual workspace can feel like managers and teammates are perpetually peering over their shoulder, invading their personal creative space. Figma’s collaborative nature therefore requires more rigorous process definition upfront and establishment of trust within teams, which is beneficial in the long run.

Figma is likely just the most recent step of many more to come as our profession becomes increasingly virtual. Depending on your team, you might insist that in-person collaboration is critical to your design process and success… which is absolutely valid. Unfortunately, working together in an office isn’t an option for most of us right now, so if you’re considering trying out Figma to foster virtual collaboration and streamline your digital design process, now would be an excellent time.

Source link