After the XD Plugin event I got inspired to see if I could write a react renderer for creating shapes in the scenegraph (think “react-native for XD”), and I got something working with basic GraphicNodes. It looks something like this:
const Shapes = () => (
<>
<RedRectangle width={100} height={100} />
<BlueEllipse radiusX={100} radiusY={100} />
<text fontSize={40} x={100} y={600} fill={new Color("#000")}>
This is some text content
</text>
</>
);
function createRectangle(selection) {
ReactXD.render(<Shapes />, selection.insertionParent);
}
The above renders a red rectangle, a blue ellipse and black text to the selected artboard. The props on the elements map to the attributes you can set on the GraphicNodes, with x and y being used with placeInParentCoordinates.
Why is this useful?
If you’re creating a large set of elements to render onto an artboard, using the regular api means you have a ton of code to write (and maintain). Instead of
const rectangle = new Rectangle();
rectangle.fill = new Color('red');
rectangle.width = 100;
rectangle.height = 1000;
scenegraph.insertionParent.add(rectangle);
rectangle.placeInParentCoordinates({x:10,y:10;};
You can just write:
const Rectangle = <rectangle color={new Color('red')} width={100} height={100} x={10} y={10} />
ReactXD.render(<Rectangle />, selection.insertionParent);
That saves a ton of code and it’s more readable, so if you’re working on something like the “Persona’s” plugin, which generates a ton of layers, then using React-XD will keep your code more maintainable.
Just a first version
This is just a first version. I haven’t checked support for more complex shapes or nested shapes (Paths should work fine, but groups might be more difficult) but I’ll continue working on it 
I made an example plugin so it’s easy to get started and try it out, you can get it here: https://github.com/Kilian/react-xd-example/
If you just want to use the React-XD library in your own document, it’s here: https://github.com/Kilian/react-xd-example/blob/master/lib/react-xd.js and I’ll move it to its own repository soon.
