bboxify

About this plugin

Tools like Nuke often require bounding boxes to position, crop, animate (etc.) elements. One way to send bounding box values to Nuke is bundling the x/y positions, width and height into a comma-separated string, such as:

"1189.390625,492,379.609375,78"

The order of these values is always the same:

1. x position
2. y position
3. width
4. height

The bounding box can be previewed based on this in tools like Nuke, however, if these values are generated and sent from eg. a Javascript app, it could get a little tricky to accurately view and check these bounding boxes as they may be influenced by certain CSS parameters.

This little plugin aims to solve this. Drop an image into Figma on which you'd like to check the bounding boxes, then right-click on it -> Plugins -> bboxify to start the plugin. You can search for it and install it from Figma's Community page if you don't have it yet.

After starting the plugin, all you need to do it enter the bounding box values into the input field. 4 values (following the above-mentioned order) represent one full rectangle. Make sure each value is separated by a comma.

You may also enter more than 4 values in which case more than one rectangle will be created. For example, if you enter 12 values, 3 rectangles will be created (as 3x4 = 12), which may be useful if you're generating bounding boxes around each character of a text element. The order of each value will be the same in this case as well, just repeated:

1. x position of 1st rectangle
2. y position of 1st rectangle
3. width of 1st rectangle
4. height of 1st rectangle
5. x position of 2nd rectangle
6. y position of 2nd rectangle
7. width of 2nd rectangle
8. height of 2nd rectangle

etc.

This means you don't have to manually create rectangles one-by-one in Figma to double-check the accuracy of the boxes you generate on the frontend.