I want to perform some operations on a layer in a Figma file when the user releases the cursor after stretching it.
Should I be listening for a drop event in figma.on? I’ve seen a forum post about drag and dropping here but it seems to pertain only to dropping from files outside of Figma ie dragging from the plugin iframe
Use the on documentchange event: How to detect when node is resized? - #2 by Gleb
I was using the PROPERTY_CHANGED type of the ondocumentchange to handle my operations like so:
(I’m calling the resize() function in my resizeToAspect())
Problem is, every time I call resize() while the node is being resized via Figma’s transform controls, it also fires another documentChange event which leads to a weird flickering effect. That’s why I only want to call my custom function after the user has released their mouse after dragging the width/height of a node in Figma.
Is there a way for me to detect the end of a drag event in Figma using documentChange?
Unfortunately no. Sorry for not giving a direct answer before as I thought you weren’t aware of the documentchange and thought it’s all you needed.
in that case, is it possible to detect if the user has moused up in the Figma file? I know that the plugin UI aka ui.html can listen for mouse events, but can that be done from the Figma file itself eg figma.
Nope, there is no way to listen for canvas interactions in any way.
One thing you can do is debounce the resize action. E.g. if the user hasn’t changed the size of an object in 3-5 seconds, it’s relatively safe to assume they stopped resizing it, so the plugin can do its thing. You can experiment with different timings for the best possible experience.
Thanks, I tried to use debounce from JQuery and some TS-version of it from NPM but I couldn’t figure out how to get it to work. So for now, I just implemented a barebones version of it like so:
(timerID is declared at the top of code.ts)
Not sure if it’s the best approach but it works fine for now
This is the best approach, you don’t need to use a third-party library for something as simple as debounce.