Pass shortcuts to Figma when focused on the plugin window and vice versa

Plugin and Widget API Feedback
1

When user does something in the plugin UI and then wants to undo it, it breaks the flow when Cmd/Ctrl + Z doesn’t work. Even I sometimes try to press it and nothing is happening, this makes me frustrated as a pro plugin and Figma user.

Currently you can implement undo manually by detecting the shortcut and communicating the undo action to the plugin backend — that’s not too hard. But things quickly become complicated if you want Redo to also function (since it’s not available in the API, you’ll have to build your own undo/redo queue). And then other shortcuts can be used by users in different contexts too.

It would create a good user experience if you can trigger shortcuts in Figma, either by passing them from the user action event somehow or by simply manually triggering them (the latter would also open up a lot of other possibilities).

In a similar way, it would be great if a plugin can get shortcuts when the plugin window is not in focus. This would create a seamless transition between the focus on Figma and the plugin window. This can be done in multiple ways:

  1. Via some special event that comes from Figma to the plugin backend or the UI every time the user presses any keyboard combinations (or maybe just the ones that include Cmd/Ctrl, for simplicity).

  2. A plugin could register some kind of special event with Figma that would only trigger when specific keys are pressed, or even any keys. For example figma.on("keydown", (event) => { console.log("Pressed " + event.key) }) (and the same for keyup).

  3. The simplest workaround for this might be allowing the user to press some key to focus on the plugin window. While this doesn’t create a completely seamless experience, it removes the need to use the mouse to focus on the plugin window that is keyboard-based.

Fellow developers, what workarounds for this are you using? I know Figmotion plugin is showing a prompt at the bottom saying “Plugin window not in focus, shortcuts won’t work”. And I’m thinking of adding some kind of toast message (like when you press Cmd/Ctrl + S in Figma) that would tell you you need to click outside of the plugin (maybe I’ll do window.blur() on the toast click too) to use Figma shortcuts. But there is no way to bring the focus back easily.

4 Likes
2

Here is my code for undo:

UI

  window.addEventListener("keydown", function (e) {
    if (e.key === "Escape") {
      // Close plugin when pressing Escape
      window.parent.postMessage({ pluginMessage: { type: "close" } }, "*");
    } else if (e.key === "z" && !e.shiftKey && !e.altKey) {
      // Undo the action in Figma
      const isMac = navigator.userAgent.indexOf("Macintosh") >= 0;
      const isCmd = isMac && e.metaKey && !e.ctrlKey;
      const isCtrl = !isMac && !e.metaKey && e.ctrlKey;
      if (isCmd || isCtrl) {
        window.parent.postMessage({ pluginMessage: { type: "undo" } }, "*");
      }
    }
  });

Backend

figma.ui.onmessage = (msg) => {
	switch (msg.type) {
		case "close":
			figma.closePlugin()
			break
		case 'undo':
			figma.triggerUndo()
			break
	}
}
2 Likes
3

This would be great!

5

I strongly upvote this, also shortcut actions like adding/removing containers, color picker, even space drag are constantly blocked by the plugin window as well which makes the workflow inconvenient

6

Is there a way to simply move focus back to the Figma document from the plugin? Then after you the plugin does it’s thing it could set the focus back to the document for undo/redo, etc.

But that command-Z trick is great, @Gleb!

7

No there isn’t.

8

Hmmm, after I posted this I saw the trick linked in this thread to send a message from the plugin to the UI which calls window.focus().

update ah, yes, that’s the opposite direction and window.blur() doesn’t seem to have nay affect. Thanks.

1 Like
9

at least it would be nice to have access to the Redo action in the PluginAPI

10

Any progress on this?