Adobe Xd API - Adding filter

Dear Adobe XD Community,

Appreciate if you can help me with the following.

What we want to achieve:
We have an image that the user has added to the design. We have applied a filter and want to fill the image with the modified pixels.

We are following the example in “ImageFill · Adobe XD Plugin Reference” but it does not work.
Basically what we do is

  1. changing it to base64
  2. apply filter
  3. fill the image with base64 again.

The error we receive is “Error: Panel plugin edits must be initiated from a supported UI event”.

It’s the part of our code:

let imageFile = await xhrBinary(url, src, type, node.width, node.height)
// Create ImageFill for this image
const ImageFill = require("scenegraph").ImageFill;
let fill = new ImageFill(imageFile);
selection.items = node
selection.items[0].fill = fill;

You may need to wrap your code inside of an editDocument call.

https://adobexdplatform.com/plugin-docs/reference/core/lifecycle.html#edit-operations

1 Like