Reimagining Comments on Figma
A redesign for the 2021 Kleiner Perkins Design Fellowship
Project Overview
Prompt: Redesign any feature of one of the companies participating in the Kleiner Perkins Fellowship program.
Solution: A reimagined, conversational comment module that promotes collaboration within Figma through added functions like comment titles, statuses, and emoji reactions. A more powerful comment panel that now makes it easy to quickly to identify, access, and act on comments.
Role: Solo Project—User Research, User Experience Design, Interaction and Visual Design, Prototyping
Timeline: 3.5 weeks
Tools: Beyond pen and paper, all designing and prototyping was accomplished in Figma :)
Introduction
Figma launched in 2015 with a bold idea: design should live on the Web. Five years, 150 employees, and hundreds of thousands of daily active users later, Figma is now used by everyone from independent designers to startups to global leaders like Spotify, Dropbox, and Uber.
Before exploring any problems that people encounter on the platform, I first wanted to understand how Figma became so successful and what drives its decisions.
Dissecting Figma’s DNA
If Kendrick has “royalty” and “loyalty” inside his DNA, Figma certainly has collaboration and accessibility inside its. In 2013, now-CEO Dylan Field and CTO Evan Wallace saw interface design as ripe for disruption. One company — Adobe — ruled the industry, and the duo saw its lack of innovation for collaboration as the perfect opportunity. “I think Adobe would have made greater strides towards collaboration if that was in their DNA,” Field told TechCrunch at the time.
So, they began crafting a product and company where collaboration was at the core. In an era where the digital design process was scattered asynchronously across multiple platforms, Figma brought the full design process together under one roof. Sharable, web-based files allowed for synchronous, multiplayer designing, on-canvas commenting, and shared design systems — three innovations that have made Figma incredibly powerful for design teams.
Figma stands out in its vision to make design accessible for everyone. This starts with anyone being able to start designing on the platform for free. Figma takes bold steps to actualize this vision through free access for students and educators, a team of friendly Design Advocates who demystify Figma’s powerful capabilities, and even a “Friends of Figma” Slack community where designers across the world collaborate and grow together.
At its core, Figma is built on collaboration and uses community to help unlock its vision for accessible design. But, all of that was about to be tested…
Collaboration During COVID
As the COVID-19 pandemic spread across the world this spring, designers and companies were forced to rapidly adapt to stay-at-home orders. Every team from small startups to Uber’s over 25,000 employees had to readjust to working from home — and quickly. For designers, this meant shifting often in-person activities, like critiques, to entirely virtual platforms like Figma.
Despite collaboration being fundamental to Figma’s DNA, this massive shift exposed weaknesses in Figma’s capacity for virtual collaboration. Fortunately, Figma’s nimble team was proactive in addressing these concerns. In late March, Sho Kuwamoto — Figma’s VP of Product — tweeted an open call for suggestions on how Figma can rise to the occasion:
Hundreds of people responded. One of the main things people wanted? Better collaboration abilities on Figma. This is where my user research journey began.
1) User Research
First, to gain feedback from designers, developers, and others who use Figma, I began unpacking the replies to Sho’s tweet above asking for product suggestions.
The Consensus: Designers Want More Out of Figma Comments
The Figma capabilities that people wanted most centered around collaboration and revealed several distinct pain points:
1. Comments are hard to keep track of and can get disorganized.
2. Cannot simultaneously view comments while designing; workarounds are unnatural.
3. Lack of functionalities like searching and assigning comments.
4. No ability to live chat within a file.
5. How comments pin to frames isn’t always consistent or clear.
After identifying some clear pain points that designers expressed on Twitter, I wanted to dig a little deeper. So, I went to the place where designers hang out when they’re not designing…Slack! 😆
Learning from Remote Design Communities
The CreateRemote and Friends of Figma communities are each home to thousands of designers and creatives from around the world. I intentionally chose to connect with designers in these spaces for their diverse community, broad geographic base, and focus on remote design. Since numerous pain points revolved around comments, I started by asking people how they and their teams utilize Figma comments and if they encounter any difficulties:
Many of these designers and creators who I talked with experienced a lot of the same struggles as those speaking up on Twitter. Problems like disorganization of comments, not seeing in-app notifications, and the inability to view comments while designing continued to surface.
In the process, I also stumbled across a message from a designer asking others if it’s possible to simultaneously design in Figma while viewing comments:
To me, this conversation further reinforced a clear disconnect between how people want to use Figma comments and how they exist in their current form.
Why I Chose to Redesign Comments
While I started my research journey exploring multiple potential areas of focus, improving comments for better collaboration was an area that designers clearly cared about. Several factors helped me decide to ultimately pursue redesigning comments:
- Importance to Figma’s collaborative DNA — Figma was built on the idea that design should be collaborative. Crafting a more powerful commenting experience will help directly contribute to this mission.
- High impact area — According to Amanda Kleha, Figma’s Chief Customer Officer, large organizations have an average of six collaborators per file. Numerous stakeholders rely on Figma comments for direct communication, making comments a critical tool for keeping cross-functional teams aligned.
- Increased usage due to COVID-19 and remote work — As on-canvas comments take a more prominent role in the remote team’s toolbox, ensuring a smooth and effective commenting experience is vital.
Throughout my user research process, I revealed a handful of pain points, but the next step was to identify some specific, actionable areas of growth I could focus on tackling.
2) Opportunities to Improve
Opportunity 1: The comment module lacks key functionalities for collaborative design.
Functionality: Simplicity is key to Figma’s product experience, but the comment module itself lacks key functions that designers expect. For example, comments right now can only be marked “active” or “resolved.” While this keeps things simple, this binary option ignores the nuance inherent in the product design process. Yes, feedback can be viewed from the perspective of “unresolved” or “resolved,” but one designer I spoke to suggested the ability to add more nuanced statuses — like “in progress” and “under review” — to better communicate intent with her team.
Visual Design: Multiplayer cursors and synchronous tracking help make designing on Figma feel like a collaborative experience. However, the visual design of comments still feels static and sterile.
Designers like Sahil have shared about this:
Sahil is right. The comment module in Figma is better suited for giving one-way feedback than sparking a conversation, and it’s designed that way. However, that mental model clashes with today’s collaborative dynamic of design — and Figma’s own ethos. What place would be better to discuss design decisions and virtually collaborate than in Figma itself? When these conversations happen elsewhere, it’s a missed opportunity for design teams and Figma alike.
By rethinking the functionality and visual design of the comment module, I can help realign commenting towards greater collaboration and open conversations.
Opportunity 2: Designers can’t access comments while designing.
Commenting and editing are treated as separate modes in Figma. Currently, there is no way to view comments while editing a design. I found this inability to be one of the greatest frustrations of designers throughout conducting research. As a result, many designers have implemented workarounds, including screenshotting comments and pasting them next to the relevant frame, opening a second window of Figma, and leaving sticky notes on the canvas.
Even Figma’s own design team uses on-canvas notes as a workaround, which I noticed in Figma’s public design system:
The frustration I kept finding stems from a clash of mental models. Designers want the ability to directly refer to feedback while designing. However, Figma treats feedback as a separate entity, only visible when viewing comments. Many designers using workarounds is a good indication that comments don’t currently work the way people want to use them. What’s currently designed as an “or,” I plan to redesign as an “and.”
Opportunity 3: Comments are difficult to organize and manage.
From Spotify to Airbnb, Figma is the design tool of choice for many large companies. At large organizations, there’s an average of six collaborators working on every file. Being a designer at one of these companies means sharing files with other product designers, UX writers, engineers, and product managers — all who are regularly giving feedback and contributing. Ultimately, this kind of in-file collaboration creates a lot of comments.
When it comes to managing those comments, things can get very messy very quickly. Comments are shown in order from newest to oldest. Any comments made in the last 7 days will be shown at the top, followed by any earlier comments.
However, managing dozens of comments is time-consuming without the ability to search, sort, and assign statuses to comments. As Figma shifts from a startup to an industry leader, it’s important for the comment experience to meet the needs of large teams who use it. As I redesign comments for Figma, I’ll explore ways to transform the relationship between a designer and her comments into one that empowers — not hinders — her work.
After I identified these clear areas of opportunity, I began designing.
3) My Design Process
How might we maximize the amount of utility from comments without making the experience too busy?
Understanding How Figma Designs Things
Before I started any explorations, I first wanted to understand Figma’s design process. By digesting the product thinking, principles, and methods that Figma’s team uses for designing the product, I could better understand Figma’s prior work and constraints as I redesign comments.
I began diving into Figma’s design system, which allowed me to understand their spacing, iconography, and how the product fits together. I read Twitter threads, like this one by Sho (Figma’s VP of Product) that outlines Figma’s design and development process. To explore even further, Figma’s design team has made many resources publicly available, like Figma’s Design Principles and Design 101 — a resource used to acclimate new design hires to Figma’s practices. Taking this step was critical to informing my approach for reimagining comments.
1. The Comment Module
What is a comment? As I started reimagining the comment module, I explored some very different possibilities. I began experimenting with some less structured comments:
I realized that “leaving a comment” in Figma could really be anything from a layer of freehand text to a structured module:
While unstructured comment elements — like a layer of freehand, movable text — are fun explorations in interaction design, they don’t make for very practical solutions. Design teams rely on trackable, progressive, and collaborative communication, and they need something more structured.
So instead, I began exploring several designs that were both structured yet felt conversational. Here’s a few of those explorations:
In these different variations, I explored incorporating color, changing the layout of individual comments, and adding new functionalities like comment titles, statuses, and color tags. Here is my final design:
A New, Conversational Comment Module
I redesigned Figma’s comment module with exciting new features that focus on making comments more collaborative and conversational:
The most impactful design change I made is to shift the paradigm of comments from being one-off notes to conversational messages. By redesigning comments as self-contained conversations, (1) issues can stay contained by topic (2) context and diverse input is promoted, and (3) more casual message blocks help keep comments shorter and moving along.
Say it With a Reaction
Not every message is best sent with text. Emojis have created new ways of interacting with messages, and I incorporated the ability to react to any message with an emoji directly in the comment module:
Directly Tag Colors and Color Styles
To help designers quickly and accurately communicate color choices within Figma, I created a way to use the “#” symbol to dynamically link a color. This added functionality lets you choose existing styles or create a new one.
Mention People and Frames
To further improve collaboration, I redesigned the ability to mention people and added the ability to mention specific frames within the file.
Although Figma already allows you to mention someone using “@”, I helped reduce cognitive load by narrowing the list of people that appear from everyone shared on any Figma file you’ve ever used (current design) to only those shared on that file. In addition, I wanted to better highlight Figma’s unique multiplayer colors (shown on multiplayer cursors and above avatars), so I extended these to someone’s name when mentioned in a comment.
To quickly reference other elements within the file, I added the ability to mention specific frames in a comment. By typing “@” and the name of the frame, you can directly link an existing frame. This can be especially helpful for comparing frames and referencing similar frames quickly and precisely.
Update the Status (Quo)
Designers are often juggling many tasks and to-dos simultaneously. With comments becoming more conversational, it’s important to communicate where a discussed change or feedback is at any point in time. I designed comment statuses to allow teams to add more nuance to the design process.
Comments begin with “Needs action” as the default status. People can choose from four status options: (1) Needs action (2) Under review (3) In process and (4) Resolved. Comments are removed from the canvas when marked as “resolved.”
In summary, I redesigned the comment module to feel more conversational, promoting collaboration to happen within Figma vs. another platform. To help teams communicate quicker and more precisely, I added several key features: comment titles, statuses, emoji reactions, color tagging, and mentioning people (redesigned) and frames. All of these features help solve key pain points while empowering Figma’s core value of collaboration.
Overall, I intentionally designed these features to be optional, keeping the experience as simple and elegant as possible. You don’t need to title a comment or tag a color when leaving a comment. However, in the hands of many busy designers, these abilities become superpowers for staying organized, on track, and aligned with their teams.
2. The Comment Panel
On an average day, a designer can receive dozens of Figma comments. However, my research indicated that the comment panel lacked sufficient functionality for managing comments. So, I decided to redesign it.
In my early explorations, I played with the idea of radically changing the comment panel to a menu accessed via a floating action button or an entirely untethered modal. However, after studying Figma’s design system, I framed the solution around speed and ease of use, and I decided to focus on making meaningful updates to the existing panel structure.
A More Powerful Way to Manage Comments
When redesigning the comment panel, I focused on creating a fast experience where comments are easy to identify, access, and act upon. To accomplish this, I added several new functionalities: show comments while designing, search, filter, multiselect action, and view by current page/all pages. In addition, I redesigned existing features like the comment preview block and notification settings.
View Comments While You Design
Comments are most useful when they’re actionable. However, Figma’s current design prevents you from viewing comments while you’re in design mode. To allow a designer to simultaneously reference comments and design, I added the ability to select “Show comments while designing” on the comment panel. When selected, comments will also be visible in design mode. Individual comments can be hidden from the canvas.
Search and Filter
When a file has numerous comments, it can be difficult to quickly locate specific feedback. To combat this, I added the ability to search comments by their content — a functionality that already exists in Figma in the Assets panel. In addition, to give the designer even more control over her comments, I designed the ability to filter comments by their status, people involved, and date.
Select Multiple Comments to Perform Action
One of my key focuses when redesigning the comment panel was ensuring the experience was fast and that comments could be acted upon quickly. I helped accomplish this by borrowing a functionality that already exists on the Layers panel: multiselect and right-click. Designers will now be able to hold SHIFT + click to select multiple comments, then delete, share, or change the status of all comments in the selected group. To add some delight to the experience, confetti erupts when all comments are marked as resolved.
To review, I redesigned the comment panel to create a faster experience where it’s easy for you to identify, access, and act upon a comment. By incorporating functionalities like search, filter, and multiselect that already exist in Figma, I was able to improve the experience of managing comments while minimizing the burden on engineers.
3. Improving Ease of Use
Finally, I paid close attention to ways that Figma’s comments could better achieve accessibility within the product:
Keyboard navigation
With 50% of users accessing Figma from the desktop app, Figma is a product used heavily by many designers. Power users could greatly benefit from quicker navigation around the canvas. Therefore, I added the ability to use the keyboard to navigate between comments. Right and left arrows move you between comments, and SHIFT + up/down arrow changes the status of a comment.
Added signifier when leaving a comment
A reappearing theme in my user research was that how comments initially pin to frames isn’t always clear or consistent. However, this can be fixed by adding a simple signifier for the location a comment will be placed. Currently Figma’s design mode outlines a layer when you hover over it on the canvas. But why doesn’t this happen when placing a comment in comment mode? By adding a signifier beyond just the largest frame, comments can be placed more accurately and precisely.
Reflection and Takeaways
If you got this far, thanks for sticking around! This project was a lot of fun, and it means so much that you gave it some of your time.
The vague prompt of redesigning an existing product feature is always more challenging than it seems. Existing products come with existing constraints, data you don’t have access to, and the necessity to focus on highly impactful areas with untapped opportunity. Overall, this project challenged me to solve problems by applying some of Figma’s existing functionalities in new ways.
The solutions I designed have many benefits: Conversational comment modules encourage more collaboration. In essence, these modules essentially make live chat (a highly requested feature) a reality. A cleaner comment panel with statuses favors industry designers, but I was intentional to design added functions like comment titles and reactions as added supplements, not as necessary obstacles.
However, they also have limitations: Conversational-style comments could get off-topic quickly and lead to an overload of messages. However, individual comments being contained within a conversation can help make runaway conversations easier to manage. Assigning statuses to comments promotes action-based feedback, but without testing, I’m not sure if this adds unneeded complexity.
Given more time, I would have… conducted more explorations on both the interaction and visual design of my solutions. To collect valuable insights, I would have contacted several designers at Figma to get their feedback on my explorations. In addition, I would have tested and validated my designs with designers and engineers I worked with during my user research.
Future explorations could include… pairing your phone with Figma to interact with and move between comments.
Again, thank you for exploring my work, and I encourage you to leave any feedback or critique in the comments!
Acknowledgements
A huge thank you to the CreateRemote and Friends of Figma Slack communities for offering candid feedback and insights. Your experiences helped guide my design process from the very beginning.
Thanks to Brian Lin, a designer and KP Design Fellow whose clear and informative case study writing helped inspire the structure and approach behind my own.
