www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

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.

Figma start here
Figma’s interface

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.

  1. One is through creating and managing teams whose members all have access to joint projects (a great approach for studios).
  2. 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:

new team button in Figma

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

Name your 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.

Choose your team plan

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:

find 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.

invite members

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).

permissions

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:

invite email

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.

new project

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).

set permissions

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.

newly created project

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:

Changing Access Levels

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

Admin Dashboard link

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

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.

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:

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.

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:

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.

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.

To share a document hit the blue Share button

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

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.

choose whether you want people to be able to edit or just view the document

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.

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:

click the  Public embed link at the bottom

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

embed a Figma document in a page

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

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.

For communication thats not in real time the comments system comes into play

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.

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:

Show Version History

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

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

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.

Dribbble

Figma has a smooth flow to export a frame and push it directly up to 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.

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.

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.

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: