How a Powerful Tool Changed the Game for Collaborative Design

The design process is made up of many moving parts. Beyond crafting interfaces, designers must also collaborate with team members and stakeholders, build systems, manage feedback, and consistently iterate to keep the process running smoothly. For years, an all-in-one solution for collaborative design was hard to come by. As a result, these tasks were accomplished through a combination of feature-focused products and design software not tailored to the web. Sure, it worked, but the shortcomings of this approach were numerous. 

This all changed, however, when Figma landed on the scene and shook up the design industry in a major way. Given its ever-increasing popularity (adoption has risen to 66% of designers according to a 2020 survey), you’ve probably heard of Figma. If not, your design team undoubtedly has. But what factors have caused it to skyrocket from once unknown to industry-standard status? I’m glad you asked.

Collaborative Design Tools are Now Essential

Want to know a guaranteed way to make a designer cringe? Ask them to recall the days of yore when design collaboration required passing around a single Photoshop file. It was a tedious process that went something like this:

1. First, design tasks are checked off using software designed for editing photos, not laying out interfaces
2. Next, the file is passed around as needed via email or a shared folder (while keeping your fingers crossed that important work is overwritten with the latter approach)
3. Finally, after jumping through a few hoops to make sure all of the correct layouts are exported, the designs are uploaded to something like Marvel, InVision, or RedPen to collect feedback
4. But wait! There’s more. The end of each round of feedback signals the start of a new version of the design file for revisions (see: final-ayana-FINALv3.psd)

Design is a visual medium and, when creating interfaces, the path to meaningful solutions is carved through collaboration. Thankfully, Figma has addressed the previously mentioned conundrum through a number of built-in features.

Multiplayer Mode

Figma’s defining feature, Multiplayer Mode, allows for real-time collaboration in a single design file. This means designers, their fellow team members, and even client stakeholders can hop in and out of a file whenever the need arises. Not only does this feature promote collaboration, it also removes the constraints of only one person being able to access a file at a time. As you’d expect, this means there’s a lot less wasted time waiting for someone to finish using a file.

Sharing + Observation Mode

Historically, finding the best method for presenting design work has been a mixed bag. Pairing a slide deck with a screencast walkthrough works but both are time-consuming to create. Using third-party software like Marvel or InVision lacks efficiency given the need for repeated exporting and uploading to keep things up-to-date (more on this in a bit). Face-to-face meetings come with the obvious constraint of having to be in the same physical space. But Figma offers features catered to streamlining presentation: easy sharing options and Observation Mode. 

For starters, sharing and viewing files is a breeze as they can be accessed by unlimited viewers without the need for a fancy login or paid subscription. And once collaborators have joined your file, Observation Mode, another unique Figma feature that is similar to screen-sharing without the Zoom call, keeps everyone in sync. No more “Can you see my screen?” or “If you flip with me to Slide 87…” By clicking an avatar that appears in the top toolbar, you can easily shadow collaborators’ every move as they move freely around the file. 

Whether presenting work for client review or hopping into a quick critique session with teammates, you’re covered. In many ways, it feels ahead of the curve in a world where working from anywhere and remote collaboration has become the norm.

Keeping Feedback Where the Action Happens

Whether internal from other team members or external from stakeholders, effectively facilitating feedback is necessary on the path to launch.

The BF Era (Before Figma, also known as the dark ages), was earmarked by sifting through email inboxes, Basecamp threads, meeting notes, or an undesirable combination of the three to locate and collate design feedback. It was a tedious process with less than ideal outcomes as comments could be easily lost or overlooked. Seeing the need, the introduction of third-party applications like InVision and Marvel arose as viable solutions. Even still, they weren’t perfect. The degrees of separation between where design happened and where feedback was collected meant communications often fell out of sync.

Figma, on the other hand, tightens feedback loops by keeping correspondence right where the action happens. A dedicated Comment Mode means Figma users can easily review, respond to, and resolve feedback without ever leaving the interface.

Building a Systems-Focused Design Foundation

A systems-focused design foundation helps the process run smoothly, removes the guesswork, and provides insurance against the potential “designer-got-hit-by-a-bus” problem. Since design knowledge is shared, your designer going missing doesn’t mean the whole project comes to a screeching halt.

This recognition has come to inform the defining features of many modern interface design tools. As such, Figma brings a bevy of features that support building a systematic design foundation.

Styles

Starting with the basics, Figma allows for the creation of Styles for typography, color, grids systems, and effects (like shadows and blurs) that can be applied across your entire project. Admittedly, this feature isn’t unique to Figma and has become a standard for most design tools on the market. This wasn’t always the case, however, and the absence of these features once made design and revision phases a tedious process.

For example, let’s say after a round of client feedback, a change in direction results in every instance of blue needing to be updated to green. During the Photoshop days of interface design, achieving this would require locating and individually revising each instance of said color across multiple artboards. This was a total time-sink and the threat of having to make similarly time-consuming updates was imminent with each review.

But when using Styles in Figma, a single update to the overall style is all that’s required to update every instance across the entire project. For designers, this means less busy work and more time freed up to spend on the tasks that truly move the project forward. 

Components

Components are reusable pieces of your interface design puzzle. The idea here is that you make them once and then reuse them as needed across your project. The beauty is that they can be as simple or complex as needed to suit your design needs. Whether simple — things like iconography, form fields, buttons, etc., or complex — entire page templates for example, with these pieces defined, you can build more quickly. And similar to Styles, changes to Components are immediately pushed out to every instance.

Libraries

Sharing is caring, and Figma allows you to do just that through the creation of Libraries. Thanks to Figma’s cloud-based nature, these collections of Styles and Components can be published and shared across project files, teams, and even entire organizations.

As teams scale and projects grow more robust in size and complexity, Libraries ensure everyone stays on the same page and speaks the same language. No more having to personally update collaborators on the latest changes via email, Slack, or carrier pigeon. Instead, updates and additions to the Library contents are immediately disseminated to even the farthest reaches with just a few clicks.

Providing a Safe Space for Iteration

Being able to freely iterate during design is vital, but things get tricky in a collaborative work environment without the right tools and processes. How can one ensure that project and team growth doesn’t lead to important work being lost in the shuffle?

Versioning

Figma’s Version History makes it easy to recount the evolution of your project. Thanks to built-in autosave functionality, you can scroll a virtual timeline of previous versions of every project. In the past, it was common practice to save a new version of your project file as a new starting point for iteration at major milestones. Think completed wireframes or rounds of feedback — v2, v3, final-v20, etc. With versioning, this need is eliminated as the autosaved snapshots can be restored, duplicated, and even shared. Versions can also be named and described, serving as an excellent means of keeping collaborators up-to-date about the history of the project, what changes have been made, and why.

While the Version History timeline is definitely a blessing, an aspect one might consider a curse is the sheer number of versions that are made available. Since a new version is added after every 30 minutes of inactivity, the list grows long — especially for projects that have been in the works for a while. Having the ability to name and describe versions helps, but if you aren’t in the habit of doing this regularly, locating a specific version is a chore.

Branching

Figma takes many cues from common development practices, and branching follows that trend. Much like a developer setting up a private environment for writing and testing code before it is shared with others, branching gives designers a safe space to iterate without impacting existing work.

Let’s say your team is working on a complete overhaul of its design system. The last thing you’d want is confusion over what exists, what’s in flux, and what’s meant for the recycling bin as you experiment with new typography, color palettes, and component styles. With branching, you can create an instance of existing designs as a starting point for iteration. While you work, the main design file remains the single source of truth since these changes are only merged once they’ve been reviewed and approved. This type of workflow is also great for teams at large organizations where work is more distributed.

Design Efficiency For More Productive Workflows

Figma also includes a number of additional features catered to streamlining the design process. Although they may seem minor on their own, it’s the small improvements in design efficiency that compound to create the most productive workflows.

Auto Layout

It’s hard to recall the time when mobile-responsive designs weren’t even a consideration, much less a requirement. However, with the advent of smartphones and a more connected world, the need for smarter tools to aid with the responsive design process has become more prevalent. Matching the pace of innovation in development practices, these updated tools help bridge the design-development gap by taking on a responsive-focused lens.

One example is Figma’s Auto Layout feature, which is used to easily adjust spacing within and around design elements. Imagine having to resize all the buttons in a project. The old way would’ve required manually resizing the container and realigning the label for every instance. But with Auto Layout, designers can now “design responsively” and do this with just a few clicks. And when applied to Components, all you have to do is make the change once and watch it cascade like magic across your entire project.

Plugins

By tapping into the genius of its community, Figma is able to provide a virtual marketplace of free plugins to address its users’ most pressing needs. Design efficiency with no price tag? I’ll take two, please! 

Think of plugins as cheat codes for repetitive, time-consuming, or otherwise difficult-to-execute tasks. Chances are if you can think of a need, a plugin has already been created in response. From importing stock imagery and placeholder copy, to checking color accessibility, to easily creating flows. And since anyone and everyone can develop and share plugins of their own, new ones are constantly being added.

Figma represents the future. With its smart features for helping designers design and collaborate, focus on systems, and manage feedback with ease, Figma stands poised to lead the design tools industry for years to come.