Figma插件中如何正确监听页面选中元素的变化？

夏侯世梅提问于 2026-03-24 13:28:20 阅读 6

工具

我在开发一个Figma插件，想监听页面上选中的节点变化，但 on(“selectionchange”) 好像没触发。我查了文档，也试了在 ui.html 里加事件监听，但都没反应。是不是我的写法有问题？

这是我在插件主脚本里的代码：

figma.on('selectionchange', () => {
  console.log('Selection changed:', figma.currentPage.selection);
  figma.ui.postMessage({ type: 'UPDATE_SELECTION', nodes: figma.currentPage.selection });
});

UI那边用的是简单的 HTML 结构：

<body>
  <div id="app">当前选中: <span id="count">0</span> 个元素</div>
  <script src="ui.js"></script>
</body>

我来解答赞 1 收藏

反馈

1 条解答

闲人柯一 Lv1

问题应该出在你对 selectionchange 事件的理解或者监听方式上。首先，确保你在插件的主脚本中正确地监听了 selectionchange 事件，这个看起来你已经做了。但是需要注意的是，figma.currentPage.selection 返回的是一个只读数组，里面包含的是 Figma 的 Node 对象，而不是普通的 JavaScript 对象，所以直接发送可能会有问题。

你可以在发送之前将 Node 对象转换为可以序列化的数据，比如只发送 ID 或者 name。还有就是确保你的 UI 脚本正确地接收了消息。

试试改一下你发消息的部分，只发送节点的 ID 列表：

figma.on('selectionchange', () => {

  const selectedNodeIds = figma.currentPage.selection.map(node => node.id);

  console.log('Selection changed:', selectedNodeIds);

  figma.ui.postMessage({ type: 'UPDATE_SELECTION', nodes: selectedNodeIds });

});

然后在你的 ui.js 中处理接收到的消息：

window.onload = () => {

  onmessage = msg => {

    if (msg.data.type === 'UPDATE_SELECTION') {

      document.getElementById('count').innerText = msg.data.nodes.length;

    }

  };

};

这样改过之后应该可以正常工作了。如果还是有问题，检查一下控制台有没有错误信息，有时候会有提示的。

2026-03-24 14:02