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

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:):

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).

5 Likes