Collaborative Interface Design With Figma

Figma is something a little bit special right now. At first glance it’s just a web based design application, but while there are other programs with similarities, what makes this one different is its capacity to cater to the specific needs of interface designers.

It’s clear the people behind Figma understand that most interface design projects are team-based or collaborative in some way. They’re obviously also aware of the pain points teams often have to work through when handling collaboration and synchronization, with studios typically needing to cobble together solutions comprising multiple design, third party storage, and version control tools.

Figma eliminates the need for this disjointed approach by providing:

Advanced live collaboration capabilities that automatically keep all team members synchronized.
Combined design, prototyping and developer hand-off in a single application so more can be done in one place.
Access on all desktop operating systems, i.e Mac, Windows, Linux and ChromeOS.

Despite the fact Figma’s “on canvas” tools are great, and probably enough to convince a lot of designers to use the software, it’s the collaboration-focused approach that is leading many studios to put aside other applications and consolidate into using Figma instead.

“We now have a dynamic, collaborative environment that enables us to brainstorm together, bounce ideas off one another and ultimately be more creative.” — Taylor Madaffari, Copywriter, Aisle Rocket Studios

In this article you’ll see for yourself why teams are taking such an interest in Figma, as we step you through how you can take advantage of its full gamut of collaborative tools.

If you don’t yet have a Figma account you can get one free and follow along with everything we cover.

We’re going to be covering quite a lot in this post, so you might want to grab a coffee first:

How Collaboration in Figma is Done
Create and Manage Teams
Control Team Member Access Levels
Team-Shared Components and Styles
Sharing and Embedding
Comments
Version History
Integrating With Extra Tools

Work Together, Same Document, Real Time

One of Figma’s most outstanding collaborative features is the ability to have multiple team members work together simultaneously, on the same document, as it updates in real time.

This is made possible by the fact Figma is a web-based application. In the past web-based design applications were perhaps not taken entirely seriously, but in the case of Figma its online nature is a core part of what makes it so appealing.

For every person with a particular Figma file open, the other collaborators will see a little mouse pointer floating around the canvas with that person’s name attached to it, pointing where they point. Any change they make to the document will be relayed to all the other members, who will see those changes appear in real time. Everything that changes in a Figma file is available to everybody else, instantly.

This centralized, real time updating of collaborative files means:

No more sending files back and forth between team members.
No more converting from one format into another to deal with different software for different stages of the project.
No more uploading files to third party storage so other team members can access changes.
No more getting out of sync between changes one member has in their files and those another member has in theirs.
You can work through ideas and suggestions together, as you are discussing them.
Similarly, you can implement client feedback instantly as you are showing them a design.

So how do you go about allowing people to collaborate in this way? Let’s find out.

How Collaboration in Figma is Done

In Figma there are two ways you can work collaboratively.

One is through creating and managing teams whose members all have access to joint projects (a great approach for studios).
The other is through sharing documents, which can be excellent for more free-form community-based cooperation.

We’ll start by looking at teams, who are the predominant focus of Figma collaboration.

Create and Manage Teams

To get started working with teams in Figma you’ll first need to create a new team. Log into Figma and hit the New Team button at the bottom left corner of the interface:

In the page you’re subsequently taken to, enter a name for your new team:

Next, you’ll be taken to a page where you can choose between two team plan types. You can use the free tier, which allows a two person team and unlimited viewers to access up to three projects, or a paid account for more team members and projects as well as some extra features you can read about on the Figma pricing page.

Invite Team Members

At this point your team has been created and it’s ready for you to invite members.

In the Figma file browser area, look in the left sidebar to see the name of the team you just set up. Click it to go into the management window for that team:

At the bottom right of the interface you’ll see an area with the heading Team Members, and under that heading you’ll see an + Invite link. Click the link to start the invitation process.

In the popup that appears, enter the email address of the person you wish to invite. At this point you’ll also set the team member’s access level to either “admin”, “can edit” or "“can view” (we’ll go into what these permissions mean shortly).

Once invited, the person will receive either an alert within Figma or an email through which they can accept the invitation and join the team:

Create Team Projects

Once you have your team members invited you can start setting up projects the team can all access.

On the team management page, click the + New Project link you’ll see under your team name, on the left side in the team management area.

You’ll get a popup with a field into which you can add the name of your new project, and a dropdown list to set the project-level permissions for the team.

Note: on the free tier you can only choose the first permission option, “Everyone at <team> can edit” (these permissions will be explained a little later).

Now when you look at the list under “Team Projects” you should see your newly created project, ready for your team to start working on.

For more on team management visit: Figma help: Creating and managing your team

Control Team Member Access Levels

Each team member can have their access level individually set to one of four options:

Owner.
Admin.
Editor.
Viewer.

These access levels control:

Whether you can edit or only view files.
The level of team member you can invite to the project.
The level of team member for whom you can alter permissions.

A team member’s access level will apply to all of that team’s projects and files.

Who Can Change Files?

Every level except Viewers can make changes to files.

Owner and Admin Invitations and Permission Setting

Owners and Admins can authorize a team with Slack, invite team members as Admins, Editors or Viewers, and also change team member permissions.

Owners and Admins are functionally the same, but there can only be one person set with Owner status so it seems to be primarily about communicating who is in charge of a project. An Owner can transfer that status to another team member.

Editor and Viewer Invitations and Permission Setting

Editors can invite and change permissions for Editors and Viewers. Viewers can invite other viewers but can’t make any permission changes.

Changing Access Levels

You can change a team member’s access level at the bottom right corner of the team page, under Team Settings:

Or you can click on the gear icon Admin Dashboard link at the top right, near the Team Settings heading:

Here you have the option to downgrade members to “Viewer”:

Advanced Permissions for Pro Teams

If you are on a paid tier at Figma you can utilize “Advanced Permissions”, whereby individual projects can have access levels that override team members’ normal access levels. These are the extra options we mentioned earlier are available on paid tiers when you create a new project.

For example, if a project is set to “Everyone at <team> can view”, even team members who have Editor permission won’t be able to make changes in the project.

The default option, available on free tiers, is:

Everyone at <team> can edit: this is normal access functionality, allowing the permission levels of individuals to take precedence.

The advanced permission options are:

Everyone at <team> can view: team members can view but not change the project.
Invite only - let me choose who has access: the project is invisible unless a person is explicitly invited.

Read more about Figma permissions at: Figma help: Permissions

Team-Shared Components and Styles

Components in Figma are pre-made graphical objects that can be reused as required, such as cards, headings and buttons. Styles on the other hand are pre-configured collections of properties that can be applied to objects, such as text styling.

For example, this is a library full of drag & drop ready Material UI components:

I won’t go too much into the capabilities of components and styles now, as we’re focusing on collaboration tools, but if you’d like to learn more about each, visit:

Sharing Libraries

Libraries of components and styles can be shared across teams. On the team management page for your team, look under “Team Settings” at the top right and click the Enable Libraries link.

You’ll see a list of libraries potentially available to the team and you can toggle access on or off for each:

Tip to Prevent Accidental Component Changes

Note: if you have access to advanced permissions, as described earlier, you can use them to ensure nobody makes any accidental alterations to components that then get rolled out across the board. Just keep your master components in view-only projects, then your team members will be able to see and use the components but not modify them.

For more on team libraries visit: Figma blog: Team library 1.0

Sharing and Embedding

Collaboration in Figma is not just for teams alone. You can also use the sharing function to allow anyone to edit or view one of your documents, making it great for more loosely coordinated communities and people just looking to create and gift assets to other designers.

To share a document hit the blue Share button at the right end of the top toolbar.

In the popup that appears click the link that says Enable link access.

Once that is done, next to the line that reads Anyone with the link, choose whether you want people to be able to edit or just view the document. You can also remove link access here later if you need to.

Alternatively, on that same “Share” popup you can invite someone directly rather than enabling link access. Just as is the case with team members, everyone who gets edit access to a document through sharing can collaborate on it in real time.

Read more on sharing Figma documents here: Figma help: Sharing files and projects

Embedding

If you want to be able to display a Figma design from within another site, you can do this by embedding.

While still in the box that opens when you hit the Share button, click the <> Public embed link at the bottom to get copy and paste ready embed code:

Once this HTML is used to embed a Figma document in a page it will look something like this:

Embedded files update in real time, ensuring the latest version is always being shown off.

For more on Figma’s live embed read: Figma help: Figma live embed

Comments

Even though collaboration can happen in real time through Figma, that doesn’t mean it always has to. For communication that’s not in real time the comments system comes into play, so that any team member or client with view access can add feedback at any position on the design canvas.

When a comment is left, other team members will see an alert over the comment icon on the toolbar, and when that alert is clicked on a little speech bubble will appear on the page. In turn, when the bubble is clicked a text communication panel will open through which notes can be exchanged.

For more on comments in Figma read: Figma help: Comments

Version History

One of the third party services a collaborative team often needs to coordinate their workflow is some kind of version control system. With Figma this is built right in and it all happens automatically, with versions being saved whenever there’s a period of inactivity on a file for 30 minutes, i.e. when nobody is working on said file.

Version history goes back 30 days on the free tier, and is unlimited on paid tiers.

To see a file’s version history, open it up then press the v shaped link to the right of the file name on the top toolbar, and choose Show Version History:

A list of saved versions will appear in the right sidebar:

If you click any of these items the related version of the file will load onto the canvas, the item in the version history list will turn blue, and three dots will appear next to it. If you click these three dots you’ll get a menu through which you can rename, restore or duplicate that version.

a menu through which you can rename restore or duplicate that version

More on version history in Figma at Figma help: Version history

Integration With Extra Tools

Figma has you pretty much covered on everything you need to collaborate within the design space. But it also helps you to expand your collaboration options beyond the design process by integrating with a range of third party tools.

Slack

Slack integration is a particular focal point for Figma, with the ability to convert any existing Slack team into a Figma team. You can also have notifications sent via Slack when comments are left on Figma files.

More on Slack integration at: Figma help: Figma Slack

Dribbble

Figma has a smooth flow to export a frame and push it directly up to Dribbble.

More on Dribbble integration at: Figma help: Figma and Dribbble

Zeplin

Figma already has its own developer hand-off tools, but if you still need or want to use Zeplin anyway Figma provides integration to easily export frames into a Zeplin project.

More on Zeplin integration at: Figma help: Figma and Zeplin

Dropbox Paper

Figma’s integration with Dropbox isn’t for storage purposes, rather it’s to allow you to quickly embed designs into Dropbox Paper files. Paper is a collaborative document editing service. So your team can also collaborate on a document, while a Figma design embedded therein updates in real time as changes are made to it.

More on Dropbox Paper integration at: Figma help: Figma and Dropbox

Jira and Trello

To help with the project management side of things, Figma integrates with both Jira and Trello, allowing you to have live embeds of Figma files inside issues / cards.

More on Jira integration at: Figma help: Figma and Jira
More on Trello integration at: Figma help: Figma and Trello

Wrapping Up

As you can see, Figma provides an impressive array of features to help interface designers work together collaboratively and efficiently. Several of the common pain points of team based project go away with this centralized, web based approach.

And as impressive as the collaboration tools of Figma are, that’s still only a part of what makes it such an interesting and appealing application.

To learn more about why you should give Figma a run, check out some of our other tutorials and courses: