How do I correctly represent/scale coordinates from Adobe XD to aframe?

Question

I'm trying to correctly represent/scale coordinates from Adobe XD to aframe.

This is how I'm doing it at the moment: 1. Uploading image related data (coordinates, width, height) and the image itself as formData to server. 2. Generate for generating after assests are done. 3. Generate entities using array.map. 4. The Entities and everything generates and renders just fine. But I'm noticing some difference in coordinates. Hence scaling is not being done correctly. Expecting output to show an accurate representation of images, while the data source of coordinates and images itself is Adobe XD.

//The closest result I have been able to get is by this:
    const x = coordinates.x - XDArtboardWidth;
    const y = XDArtboardHeight - coordinates.y;

//And apply scaling of 0.01 0.01 0.01 to the Parenty entity component.


//Example data.
  // {
  //   "group": {
  //     "artboard": "ui/1",
  //     "artboardHeight": 1410,
  //     "artboardWidth": 2820,
  //     "children": [
  //       {
  //         "coordinates": {
  //           "x": 780,
  //           "y": 157
  //         },
  //         "guid": "5c88c834-355e-48a5-8266-dfb4f03e4f35",
  //         "isParentArtboard": false,
  //         "isParentGroup": true,
  //         "name": "top-right",
  //         "parent": "Group 3"
  //       }
  //     ],
  //     "name": "Group 3"
  //   }
  // }

const Entities = () => {
    return (
      <>
        {currnetUiChild.map((uiGroup, i) => {
          return uiGroup.children.map((ui, i) => {
            const width = ui.coordinates.width;
            const height = ui.coordinates.height;
            console.log(ui.coordinates, " =====");
            const x = ui.coordinates.x - activeUiArtboardWidth;
            const y = activeUiArtboardHeight - ui.coordinates.y;
            return (
              <Entity
                side="double"
                src={`#${ui.guid}`}
                primitive="a-plane"
                width={width}
                height={height}
                position={{ x: x, y: y, z: 0 }}
              />
            );
          });
        })}
      </>
    );
  };

//see images below for reference

Adobe XD image VR Image

Answer 1

Adobe XD origin of coordinates is top-left and elements local origin is at the center. Also Adobe X y-axis is positive down while A-Frame is positive up. Offset the x , y coordinates and flip the Y axis with the following formulas:

x = x + ElementWidth / 2 - ArtboardWidth / 2;

y = - (y + ElementHeight / 2) + ArtboardHeight;

Finally you will need to scale down element positions and sizes. In A-Frame 1 unit is equivalent to 1m.