React Figma plugin message passing between UI and backend fails

Other Questions Figma
1

I’m building a Figma plugin using React and running into communication issues between the UI and backend files.

I have a button in my UI component that sends a message when clicked:

// ui.tsx
handleClick = () => {
    parent.postMessage({pluginMessage: {type: 'FetchInfo'}}, '*');
};

The backend file receives this message correctly:

// code.ts
figma.ui.onmessage = message => {
  if (message.type === 'FetchInfo') {
    figma.ui.postMessage({"name": figma.currentPage.selection[0].name});
  }
};

The problem is that my UI file never receives the response. I have this message handler set up:

// ui.tsx
onmessage = (data) => {
    console.log(data);
};

The console.log never fires. The message goes from UI to backend fine, but the return message from backend to UI doesn’t work. I need to get selection data from the backend since the UI can’t access it directly. What am I missing here?

2

You’re probably not handling the message event structure correctly. Figma wraps messages in an event object when sending them to the UI. Your handler needs to access event.data.pluginMessage, not the raw data.

Change your UI message handler to:

window.onmessage = (event) => {
    console.log(event.data.pluginMessage);
};

Had this exact same issue last month - wasted hours on it. The backend sends messages fine, but the UI has to unwrap them from the event structure. Also, set up your message listener before the backend sends anything.

3

Your message handler setup is incorrect. You should utilize window.onmessage and access the data through the appropriate event structure. Your current handler won’t be able to catch messages from the Figma backend.

Update your UI message handler as follows:

window.onmessage = (event) => {
    const message = event.data.pluginMessage;
    if (message) {
        console.log(message);
        // Handle your data here
    }
};

Make sure to set up this listener during the initialization of your component; avoid placing it inside click handlers. I encountered a similar issue while developing a text replacement plugin. The backend was sending messages correctly, but the UI wasn’t configured to receive them. Correct the event structure access, and your selection data retrieval should function properly.

4

Had the same messaging nightmare last year building tools for our design team. Your message listening setup is the problem.

Instead of fighting with these fragile manual handlers, just automate the whole thing.

I built something with Latenode that watches Figma selections and processes the data automatically. It connects to Figma’s API and triggers actions based on what designers pick. Way cleaner than dealing with UI-backend message passing.

Quick fix: use window.addEventListener('message', handler) instead of window.onmessage. Much more reliable.

But really, automate this. My system grabs selection data, runs it through APIs, and sends results wherever needed. No more message handler debugging.

5

Check if your UI component’s actually mounted when the backend responds. Sometimes the timing’s off and the handler isn’t ready. Also double-check you’re not overwriting the onmessage handler somewhere else in your code.

6

try using window.onmessage for your message handler. had the same issue and this fixed it for me. also, ensure the message handler is set up before sending the very first msg.

7

Your message listener setup is the problem. Don’t use bare onmessage assignment in React - it won’t work with the component lifecycle. Use addEventListener in a useEffect hook instead:

useEffect(() => {
    const handleMessage = (event) => {
        console.log(event.data.pluginMessage);
    };
    
    window.addEventListener('message', handleMessage);
    
    return () => {
        window.removeEventListener('message', handleMessage);
    };
}, []);

This prevents memory leaks and makes sure the listener’s active when your component mounts. I hit this exact issue building a layer inspector plugin. React’s lifecycle messed with direct assignment, but addEventListener worked perfectly.