Figma Version History Diff Viewer

WHAT IT DOES

This userscript adds a powerful visual diff viewer to Figma's version history panel, allowing you to compare any two versions of a design file side-by-side. It extracts version metadata including names, timestamps, authors, and descriptions from the version history panel, then analyzes the differences between selected versions. The script identifies added layers, removed elements, and modified properties, presenting them in a clear, color-coded interface. Added items appear in green, removed items in red, and modified items in yellow. Each diff item shows the layer name, change type, and optional path information, making it easy to understand exactly what changed between design iterations. The tool also provides a summary statistics bar showing the count of additions, removals, and modifications at a glance.

WHERE IT RUNS

The script activates on all Figma file pages (figma.com/file/*, figma.com/design/*) where version history is accessible. It works alongside Figma's native version history panel, detecting when the panel is opened and automatically scanning available versions.

HOW TO USE

After installation, open any Figma file and navigate to the version history panel. The script adds a draggable panel with two dropdown selectors for choosing versions to compare. Select an older version (Version A) and a newer version (Version B), then click Compare. The script analyzes the differences and displays a summary statistics bar followed by a detailed list of all changes. Use the Swap button to quickly reverse the comparison order. The diff mode can be switched between Unified and Side-by-Side views. Auto-compare mode automatically re-runs the comparison whenever you change a version selection.

THE ACTUAL REASON IT WORKS

Unlike tools that rely on Figma's REST API (which requires authentication and has rate limits), this script performs client-side analysis using version metadata extracted directly from the DOM. It employs a heuristic-based diff engine that parses version names and descriptions to identify layer references, using pattern matching to extract quoted strings, bullet points, and comma-separated lists that typically contain layer names in version descriptions. The script then performs a set comparison between the layer sets of two versions, classifying items as added, removed, or modified. For modified items, it applies a text-based diff to show specific value changes (e.g., "Header" → "New Header"). This approach works without API keys, handles private files, and provides immediate feedback without network latency.

THE PANEL

The settings panel is fully draggable by its header and remembers its position across page loads. It collapses to a small icon when minimized, preserving screen space. Press Escape or click the × button to close the panel. The panel includes a diff summary bar, a scrollable diff container, and controls for selecting versions. The diff container supports scrolling for long diff lists and displays items in a structured format with icons, labels, and path information for easy scanning.

PLEASE NOTE

This userscript requires the free BotGentz extension to run. The diff analysis is based on version metadata visible in the Figma UI - it does not have access to Figma's internal layer structure or API. The accuracy of the diff depends on how descriptive version names and descriptions are; more detailed descriptions yield better diff results. Figma periodically updates its interface, which may affect version detection; we actively maintain the script for compatibility. The script reads only version history data from the page and does not send any information to external servers. All settings are stored locally in your browser's userscript storage.