I use drop event to receive data from plugin and create component in figma, it works fine in figma app but not in browser.
figma.on('drop', event => {
const { items, node } = event
if (items.length > 0 && items[0].type === 'text/json') {
const data = JSON.parse(items[0].data) as IconData
const instance = newIconFromData(data)
instance.x = event.x
instance.y = event.y
// not all nodes have appendChild method
;(node as PageNode | FrameNode | GroupNode | SectionNode).appendChild(instance)
figma.currentPage.selection = [instance]
return false
}
return true
})
I also tested on Material-Symbols and it doesn’t drop properly in browser too.
My os version is macos 13.2 and browser verison is chrome 110, and there’s no error message in console after I drop.
Any idea on how to solve this? Thanks.
Hi! Figma engineer here. Thanks for flagging. Unfortunately, I wasn’t able to reproduce the issue. Would you be able to provide the plugin code, including the UI file? It’d be also helpful if you have a video of the issue.
I tested the Material Symbols plugin. That plugin doesn’t use a drop handler, so the drop event doesn’t work on desktop or browser.
I tested that the following plugin code works on desktop and browser. For more examples, you can see the png crop or icon drag and drop plugins.
ui.html
<span id="icon" draggable="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-align-center"
>
<line x1="18" y1="10" x2="6" y2="10"></line>
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="21" y1="14" x2="3" y2="14"></line>
<line x1="18" y1="18" x2="6" y2="18"></line>
</svg>
</span>
<script>
const icon = document.getElementById("icon");
icon.addEventListener("dragend", (e) => {
// Don't proceed if the item was dropped inside the plugin window.
if (e.view.length === 0) return;
const item = {
type: "text/json",
data: '{ "width": 100, "height": 200 }',
};
// This will trigger a drop event in Figma that we can register a callback for
window.parent.postMessage(
{
pluginDrop: {
clientX: e.clientX,
clientY: e.clientY,
items: [item],
},
},
"*"
);
});
</script>
code.ts
figma.showUI(__html__);
type Data = {
width: number,
height: number,
}
figma.on('drop', event => {
const { items, node } = event;
if (items.length > 0 && items[0].type === 'text/json') {
const data = JSON.parse(items[0].data) as Data;
const rect = figma.createRectangle();
rect.x = event.absoluteX;
rect.y = event.absoluteY;
rect.resize(data.width, data.height);
// not all nodes have appendChild method
(node as PageNode | FrameNode | GroupNode | SectionNode).appendChild(rect)
figma.currentPage.selection = [rect]
return false
}
return true
})
Hi @Elaine_Lin, we are also running into this issue!
It seems to impact Non-null origin iframes in particular.
Some additional context & reports for things that sound similar/related across the community forum (all of which have gone unanswered):
We would love to get this resolved / any suggestions for workarounds!
Also want to echo that it is very difficult for plugin authors to catch issues like this before a plugin is released, because you cannot test a plugin in the browser before it is released! So any discrepancies between the Figma desktop app and the Figma browser experience go undetected through the review process . Any possibility of being able to test dev plugins in the browser in the future?
Lastly, is there a way via the plugin API or otherwise to detect whether a plugin is being executed in the browser or desktop app? Then we can at least ship a quick patch release to notify users about the missing drag-and-drop behavior on the web.