I want to create a rectangle with shadows of a certain color and XYB values from the panel. How do I do that?

Adobe XD UXP Plugin API
1

Basically creating a plugin for neumorphic designs, and couldn’t find how to add shadows to a shape/text from JavaScript. Anyone have any idea how to go about this?

1 Like
2

https://adobexdplatform.com/plugin-docs/reference/Shadow.html

3

First of all: Welcome to the forums, @boron :wave::slightly_smiling_face:.

The scenegraph module contains two classes, Shadow and Color, that you’ll need to import in order to achieve this:

const { Shadow, Color } = require('scenegraph');

Assuming you have x, y, b as numbers, you then can instantiate a new Shadow instance with these values:

const shadowColor = new Color('#232323', 0.3); // 0.3 opacity
const myShadow = new Shadow(x, y, b, shadowColor);

(you can, of course, adjust the color values to your liking :wink:)

After that, you can simply “apply” that shadow to your rectangle (cf. scenegraph · Adobe XD Plugin Reference):

myRectangleNode.shadow = myShadow;

I hope this helps,
Happy coding,
Pablo

@tomzag Come on, let’s not begin this practice of simply pasing a link (that, to new developers, doesn’t even make it clear that this is a part of the scenegraph module) as an answer here :stuck_out_tongue_winking_eye:.

1 Like
4

Thank you so much! Just one more thing: is it possible to get the background color of the Artboard and set that as fill color for a shape/text?

5

@tomzag Come on, let’s not begin this practice of simply pasing a link (that, to new developers, doesn’t even make it clear that this is a part of the scenegraph module) as an answer here

You are totally right. I assumed he is looking only for the reference in the documentation and it was the last thing I did before I went to bed. Sorry.

2 Likes
6

That’s alright :wink:. Just wanted to “intervene” quickly before all of us suddenly get into the habit of doing it. I try to fight against “Already answered here: broken link”, “+1”, etc. comments finding their way into this forum.

Usually, yes. Artboard extends GraphicNode, which has a fill property. This can be a Color, in which case you could use it, but it is also possible that it is

  • a LinearGradientFill
  • null, if the fill is disabled
  • a RadialGradientFill
  • an ImageFill

Probably the best way to check if it is a color would be to use

if (myArtboard.fill && myArtboard.fill instanceof Color) {
  const newColor = myArtboard.fill.clone() // cf. https://adobexdplatform.com/plugin-docs/reference/Color.html#Color-clone
  // use newColor:
  myNode.fill = newColor;
} else {
  // handle case where artboard doesn't have a solid `fill`
}

You will, however, have to decide how to handle these non-trivial cases (default color? first color of a gradient? Then: what if it’s an ImageFill etc.)