FigJam Sticky Note Counter

WHAT IT DOES

This userscript transforms your FigJam canvas into an instant analytics dashboard for sticky note distribution. It scans the canvas, identifies all sticky notes, and counts them by color, displaying a color-coded counter panel that shows exactly how many notes of each color are present. The panel provides a summary with total sticky notes and the most common color, along with a detailed breakdown showing each color's count and percentage distribution. As you add, move, or delete sticky notes on the canvas, the counter updates in real-time (when enabled), giving you live feedback on your canvas composition. This is invaluable for workshop facilitators, UX researchers, agile teams, and educators who use FigJam for brainstorming, affinity mapping, retrospective sessions, or any activity where sticky note color conveys meaning. Instead of manually counting notes or guessing the distribution, you get instant, accurate data that helps you understand the balance of ideas, identify dominant themes, and ensure equitable participation.

WHERE IT RUNS

The script runs on all Figma web application pages at *.figma.com/*, with automatic detection of FigJam files (paths containing /figjam/, /jam/, or /board/). It works across all FigJam interfaces by using multiple selector strategies to find sticky note elements, including common class names (.sticky-note, .figjam-sticky-note, .post-it) and data attributes. The script detects dynamic canvas changes and updates the counter whenever sticky notes are added, moved, or removed. It runs on the entire Figma domain, ensuring coverage whether you're working on a FigJam board, a team retrospective, or a design sprint canvas.

HOW TO USE

Install the script via the BotGentz extension and open any FigJam board. The sticky note counter panel will appear automatically, showing a summary of all sticky notes on the current canvas. The panel displays total note count, the most common color, and a full breakdown by color with count, percentage, and a visual bar chart. Use the panel controls to customize your experience: enable or disable real-time updates to control when the counter refreshes, toggle color names on or off, or show or hide percentage distributions. The counter updates live as you work—add a yellow sticky note and the count immediately increases. Click "Refresh count" to manually rescan the canvas, or "Copy summary to clipboard" to export the data for reports or sharing with your team. The panel includes a settings section where you can adjust your preferences for real-time updates, color name display, and percentage visibility.

THE MECHANISM - DOM SCANNING, COLOR DETECTION, AND REAL-TIME MUTATION OBSERVATION

This script identifies sticky notes by scanning the DOM for known FigJam element types. It uses a cascading selector strategy that looks for sticky note elements through multiple approaches: class-based selectors (.sticky-note, .figjam-sticky-note, .post-it, .sticky), data attributes ([data-type="sticky"], [data-testid="sticky-note"]), and structural heuristics (small shape elements with text content). Color detection is the most critical part: the script extracts color from several sources including computed background-color styles, fill attributes, inline styles, data-color attributes, and class name keywords. Each color is normalized to hex format and mapped to a human-readable name using a comprehensive color dictionary that covers all standard FigJam sticky note colors. The count is aggregated by color, sorted by frequency, and percentage distribution is calculated relative to the total. For real-time updates, the script uses a MutationObserver to watch for DOM changes on the canvas, debouncing rapid updates to ensure smooth performance.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the FigJam page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📈), minimizing distraction while keeping the counter accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes the summary, color breakdown with visual bars, and settings toggles. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within FigJam, with the counter updating automatically as you move between boards.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for FigJam users who need to track sticky note distribution for facilitation, research, or collaboration analytics. The script reads only visible DOM elements on the canvas—it does not access Figma's API, your account credentials, or any sensitive information. All settings (real-time toggle, color name preference, percentage visibility, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your FigJam data—it only reads and displays visible information. Color detection relies on the visual styling of sticky note elements; if FigJam updates its design or class names, the script may need to be updated to match new selectors. The real-time update feature may affect performance on very large boards with hundreds of sticky notes; if you experience lag, disable real-time updates and use the refresh button manually.