Building a RAG Status Widget for clear project communication

A RAG status widget that helps teams communicate project health using the universal language of traffic lights. Built with React hooks and the FIGMA API.

Role: Creator, designer, developer

Url: RAG Status Widget

TL;DR

I built a RAG Status widget for FIGMA and FIGJAM that provides a simple traffic light system for project status. With over 7K downloads, it's helping teams communicate project health 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 RAG Status widget for designers to use on their FIGMA/FIGJAM to communicate project status. 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 7K FIGMA users.

FIGMA RAG Status Widget

Download RAG Status Widget

The concept is simple, just like a traffic light is a now iconic concept, RAG Status allows designers (or anyone using FIGMA) to give a status on something.

RAG status widget demo

How It Works

The RAG Status widget provides a universal visual language for project status:

  • 🔴 RED - Means not going well, needs attention
  • 🟡 AMBER - OK, neither good nor bad, proceed with caution
  • 🟢 GREEN - Ready, good to go, everything is on track

Key Features

  • Universal Language: Traffic light system that everyone understands
  • Simple Implementation: Easy to use and integrate into any design workflow
  • Team Collaboration: Perfect for design reviews, project updates, and status meetings
  • Visual Clarity: Instant understanding of project health at a glance

Impact & Usage

So far RAG Status was downloaded more than 7000 times and is actively used by designers around the world. Thanks to FIGMA featuring it on their community page, it's become a go-to tool for teams looking to communicate project status clearly and effectively.

Video teaser

Video teaser used for twitter

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