Absolute bounding box is the coordinates of the object relative to the canvas center (even if the object is nested in a frame) and width/height of a non-rotated rectangle that fully contains the object in it (if the object is not rotated/skewed, it would be the same as the regular bounding box of the object when you select it).

How do you do that ?

Do what?

Making it a bit more clearer…

1. 
   

   I am not using Figma interface/editor…just making API calls…

   
   


2. 
   

   Using API I retrieve the file of interest which I get as a JSON file., which describes pages/nodes and their “absoluteBoundingBox”

   
   


3. 
   

   I retrieve the “thumbnailUrl” of the file (i get a PNG file) and display it on my interface.

   
   

4.Now I want to draw bounding boxes for each each node (based on the data in JSON) on the displayed image.

So how do I identify the top left of my bounding box intended to be drawn from the given “absoluteBoundingBox” values …

Hope I am clear now.

@SK1 :

Let’s say you have a form with an input and a button:

Login Form (type=PAGE)

  '- Desktop (type=FRAME)

        '- Form (type=GROUP)

               |- Username (type=INSTANCE)

               |- ConfirmButton (type=INSTANCE)

               '- Background (type=RECTANGLE)

If I understand you correctly, you want to render a frame (or page) and draw bounding rectangles at the correct position.

Let’s say you render the “Desktop” frame above via the API, you can then render the rectangle for the “Username” node like this:

const desktopDiv = document.createElement('div');

desktopDiv.style.position = 'relative';

desktopDiv.style.width = `${frameInApiResponse.absoluteBoundingBox.width}.px`;

desktopDiv.style.height = `${frameInApiResponse.absoluteBoundingBox.height}.px`;

desktopDiv.background = `url(${urlOfRenderedFrame})`



const usernameDiv = document.createElement('div');

usernameDiv.style.position = "absolute";

usernameDiv.style.outline = "1px solid red";

usernameDiv.style.left = `${usernameInApiResponse.absoluteBoundingBox.x - frameInApiResponse.absoluteBoundingBox.x}px`;

usernameDiv.style.top = `${usernameInApiResponse.absoluteBoundingBox.y - frameInApiResponse.absoluteBoundingBox.y}px`;

usernameDiv.style.width = `${usernameInApiResponse.absoluteBoundingBox.width}px`;

usernameDiv.style.height = `${usernameInApiResponse.absoluteBoundingBox.height}px`;



desktopDiv.appendChild(usernameDiv);

document.body.appendChild(desktopDiv);

Thank you Leon1…you are pretty close…

but with a slight twist…

I will be trying to mark/draw the bounding boxes on the image of the document/page that I retrieve using “thumbnailUrl” key in the JSON.

So I need to get the (x,y) on the PNG file from the “absoluteBoundingBox” info of the node in question.

for eg,

1. in JSON i get …id:'1:6",…“absoluteBoundingBox”:{x:-507,y:-404,w:140,h:50}…


2. I have the “thumbnailUrl” displayed (PNG file)…BTW, is this PNG file scaled in anyway ?


3. I want to draw a bounding box on the image from the given data in (1)

Point is, the absoluteBoundingBox is… well, in absolute coordinates.

So if you want to get the relative position of an element B inside the element A for which you render the PNG, you need to subtract:

const x = B.absoluteBoundingBox.x - A.absoluteBoundingBox.x;

const y = B.absoluteBoundingBox.y - B.absoluteBoundingBox.y;

const width = B.absoluteBoundingBox.width;

const height = B.absoluteBoundingBox.height;



somehowRenderARectangle(renderedPngOfA, x, y, width, height);

To the question in your reply:

You can provide a scale query parameter on your request to the images endpoint, e.g. GET https://api.figma.com/v1/images/:fileKey?scale=2

Thanx Leo…will do some more exploration with the details given by you…I am trying to work off the document->thumbnailUrl image…whose top left will be (0,0) and many “absoluteBoundingBox” in JSON are negative…so may be i need to do some ‘work’ to correlate these to the image coordinates…(based on n0,0])…Thanx indeed for your clues…

Hi, Just to bring a closure…

Confusion was that I was just adding shapes onto the canvas itself …my bad…without using a frame to add elements…so shapes were directly on the canvas…and CANVAS element in JSON doesnt have “absoluteBoundingBox” …so the JSON bounding boxes of elements/shapes were without any parent reference…now that I added a FRAME to contain these …it is all looking good and i can pinpoint the top left, bottom right of each shape precisely on the exported PNG to draw bounding rectangles in my interface…Pretty new to FIGMA…Thank you.