Tool to create screenshots of panel plugins (Windows-only, for now!)

Adobe XD UXP Plugin API
1

Hi everyone,

I just wanted to quickly write here that I’ve just written and released a small NodeJS-based tool to create screenshots of panel plugins for XD, as I was growing tired of always having to crop the screenshots manually :wink:.

:warning: The tool is tested on Windows only. I would assume that it needs some slight adjustments to make it work on macOS, but it shouldn’t be too difficult. The plugin looks through pixel color values to find the panel’s dimensions, which might be slightly different on macOS.

You can find the project here:

and install it via npm:

$ npm i -g @pklaschka/xd-panel-screenshot

After that, you can use it like this:

  1. Open your plugin’s panel inside an Adobe XD window
  2. Run
    $ xd-panel-screenshot
  3. Follow the instructions (focus on the XD window)
  4. Let the tool do its magic
  5. Find a perfect screenshot of your panel in the directory in which you executed that command.

As I’m currently in a prerelease stage and want to keep the suspense by publishing some sneak peeks for that plugin on Twitter, I can’t share my plugin here, for now. Therefore, I’ve attached a screenshot of @cpryland’s Layers 4 Developers plugin; @cpryland I hope you don’t mind :slightly_smiling_face:):

Screenshot showing a plugin panel
Screenshot showing a plugin panel278×673 6.47 KB

Maybe somebody finds it useful.

Anyway, if you have any issues with it, please feel free to let me know here or open an issue on GitHub (or, ideally, a PR fixing the problem).

6 Likes
2

A bit late, but of course I don’t mind—public plugin after all. :wink:

Nice tool—wonder if it works under macOS?

1 Like
3

Thank you :slightly_smiling_face:

Unfortunately, right now, probably not. I, right now, don’t have an up-to-date macOS test system, and therefore, can’t adjust the values to work for macOS.

It should, however, probably, not be too difficult to adjust a few values (color and width of some of XD’s interface) to work on any system. I basically measured which color changes XD’s UI has on WIndows and calculated the plugin’s bounds through that (~ “take the leftmost pixel with this color, pass to changes of color to the right, and you’re at the left bound, then move to the right until the next change of color and you’re at the right border of the panel”).