Figma widgets for collaboration
Useful widgets to improve collaboration in product teams
Figma is the most collaborative interface tool I have ever used as a UX designer. It is improving this aspect in each update release. In June with the latest update, they announced the widgets which bring the collaboration to another level. Widgets are interactive tools and are visible to everyone using the file, unlike plugins. Several widgets can also be used simultaneously in the same file, adding flexibility to Figma. These widgets are built by the community and every day some new ones will be added to the widget list. I have used and tried some of them so far, and want to show how these tools can elevate collaboration in your projects.
I have categorized the Figma widgets according to various collaboration aspects in product design. I think these concepts are very fundamental to building functioning communication across teams, collecting feedback from stakeholders, and even sometimes having fun together.
Documenting well
Documenting is the key factor when it comes to communication among team members. Designers need to find an effective way to document the status of the designs to inform the rest of the team better. I listed the best available widgets that you can use for documentation.
64 statuses
This widget helps you to mark the statuses of the frames with color coding. Just two steps; selecting the frame or multiple frames that you want to set the status of and then clicking the status from the widget. However, you can not expand the status option you can choose from. You can neither edit nor add a new status. That makes the workflow a little limited. Still, these six default statuses can help you to communicate with other team members if you want to keep things basic.
One other thought is that since the 64 statuses gives color to the borders of the frame, it could interfere with the colors and styling of the UI elements. A workaround would be hiding the strokes from the properties panel when you don’t want to see the status. It is not the best option though, while you can forget to take the status back and the information could be lost.
Approved
If you want to go with a more basic approach, just show the team if the designs are approved, rejected, pending, or in revision, you can use the Approved label widget. Basically, you click on the widget until you find the right status for the designs. You need to place the widget next to the frames to inform the team better and copy as much as you need. This widget has a feature to add comments next to the status, which is very handy. There are also four size options, from small to extra large to choose from. You can mark the most important message with a bigger size to navigate the team’s attention to the necessary parts in the designs.
Sticky notes
For documenting designs, showing statuses may not be enough at times. You might need to give more detailed information to the rest of the team. Or you would like to write your design idea or decision out right next to the frames. In those times, sticky notes would be your go-to tool. I have chosen two different widgets for that.
Sticky note by Gabriele Malaspina
This widget lets you choose the color of the sticky note among ten color options. You can manually create a legend to introduce the meaning of the colors to the team and define the color coding for different purposes such as; design ideas, decisions, or discussions. In addition, there are five other size options. You can use these sizes to prioritize notes and organize the file better.
Moreover, it is very handy to be able to show the author of the notes. This way, for instance, you will understand with whom to talk about a design idea. Sticky notes can have a fixed height or hug the content. However, you can not define the fixed height by yourself, which can get a bit cumbersome. But overall it is a very useful tool that I can recommend.
Sticky note by Nitish Khagwal
This sticky note widget is pretty similar to the previous one. This one has only eight color options and no size differences. Other than that, it works exactly the same.
Combining widgets: 64 status + sticky notes
The cool thing about widgets is that you can use them in the same file at the same time. This gives us the flexibility to combine functionalities in different scenarios. What I have realized is that you can choose a similar color for your sticky notes as a status widget and you can note things related to the status change in your designs.
Table
Documentation in your workflow does not have to be necessarily in free text form, you might need table form as well. For that, there is a Table widget to build tables in Figma files. The table widget supports only text or digit inputs without math functions and calculations. An external table can be imported, or the table can be exported as CSV. To differentiate different tables in the file, colors can be applied or titles can be added. As in a usual table, you can add columns, and rows on any side you want and clear all inputs in the table with a click of a button.
Navigate
The Navigate widget, as you catch from the name, helps you navigate through the project. You create buttons with a specific title and choose the destination. After clicking a “navigate” button, it will fly you over to the aimed destination. What you need to pay attention to is placing buttons strategically. This way everyone in the team can navigate smoothly through design boards.
lil todo
It is sooooo easy!! Just add a to-do list to the Figma file. You can click the checkmark as you’re done with them, and it feels good!
Communicating in voice
Voice memo
This one helps a lot, in case you have to answer one of the colleagues’ questions with a very long text. Instead of writing, you can simply record a voice memo. You can add a title to each memo so that you can organize your ideas better.
Voting designs
As designers, we usually come up with various design ideas and want to discuss them with the team. Generally what we need is to vote on design variants with the stakeholders. What I use with my colleagues is very often commenting tool in Figma. However, because we add comments for other purposes as well, it might be confused with an idea, thought, question, or vote. So at this point, widgets are here to help.
Simple Vote
Just simply choose the frames you want to vote for. Then think about which type of voting to select. Do you want to get the votes anonymously in a fully unbiased way, or would you like to show who voted, or even do you prefer to collect votes first and reveal them when you are ready? All these ways are possible here! It is very convenient and makes voting even more fun.
Poll
If you have a question in mind to ask the team colleagues and they are very related to the designs in Figma, then create a poll right next to the frames. Get direct feedback from your team easily and make easy decisions together.
Ice breakers
If you just started working in a new environment or you are working remotely, you might need some ice-breaking moments while working in Figma together. Widgets solve this problem too and bring so much fun into the project files. Some of them are games that you can play together or some of them help you to communicate your emotions in a fun way possible. They are easy to use and very straightforward. I simply listed the most fun widgets that I liked below. Keep up the fun!
If you know other Figma widgets which improve collaboration among design teams, please write in the comments below.
Thanks for reading!
You can also check these articles from other authors who also talk about useful figma widgets:
