Figma插件selectionchange消息未触发UI更新问题求助

问题根源 #

你搞反了消息的监听方向：

• figma.ui.onmessage 是插件主线程（code.ts）监听UI界面发来的消息，所以你在里面写SelectedTextUpdate的处理逻辑完全无效——因为这个消息是主线程发给UI的，不是UI发过来的。
• 插件主线程通过figma.ui.postMessage发送的消息，需要在UI的脚本里用window.addEventListener('message')来接收。

修正后的代码 #

ui.html（修改后） #

<h1 id="selectedState">선택되지 않았어요</h1>
<button id="temp">클릭</button>

<script>
    // 保留原UI发消息给插件的逻辑
    const sendMessageButton = document.getElementById('temp');
    sendMessageButton.addEventListener("click", function() {
        parent.postMessage({ pluginMessage: { type: 'UpdateText' } }, '*');
    });

    // 新增：监听插件主线程发来的消息
    window.addEventListener('message', (event) => {
        const message = event.data.pluginMessage;
        if (!message) return;

        if (message.type === 'SelectedTextUpdate') {
            const selectedStateEl = document.getElementById('selectedState');
            // 根据是否有选中元素更新文本
            selectedStateEl.textContent = message.layerName 
              ? `선택된 요소: ${message.layerName}` 
              : '선택되지 않았어요';
        }
    });
</script>

code.ts（修改后） #

figma.showUI(__html__, { height: 600 });

figma.on("selectionchange", () => {
  const selectedLayers = figma.currentPage.selection;
  if (selectedLayers.length > 0) {
    console.log("run this");
    // 把选中图层的名称一起发给UI
    figma.ui.postMessage({ 
      type: 'SelectedTextUpdate',
      layerName: selectedLayers[0].name 
    });
  } else {
    // 无选中元素时通知UI恢复默认文本
    figma.ui.postMessage({ 
      type: 'SelectedTextUpdate',
      layerName: null
    });
  }
});

// 只处理UI发给插件的消息（保留原UpdateText逻辑）
figma.ui.onmessage = (message) => {
  if (message.type === "UpdateText"){
    console.log("이거다");
  }
};

逻辑说明 #

1. 选中Figma元素时，selectionchange事件触发，插件主线程通过figma.ui.postMessage把包含选中信息的SelectedTextUpdate消息发给UI。
2. UI里的window.addEventListener('message')捕获到消息后，修改selectedState的文本内容。
3. 原有的UpdateText逻辑是UI发消息给插件，所以code.ts里的onmessage处理完全正确，无需改动。

内容的提问来源于stack exchange，提问作者madol