I’m working on a Figma plugin and need to know when the document changes. I’ve been looking at the event listeners available in the Figma API but they seem pretty restricted in what they can do.
Is there any method or approach to listen for document modifications? I want my plugin to react whenever someone makes changes to the file. Maybe there’s a way to monitor document state changes or use some kind of polling mechanism?
Has anyone found a reliable solution for tracking file updates in Figma plugins? Any workarounds or alternative approaches would be helpful.
I’ve hit this exact issue before. The documentchange event is pretty limited, so I combine multiple listeners instead - selectionchange, currentpagechange, plus tracking node changes through getNodeById. I create snapshots of key document properties (layer structure hashes, modification timestamps, etc.) and compare them when events fire. You don’t need to track every single change - just focus on what matters for your plugin. Big warning though: keep these listeners lightweight. I made the mistake of running heavy operations in them and it caused serious lag. Debounce your response functions too, or you’ll get hammered when users make rapid changes.
the figma API’s pretty limited for this. I hook into figma.on('run') and check document state there - it’s not perfect but catches most changes when the plugin restarts. If you’re tracking specific elements, use node.onchange instead. way more efficient than polling everything.
I built a hash-based change detection system that works great. During plugin startup, I generate MD5 hashes of key document sections, then recalculate them when specific events fire. The key is being picky about what you hash - I stick to node hierarchies, text content, and styles, but skip position data since it’s constantly changing during drags. Store the hashes in plugin storage and compare them to current values. When they don’t match, you know something important changed. Way better performance than polling continuously, and it catches changes that basic event listeners miss. You do need to pick your trigger points carefully, but pairing it with user interactions like clicks or keyboard shortcuts covers most scenarios.
Had the same problem. I use figma.currentPage.findAll() with timestamps - way simpler than complex hashing or constant polling. Just store the last modification time and scan when UI events happen, like when users finish dragging or editing text. Key is catching the right moments without being annoying. I also use figma.viewport.on('scroll') since people usually scroll after making changes - gives you a natural spot to check document state. This catches about 90% of changes I need without killing performance. The few edge cases aren’t worth building some crazy monitoring system.
Figma’s API doesn’t have direct document change listeners, but I found a workaround using selectionchange events plus periodic checks. When users select different objects, selectionchange fires - you can use this to kick off broader document monitoring. I set up a lightweight polling system that runs every few seconds, comparing current document node counts and properties against cached values. Focus on specific metrics your plugin actually needs instead of monitoring everything. Track total nodes, specific node types, or particular property changes - whatever matters to you. This works great for my plugin without performance hits. Just don’t poll too often or you’ll slow down Figma.