The world of emerging design tools is incredibly exciting. Promising new programs are being launched in rapid succession, but there is one in particular that has slowly become the best choice for bigger and mostly distributed design teams.

Figma has the potential to support the entire design process end to end. First sketches, feedback collection, collaboration, ready-to-test prototypes, and developer handoff are well within its capabilities. Figma also simplifies the work of product managers and design leads, as well as all other stakeholders.

So, what sets Figma apart from the competition? There are several key aspects, but all of them can be traced back to the fact that Figma is web-based. This raised a lot of eyebrows when the tool was first released, but ultimately, it paved the way for Figma’s flexibility and unique functionalities.

Figma features include design, prototyping, collaboration, design systems, and plugins

What Is Fundamental to a Smooth Product Design Process?

While it’s true that each team and project may have a different workflow, there are functions and phases that are essential components of product design and management. Figma covers each.

  1. Accessibility and collaboration. No matter the tools a team uses, there needs to be a way to work together, present projects, gather feedback, and keep stakeholders in the loop. All of these features are available in Figma.
  2. Flexibility to iterate and produce deliverables. Figma is flexible and can be used as a collaborative whiteboard for sketching initial ideas and iterating everything from wireframes to high-fidelity mockups.
  3. Ability to build prototypes and test. Designing a mobile app? Build and publish interactive prototypes and test them directly on smartphones–all from Figma.
  4. Establishing a single source of truth. Figma is an excellent way to define product design systems that reside completely online. It’s a single source of truth by default. No more wondering, “Is this the latest version?”
  5. Smooth handoff. Just share a link with developers, and they’ll have access to all the information needed to implement the design–redlines, measurements, and graphic assets ready to be exported.
  6. Versatility to be customized and improved. Figma’s plugin API allows teams to write their own plugins or tap into the broader user community and extend the tool with new functionalities.

1. Accessibility and Collaboration

Get the Team on Board

Let’s take a closer look at how Figma contributes to the six key areas covered above. New users may want to create a free Figma account, set up a team, and watch get started with Figma. Once a team is created, invite team members and relevant stakeholders to join.

Figma tutorial

There are three access levels available. It’s fairly self-explanatory, but usually, edit rights are given to the design team and view rights to everyone else. This includes developers and other stakeholders who need to be able to follow the design process and provide feedback.

Figma prototype

Similar sharing options are available at the team level (shown above), project level, and file level. If access levels aren’t specified, they propagate from team to project and from project to files.

Since Figma is available in the browser, it doesn’t matter how someone is invited or what system they are on. As long as the device and browser they use meet the minimum requirements, they can jump right in with a link, and the interface changes according to whether they have edit or view rights.

Embedding a Project File

Figma project files can be embedded in third-party software. For example, a shared Dropbox Paper document may be used to present the current state of a project.

To embed project files, set the file visibility to Anyone with the link – can view, copy the embed code, and embed the project file in any third-party software that supports

Figma version control

Feedback and Revisions

Another key functionality for the product design process is the ability to distribute designs, collect feedback, and manage revisions. Anyone with a Figma link can see the latest version and comment directly on the point they want to give feedback about.

Figma animation

To tag team members, use the @ character, and the system will present a list of names to choose from. Doing so notifies team members, and once feedback has been processed, discussions can be closed by clicking on Resolve.

Figma app

To keep teams aligned, there is a nice integration that can publish discussion from Figma files in a designated Slack channel.

Real Real-time Collaboration

One of the more intriguing functionalities of Figma is what they call multiplayer. It allows multiple team members to open and work on a design file at the same time. Everyone working on the file is visible on the top right of the page, and their avatars are named and clickable.

It can take some time to appreciate what this means in practical terms. While it’s unlikely that designers will use multiplayer to simultaneously work on the same part of a file, it’s incredibly comforting to not have to worry about file version conflict, especially for bigger distributed teams.

Multiplayer comes in handy when presenting remotely because it makes it possible for everyone connected to the file to follow the viewport of the presenter. It also allows teams to bypass additional programs and use Figma as an online whiteboard (though specific solutions, like Miro, may ultimately be better suited for the job).

To this end, it is advisable to create custom components to replicate specific assets as virtual post-it notes or diagram elements.

2. The Flexibility to Iterate and Produce Deliverables

Once team members have been invited and initial sketches are underway, Figma can be used to iterate. The main reason that Figma was created is interface design—with whiteboarding finished, teams may move to flow maps and wireframes. Again, it’s smart to build component libraries that can be reused for these tasks. The official templates collection provides inspiration and design arrangements to start from.

3. The Ability to Build Prototypes and Test

It is quite easy to create interactive prototypes with Figma. When a Figma file is open with editing rights, it is possible to switch between design and prototyping mode. Once in prototype mode, it is possible to click on an element to make it interactive, whether from the stage or the layers sidebar.

Figma archetype

With an element selected in Prototype mode, a small circle appears on the side. When dragged, blue lines appear, and it can be dropped on the screen or state to show the result of the interaction.

Figma design

Common transitions are available in Figma, making it much easier to create high-fidelity prototypes. In fact, the Figma team recently released a smart animate and drag trigger feature. The smart animate aspect interpolates the motion of similar elements, while drag trigger is a new type of interaction. Both drastically improve the quality of interactive prototypes.

User Testing

Again, a link is all that’s needed to distribute Figma prototypes, even for user testing. Clicking on the small play icon on the top right launches the prototype, and a new URL is generated. It’s possible to copy the URL or use the blue Share Prototype button. Once users open the link, they are presented with an interactive prototype and able to leave comments if desired.

Testing on Mobile

Designs for mobile devices are presented with a mockup of an actual device surrounding the prototype. If more realism is needed to test interaction, it’s best to download the Figma Mirror app for device-specific testing.

4. Establishing a Single Source of Truth

Version History

Wouldn’t it be great if project files were always current and constantly backed up? This functionality is included in Figma by default. Each file is saved automatically while working on it, and Figma creates a new entry in the version history after 30 minutes of inactivity. A log of all automatically saved versions is created, and each version can be restored if needed.

Figma design tool

Of course, automatic versioning isn’t the only option for saving work. It is possible to save a version manually or edit a specific version in the version history.

Figma how to prototype

Design Systems and Component Libraries

Another aspect where Figma shines is how it lets designers create, organize, and distribute component libraries. Any file can be published as a library, and every color, text style, effect, grid, or component is available to be used in other Figma files.

Figma prototype

When changes are made to any element in a library, edits can be published and propagated to files that use those elements. Designers working on these files can then decide to accept edits or not.

The ability to decide how to distribute libraries, combined with the option to toggle the visibility or invisibility of library elements, makes the whole experience smooth and powerful.

Components and libraries can be nested to create sophisticated design systems where everything is versioned and up to date for everyone involved. And all components can be annotated with comments.

5. Smooth Handoff

Developer Handoff

With Figma, designers and developers don’t need a separate tool, like Zeplin, to manage handoff. They can simply open files and switch to Code mode in the right sidebar, even with view-only access.

Figma UI design

When Code mode is active, selecting an element on the stage will reveal all relevant information needed for implementation, and all other information regarding component position in relation to other elements is visible. As with similar solutions, the generated code is not meant to be entirely copy-pasted, but it’s helpful to have such easy access.

Figma UI elements

6. The Versatility to Be Customized and Improved

Figma APIs and Custom Plugins

Figma’s API and plugin system make it easy for a wide range of design teams and disciplines to customize the program for their specific process needs. Figma’s flexibility gives users the ability to programmatically interact with the platform. A few examples:

Using Real Data

It’s immensely valuable to be able to use real data in mockups and prototypes, and Figma makes it possible by allowing content from external sources to be imported. By leveraging real content, it’s possible to stress-test design components, keep mockups current, and involve teams that are not design-related.

A plugin named Google Sheets Sync is a perfect example of what can be done. This plugin makes it simple to integrate Google Sheets as a source to populate and sync the content of components in Figma files.

Advanced Workflows

The ability to house a design system within a UI design program is only valuable if the system is consistently implemented in customer-facing screens. Thankfully, there are Figma APIs, plugins, and integrations that can help.

The Storybook addon syncs Figma files and shows Figma-design components in a panel alongside implemented components. Another interesting use case is the Figma to React Converter, a workflow enhancement that converts Figma components into code.

Prototyping with Figma: A Figma to React Converter
Using the Figma to React Converter to update the style on a sortable list.

Figma’s Features Are Ideal for the Entire Design Process

There’s no single design program that can handle the needs of every designer or design problem, and that’s a good thing. Competition among design tools is advantageous to designers. It ensures that the companies that make our tools listen to what we need and provide us with up-to-date features fit for the jobs we do.

That said, Figma is an advanced yet intuitive tool that has proven itself more than capable of tackling the entire digital design process. Individual designers and teams alike can benefit from its unique collaboration and iteration features, and where the program falls short, a huge selection of plugins fills the void.

• • •

Further reading on the Toptal Design Blog:


A brand refresh is no small task. Especially when you’re a company that’s rooted in design—there’s an added pressure to get it right. For us to get it right, collaboration was a major theme. In fact, collaboration was the colorful thread that tied the whole process together. From the pushing-the-envelope brainstorms that involved our cross-functional teams, to the methodology behind the new illustrations, to the way we used Figma itself to bring our ideas to life.

Here’s how we landed on Figma’s new look and feel.

Evolving Figma’s brand language

I joined Figma about a year ago with the goal to evolve the brand. Of course, I was familiar with Figma, but as I started dissecting the brand language under this lens, I realized there was a lot of great work that already existed. We didn’t need to start from scratch, we just needed to give Figma a longer runway than it currently had. The foundational brand language already had strong pillars conceptually and value-wise, but when they were established, Figma was a new and smaller company. We needed an expansive brand language that would match how much the company has grown. For example, we have a blog now. If a designer is working on a visual for the blog, what rules should the image follow? We took the limited brand guide that existed and added new pages and chapters.

For that reason, what you see in the refresh won’t feel like it’s out of left field. It’ll look and feel like it’s still orbiting the same sun because we took inspiration from what already existed and gave it new wings. We’re taking those original ideas and hitting different angles and points and dialing up certain things. Like the shapes, for example. They’ve always been a part of Figma’s brand, but with the refresh, we found new places they could live and new ways they could be used that still made sense.

Establishing Figma’s personality

Before we designed anything, we started with a lot of research to nail down our strategy. In this process, it helped to think of Figma the brand as a living entity to better bring it to life in our minds. If Figma were a person, how does it walk and talk, and breathe and live? It might wear different clothes every day, but it still has a distinct style. Over the course of weeks, we put together a list of four guidepost personality words, but we included a few detail descriptors to clarify what we mean when we say that Figma is bold, for example.

  • Curious — Clever, playful, imaginative. This is your friend with the far-out ideas. They always want to be learning more and considering the things that might not be obvious.
  • Vibrant — Dynamic, confident, alive. Figma loves nerding out on certain topics and is proud of it.
  • Honest — Inclusive, empathetic, approachable. We’re never afraid to admit that we don’t know everything, but together we can figure it out.
  • Bold — Powerful, unexpected, non-conforming. We don’t live in the shoulds, we do what is right and true to us.

We needed a brand that could flex between being reserved and also playful. One that can go from consumers to enterprise, and we felt the words above got us there.

Shapes that show off the process

Some people might think we just made a bunch of fun new shapes, but there’s a clear methodology behind how they interact or collaborate with each other. We like to think about the shapes as people. People talking, working together, sometimes arguing, or just existing. The illustrations show that collaboration. Depending on how you position them, lots of harmonious compositions can be created. Of course, just like people, some shapes work well with others, while others do not.

There are different levels of illustration using the shapes depending on what the moment calls for. If it’s a place where someone is learning and needs absolute clarity, there are no abstract shapes. We include only the illustrations that are simple and straight-forward.

We want design to be more accessible to people, so a lot of our shapes are very simple. They might come together to form something complicated, but they distill down into basic shapes. In the illustrations, we sometimes show that process — how the shape is built.

Shapes That Show the Process

We also wanted the illustrations to feel like they’re still in process. In design, there can be a tendency to share only when it’s complete and perfect. But we wanted to highlight the work that goes into making — it’s often messy, imperfect, changing all the time just like people are. We felt that this realness, this aliveness helped dial up Figma’s vibrancy. You’ll see in the illustrations that at least one element is being manipulated or edited. Nothing feels quite like it’s perfect or complete. We wanted to encourage people to highlight their mess and share how they create. Maybe that way, someone else can learn from your process.

A typography with a few quirks

In the search for a new brand typeface, a designer on our team came across one called Whyte from Swiss foundry Dinamo. At first glance, Whyte looks pretty normal, and then you look closer and you start to notice some oddities. Whyte actually comes in two different versions—standard and inktrap. We fell in love with the inktrap version because it references ink traps in design history. Historically, when people were using metal plates to manually print, ink traps were cut in to create a place for the ink to pool. At smaller sizes, it’s difficult to see, but when you blow the letters up, you can clearly see the notches. We loved it because that characteristic adds an illustrative element to the type itself and we actually wanted to highlight this part of the type’s design that is usually invisible. Whyte spoke to what we wanted to achieve — a seamless flex between nonconforming and reserved.

Type with Quirk

Using Figma to refresh Figma

We worked exclusively in Figma for the refresh, which was a stretch to our creative muscles since we grew up doing this type of work in Photoshop and Illustrator. We had to come up with new ways to do things. But because we were already thinking creatively, it led us to some celebratory moments where we took an idea even further because of something Figma allowed us to do. Collaboration was a huge part of that. This wasn’t a project where we could or should divide and conquer. We needed to work together, and often, that meant simultaneously. That’s something we could only do in Figma. Whether it was through the process itself, or the illustrations we were creating, we wanted to find ways to demonstrate Figma’s power. For that reason, we hope that the refresh is a testament to what Figma can do.

Figma Refresh Figma

See the refresh in action. Check out the all-new homepage, explore the typeface and updated color palette throughout the entire site, and see the redesigned social media graphics for Facebook, Twitter, and Instagram.

Figma Homepage 02

About Tori

I’m a designer, creative director, and writer, with a BFA in graphic design from RISD. I’m originally from Florida, did a 10-year-stint in the northeast, and these days I’m on the West Coast. I live in San Francisco, don’t tweet about design, and try to love on people as much and best as I can.

I fight for and believe in the equality of all people, so I started Women of Graphic Design in 2013 in hopes of correcting some of design’s gender bias. It is still the project I am most proud of and passionate about. I’ve written about it and listened to others’ experiences, and am always open to collaboration.