React-based Figma plugin struggling with message passing

Other Questions Figma
1

I’m working on a Figma plugin using React and I’ve hit a snag. The plugin’s setup is similar to Figma’s React example, but I’m having trouble with message passing between files.

In my ui.tsx, I’ve got a button that triggers this on click:

onClick = () => {
    parent.postMessage({pluginMessage: {type: 'FetchInfo'}}, '*');
};

This works fine and my code.ts picks it up:

figma.ui.onmessage = msg => {
  if (msg.type === 'FetchInfo') {
    figma.ui.postMessage({"label": figma.currentPage.selection[0].id});
  }
};

The problem is, the postMessage from code.ts isn’t reaching my ui.tsx:

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

This onmessage function never gets called. I need to get info from code.ts to ui.tsx, but it’s not working. Any ideas on how to fix this or why it’s happening? I’m stuck and could really use some help!

2

hey there, i’ve dealt with this before. make sure ur using window.onmessage instead of just onmessage in ui.tsx. like this:

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

this should catch the message from code.ts. good luck!

3

I ran into a similar issue when developing a Figma plugin with React. The problem might be in how you’re setting up the message listener in ui.tsx. Instead of using a global onmessage, try adding an event listener to window:

useEffect(() => {
  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, []);

const handleMessage = (event: MessageEvent) => {
  const { type, message } = event.data.pluginMessage;
  if (type === 'FetchInfo') {
    console.log(message);
    // Handle the message here
  }
};

This approach worked for me. Make sure to wrap it in a useEffect hook if you’re using functional components. Also, double-check that your tsconfig.json includes the correct lib settings for DOM manipulation. Hope this helps!

4

I’ve been there, mate. Message passing in Figma plugins can be tricky. One thing that solved it for me was using a more robust event listener setup in ui.tsx. Try this:

useEffect(() => {
  const handleMessage = (event: MessageEvent) => {
    if (event.data.pluginMessage) {
      console.log('Received:', event.data.pluginMessage);
      // Handle your message here
    }
  };

  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, []);

This approach ensures you’re catching all messages, and it’s cleaner than a global onmessage. Also, double-check your webpack config if you’re using it. Sometimes it can interfere with message passing if not set up correctly.

Lastly, make sure you’re not accidentally overwriting the onmessage handler elsewhere in your code. That caught me out once. Keep at it, you’ll crack it soon!

5

I’ve encountered this issue before. One thing to check is the origin of your messages. In your code.ts, try specifying the target origin when posting messages:

figma.ui.postMessage({ “label”: figma.currentPage.selection[0].id }, { origin: ‘*’ });

Also, ensure you’re listening for messages in ui.tsx as soon as the component mounts. You might want to use a useEffect hook for this:

useEffect(() => {
const messageHandler = (event) => {
if (event.data.pluginMessage) {
console.log(event.data.pluginMessage);
// Handle your message here
}
};
window.addEventListener(‘message’, messageHandler);
return () => window.removeEventListener(‘message’, messageHandler);
}, );

This should help establish proper communication between your ui.tsx and code.ts files. Let me know if you still face issues after trying these changes.

6

yo, have u checked if ur using the right event type? sometimes it’s not ‘message’ but ‘onmessage’. try this in ur ui.tsx:

window.addEventListener(‘onmessage’, (event) => {
if (event.data.pluginMessage) {
console.log(‘got it:’, event.data.pluginMessage);
}
});

also, make sure ur not blocking the main thread somehow. that can mess things up too. good luck!