Collaborative Design - An in-demand work trend
The culture of sharing, idea of teamwork and collaborative minds have emerged as effective concepts and are common among the IT industry. The CX design world is no exception. Figma is one such application providing the team members a platform to work on a project together in real-time. One of its highly popular collaborative feature is commenting where designers can give feedback right in the file making the discussion an effortless experience for the team.
However, the impressive collaborative feature comes with a slight disadvantage. As the work progresses, the number of comments usually pile up and the clutter gets difficult to keep track of. This consequently clogs the way of designers impending faster management of tasks for quick turnarounds.
Bringing more visibility and engagement to discussions
Processing comments when they are scattered across the file is time-consuming. There are inherent drawbacks that affect speed and efficiency. Our design team at Intelligaia felt the need for a new development in the application, and subsequently got down to work on eliminating the blockers in the way of working.
Employing agile methodology and effective project management, the team read the documents, discussed with the developers’ community and came up with a workable solution. It was established that product design iterations could speed up by developing a "Export Comments" Figma plugin to export comments into a CSV format for purposes like creating tickets (tasks) in any project management tool like Git. The time consumed in going back and forth to read and resolve the comments can be reduced to merely a few clicks! This Figma Plugin can not only simplify the way of working but is also easy to install.
Backstory of the product engineering
The team at Intelligaia reached out to Figma and their developers but according to the documentation provided by them for creating the plugin, there was no support for exporting the comments data through Figma Plugin. At this point, the team considered taking a different route. They were aware that plugins could work on JavaScript and TypeScript at the basic level. They also knew that there’s another section for Figma APIs where they have provided APIs for pulling the comments out of a file. They used that API and fused it with the Plugin part. In a nutshell, the team synchronised all of the things and made it cohesive and comprehensible.
The product was engineered accordingly, and the minimum requirement established for pulling out any comment from a file was to provide file ID with the access token. To be precise, for every user who is using the Plugin, they have to fill in the access token once which is then saved by the Plugin. Only thing that is required from users every time is to provide the file ID to export comments from.
How is it done?
- Install the Comment Export Plugin and is immediately visible in your plugins
- Open it and then copy-paste the url of the file
- Fill in the access token
- Click on desired option (type of comments you wish to export)
- Download File
That’s it. Your comments are exported in only a few seconds!
The journey from useful to usable solution
In the first version of the plugin, the extracted comments got exported to CSV format. This allowed the design and project management teams to view all comments at one go. Also, a complete new feature was added with the plugin that let the team members view “New” comments which did not exist previously in Figma. The information shown in the CSV file got designers to quickly view the assigned comments and work towards their resolution.
The exported comments data had all the information. However, it also had heaps of raw data and unorganised details calling for copious amounts of manual work in order to extract important information. The CSV file came with a lot of unused data columns like File Key, Comment ID, Order ID, User ID, and User URL. As the exported data is directly picked from Figma API, it could best be comprehended by developers, much to the user's disadvantage. Moreover, the associated data to be selected before exporting, asks for unnecessary information not easily deciphered by the designers. This further implied extensive manual work to make it into a sound report.
We created a prototype, tested it with real time users and valuable feedback was brought into consideration. Design is an iterative process. After discussions with the team members and brainstorming over the concept, the team came up with more user stories. We refocused our attention to discover who is using this functionality the most and recorded their inputs. To reduce the manual effort and overcome the pain points and to make it discernible for designers, project managers and stakeholders, we came up with another version.
The new version focuses on a minimalist UI.
Unnecessary columns are done away with, parent & child comments are grouped together and statuses are shown accordingly.
In brief, the chaos has been effectively removed from the scene and a more elegant outlook given to the whole set-up.
You can now view your own comments or by others, those that are resolved and also new ones; all separately. While exporting the data, the designers can now decide which category of comments they wish to export. This version reduced multiple steps of the previous version into one. The new version has a very organised, user friendly interface that can easily be understood by designers, project managers and stakeholders.
Major Features
- Easily export comments from Figma into an XL File
- Filter Comments (All, new, my, resolved, unresolved)
- Comments grouped according to dependenciesn
- Sort by timestamp
- Easy to use, import and understand
Putting Innovative Thinking into Practice: The Eureka Moment
The team when faced with the problem of speeding up the design process concentrated it’s focus towards finding a way out. The motivation to identify where things can be improved combined with a creative approach to problem solving led to an innovative solution. The discussions, research and engineering, together formed the idea and to the very surprise of developers, they delivered the Proof Of Concept (POC) in mere 15 minutes. That came as a Eureka Moment! With the useful features and ease of operation, this Plugin is surely a boon for designers using Figma.