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
First of all: Welcome to the forums, @boron 
.
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 
)
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 
.
1 Like
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?
@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
scenegraphmodule) 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
That’s alright . 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.)