Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration. For those skeptical of such claims, we’ll explain how Figma simplifies the design process and is more effective than other programs at helping designers and teams work together efficiently.

Let’s take a closer look.

Interface design in Figma

Figma has a familiar interface that makes it easy to adopt.

Figma Works on Any Platform

Figma works on any operating system that runs a web browser. Macs, Windows PCs, Linux machines, and even Chromebooks can be used with Figma. It is the only design tool of its type that does this, and in shops that use hardware running different operating systems, everyone can still share, open, and edit Figma files.

In many organizations, designers use Macs and developers use Windows PCs. Figma helps bring these groups together. Figma’s universal nature also prevents the annoyance of PNG-pong (where updated images are bounced back and forth between design team disciplines). In Figma, there is no need for a mediating mechanism to make design work available to everyone.

Collaboration in Figma Is Simple and Familiar

Because Figma is browser-based, teams can collaborate as they would in Google Docs. People viewing and editing a file are shown in the top of the app as circular avatars. Each person also has a named cursor, so tracking who is doing what is easy. Clicking on someone else’s avatar zooms to what they are viewing at that time.

Figma design collaboration tools

While collaborating in Figma, you can click anyone's avatar to see their view.

Real-time file collaboration helps mitigate “design drifting”—defined as either misinterpreting or straying from an agreed-upon design. Design drifting usually happens when an idea is conceived and quickly implemented while a project is in progress. Unfortunately, this often leads to deviating from the established design, causing friction and re-work.

Using Figma, a design lead can check in to see what the team is designing in real time by simply opening a shared file. If a designer somehow misinterprets the brief or user story, this feature allows the design lead to intervene, correct course, and save countless hours that would have otherwise been wasted. (By comparison, teams using Sketch have no immediate way of telling if designers are going astray.)

Side note: Some designers don’t like to be “spied on” when they’re working, so it’s up to the design lead to explain the benefits. In general, most designers quickly see the value in such a feature and easily adapt to working in a shared environment.

Figma Uses Slack for Team Communication

Figma uses Slack as its communication channel. When a Figma channel is created in Slack, any comments or design edits made in Figma are “slacked” to the team. This functionality is crucial when designing live because changes to a Figma file will update every other instance where the file is embedded (a potential headache for developers). Changes to a mockup, warranted or not, are immediately vetted, and the feedback channel is live.

Figma design team communication in Slack

Figma projects can use Slack channels for threaded comments in the file.

Figma Sharing Is Uncomplicated and Flexible

Figma also allows permissions-based sharing of any file, page, or frame (called an artboard in other design tools). When a share link is created to a frame on a page, the person clicking on that link will open a browser version of Figma, and a zoomed-in view of the frame is loaded.

App design tool file sharing

Figma shares projects, files, pages, and frames with anyone that has permission.

This form of selective sharing, from file down to frame, lets designers, product owners, and developers share exactly what is needed in bug tracking tools and community software like Confluence or SharePoint.

Embedded Figma Files Provide Real-time Updating

Figma also shares live embed code snippets to paste an iFrame in third-party tools. For example, if Confluence is used to display embedded mockup files, those files are not “updated” by saving a Figma file—those embedded files ARE the Figma file.

If a change is made to the mockup by anyone in Figma, that change can be seen live in the embedded Confluence mockup. (You can read more about Figma and Confluence integration here.)

The effect of this feature on the UX process is illustrated in the following diagram:

Figma improving UX design tools

Figma eliminates the need for dedicated apps for prototyping and commenting.

Before Figma, several other tools were used to facilitate the exchange of design mockups and updates. The iteration cycle was a series of back and forth file updates, so teams could review and implement the current design.

After Figma, third-party tools are no longer necessary (but could be used if desired). Since Figma handles the functionality of the third-party tools described previously, there is only one step in the process—move from sketches to Figma and all groups have the latest mockups. There is no “handoff” in the strictest sense of the word.

Figma Is Great for Design Review Feedback

Figma supports in-app commenting in both design and prototyping modes, and the comment thread is tracked in Slack and/or email. There’s no need to publish PNG files or perform constant updates to get feedback from a team using a third-party tool like InVision or Marvel.

Web UI design tools and review feedback

Designers can make comments during reviews by opening the same Figma file.

During design reviews, team designers can discuss their work on a large screen, record comments, and fix issues—all in Figma. This form of live feedback is not possible with Sketch, which requires uploading to a cloud service to get team input.

Developer Handoff Is Facilitated Using Figma

Figma displays code snippets on any selected frame or object in CSS, iOS, or Android formats for developers to use when reviewing a design file. The design components can be inspected by any developer in any file they can view. There is no need to use a third-party tool to get the information. Even so, Figma has full integration with Zeplin if teams want to do more than simple measurement and CSS display.

Figma prototype review and developer handoff

Developers can access code from the design file or by running a Figma prototype.

Figma Project Files Reside in One Place—Online

Since Figma is an online app, it handles file organization by displaying projects and their files in a dedicated view. Figma also supports multiple pages per file, like Sketch, so Agile teams can organize their projects logically:

  • Create a project for the feature theme.
  • Create a file for an epic or large feature.
  • Create pages in that file for each user story.

This is just one method of organizing files that could be made more or less granular depending on what the process demands.

Online Sketch alternative for Windows

Project files can be organized easily in a dedicated view.

Figma APIs Provide Third-party Tool Integration

Figma now has developer APIs to allow true integration with any browser-based app. Companies are using this to integrate real-time displays of design files in their apps. For example, Uber has large screens displaying design files “live on air” around their company. Designs are shared, and feedback is welcome from anyone in the company.

Atlassian’s JIRA software has implemented a Figma add-on so product owners, developers, and quality engineers are always viewing the latest version of any mockup from the designers.

Additionally, Figma’s API promises to fulfill customer requests for third-party plugins and feature enhancements that Sketch already provides.

File Versioning Is Automatic or On-demand

Any uncertainty surrounding live file updating is further mitigated by Figma’s built-in versioning system. At any time, a designer can create a named version and description of a Figma file; this can be done immediately after agreed changes are made to a design.

Web interface design automatic file versioning

File versions are saved manually to create design branches.

The live file in the shared environment will not be affected until changes are deliberately committed to the original version. It’s also possible to restore any automatically saved versions to create a duplicate or overwrite the original.

Prototyping in Figma Is Straightforward and Intuitive

While Sketch recently added artboard to artboard prototyping, Figma has gone further by providing transitions between frames. Figma’s simple prototyping feature eliminates the need for another tool that does slideshow style prototyping, such as InVision or Marvel. When all that is needed is a simple presentation with transitions, there’s no need to export to review tools.

Intuitive web design prototyping

Figma prototyping works like other tools using connecting arrows between frames.

Figma prototypes can be distributed just like Figma design files; anyone with link permission can view and comment on a prototype, and again, that feedback is captured in the tool’s comment panel and recorded in Slack. Developers can see the design workflow, leave direct @messages for designers, and get measurements and CSS attributes from inside the prototype.

Figma’s Team Libraries Are Ideal for Design Systems

Design systems have become a necessity for many companies, and there is a need for components (symbols in Sketch and Illustrator) that are reusable, scalable, and “tokenized” for use in the pattern libraries available to UX designers and front-end developers.

Figma design system library

Figma's team library modeless dialog gives unfettered access to components and styles.

The often used phrase “single source of truth” does fit here—once a Figma team library is created, anyone with access to a project can use instances of the components in their designs and be certain they are working with the latest versions.

Design system component library

Organizing components is simple and flexible using files and frames.

Figma’s approach to component libraries is simple and easy to manage. Designers can create files that are full of components or use on-page components to organize a pattern library. Each frame in a Figma page becomes the organizational section in the team library (there is no need to create hierarchies\like\this).

One way to organize libraries is to have a project dedicated solely to components. Files within that project can be organized as needed, and the pages within those files can be arranged accordingly.

Figma Is Built to Enhance Design Teamwork

Using Figma for any length of time will demonstrate the benefits of this live collaboration tool. It keeps teams on task and encourages full disclosure, essential when building a design system for a variety of disciplines. Figma is easy for anyone to use on any platform, and lets teams share their work and libraries quickly.

Design experts that use Figma after making the switch from Sketch (Sketch files can be imported with parity into Figma) are not disappointed:

”…it completely transforms the way in which you can work with your colleagues and clients”Streamline Collaborative Design with Figma

“Figma united the best of everything in the world of UI- design tools in the last few years”Why Your Design Team Should Consider Switching to Figma

“For the last year, I’ve been using Figma for my UI/UX design process and it has been saving me hours of work. It truly transformed my design workflow”How to Streamline your UI/UX Workflow with Figma

“My time spent in Figma is usually the most enjoyable and most productive part of my day”Figma Is Transforming My Entire Workflow, and It’s Awesome!

• • •

Further reading:

Understanding the Basics

What is the meaning of collaboration tools?

In design, collaboration tools help designers from different disciplines (along with developers) work together to create digital products.

About the author

Ben Kopf, United States
member since March 15, 2018
Ben has 25 years of experience helping people interact with software in user experience (UXD), interaction (IxD), user research (UXR), and user interface (UID) design. He is personable, team-oriented, a process improver, passionate design tool explorer, and design system fanatic. He is a champion for the people confused by the web and the software they have to use every day. Ben is a forward thinker, thinking about what can be, not what is. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in August 2018

Comments

Yurii Chaban
Great review, Ben! Thanks. I am one step closer to switching form Sketch to Figma :) However, it would be fair to know some of it's cons comparing to Sketch. Are there any that you could highlight? :)
thenonhacker
We <3 Figma! We've evaluated several tools and tested the workflows. From creating wireframes, sharing wireframes, creating design documentation (via comments), presentation mode, prototyping, and receiving comments. Sketch is great, without it, there's no UX Tooling Revolution that's happening today. However, it does have areas of improvement. Sketch limitations for us include, it's only available for Mac users. Another limitation is the dependency on InVision to share the files and comment on them to document your designs. However, this breaks when you upload the newer versions of your prototypes, and that's a big no-no for us, as embedded design documentation has helped us very well in the past. InVision is trying to address these problems via InVision Studio, and that means it will compete directly with Sketch (traitors! lol). And I'm assuming that Sketch is creating an alternative solution that solves team collab problems? IN SHORT: Everyone is wanting to become like Figma.
Ben Kopf
Hi Yurii, and thanks for the kudo. FYI, I just submitted another Toptal blog post that does a task-based comparison of Sketch v Figma v Axure, so stay tuned. For now I would say that there are some things that Sketch does that Figma doesn't from a feature perspective - plugin's for example, which provide a powerful mechanism for third-party tool integration. However Figma now has a read-only API that will have write capabilities in the near future, so that somewhat negates that Sketch advantage. But Sketch has a ton of already available plugins and files people can access now. Another Sketch advantage is you don't have to be online to use it, but then you sacrifice the cross-platform support. I find Figma files loads a bit slower because of that as well, but it depends on connection strength, and in most offices that is not an issue. Companies are also more likely to use Sketch for security reasons because Figma is not run locally (within a companies network). But Figma is well aware of this and I believe is creating an enterprise version that runs on internal servers. And of course there are also nuances to each of the products that one person might like over the other, for example, how the object interaction model works, or how grid layouts work, or styles but for the most part they reach parity on features. I'll add that aside from the Material Design plugin that Google now provides for Sketch, Figma is more flexible when it comes to assigning object props and styles (https://help.figma.com/properties-panel/styles) because it gives you more granular control when creating design system components. But again some folks like the way Sketch does it with overrides in the props panel, others like Figma's in-place overrides. I hope this balances the scales a bit; the upcoming task-based review is an objective assessment and looks at the tools "out of the box" with no third-party add-ons, so have a read when it comes out in a couple months. Cheers, Ben
Olha Krutii
Yes, the world does not stand still. There are more and more cool programs and applications that accelerate and facilitate the work of the designer. And figma is one of them. The developers were not too lazy and added many different "buns" for users. Thank you very much for this informative description. It was interesting, in the case, briefly.
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Ben Kopf
Designer
Ben has 25 years of experience helping people interact with software in user experience (UXD), interaction (IxD), user research (UXR), and user interface (UID) design. He is personable, team-oriented, a process improver, passionate design tool explorer, and design system fanatic. He is a champion for the people confused by the web and the software they have to use every day. Ben is a forward thinker, thinking about what can be, not what is.