Building a Star Rating Widget for FIGMA and FIGJAM collaboration

A star rating widget that helps designers collaborate and rate items on their canvas. Built with React hooks and the FIGMA API.

Role: Creator, designer, developer

Url: Star Rating Widget

TL;DR

I built a star rating widget for FIGMA and FIGJAM that allows users to rate items from 1 to 5 stars. With over 6K downloads, it's helping designers collaborate more effectively.

Creating tools to help other designers.

When working with other designers or product people, communication is the most important parameter for smooth collaboration.

Figma, Coda.io, and Apple have put this front and centre of their business and we can see this paying off, but sometimes communication needs optimisation at a more granular day-to-day level.

Everyday we face blockers, misunderstandings and confusion just because we can't communicate in an efficient way. COVID having moved most designers to hybrid remote, the need for constant clear communication is crucial.

I've created a star rating widget for designers to use on their FIGMA/FIGJAM to rate and evaluate items. Being a product designer with an appetite for development, I started a crash course on React hooks so I could find my way in the nicely documented FIGMA API. Having very small track record in React I had to prioritise the core needs and make it simple enough so I could build it 😄. But it paid off as it's now used by more than 6K FIGMA users.

FIGMA Star Rating Widget

Download Star Rating Widget

This widget allows you to give a star rating to any item on the canvas. For this widget I had learnt from building my first widget and was able to squeeze in more features, as I was getting more confident with the FIGMA API. One thing I love about widgets is that the code is not what matters. As long as it works and has a use, then it will be published to the community.

Star rating widget demo

Key Features

  • 1-5 Star Rating System: Simple and intuitive rating mechanism
  • User Profile Integration: Show/hide the user profile image of who gave the rating
  • User-Specific Editing: Only the user who created the rating can change it, preventing cheeky ratings
  • Customization Options: Two settings for orientation and dark mode
  • Collaborative Design: Perfect for team feedback and design reviews

Impact & Usage

So far the widget has been downloaded more than 6K times which comforts me that there is indeed a need and people are using it. It's actively helping designers around the world communicate their feedback more effectively.

Video teaser for Twitter!

Video teaser used for twitter

This widget is part of my journey into building tools for the design community. Check out my RAG Status Widget as well for another collaboration tool.