Solved

In API response, render bound > bounding box but no difference is seen in Figma

6 replies
669 views

In API response snippet to this Figma Design (https://www.figma.com/file/MruzGhJeyldwnG3HgxtUXk/SimpleTestFile?type=design&node-id=247%3A10&mode=design&t=L15KhW3qjdCHUB9L-1 ) below, the render bounds are larger than the bounding box but there is no visible indication of this in the Figma design editor. Why does the API give this response and what other situations is this behaviour seen?

{
                                        "id": "247:25",
                                        "name": "White Towels",
                                        "type": "TEXT",
                                        "scrollBehavior": "SCROLLS",
                                        "blendMode": "PASS_THROUGH",
                                        "absoluteBoundingBox": {
                                            "x": -378.0,
                                            "y": -125.0,
                                            "width": 367.0,
                                            "height": 41.0
                                        },
                                        "absoluteRenderBounds": {
                                            "x": -377.4531250,
                                            "y": -119.0,
                                            "width": 188.81250,
                                            "height": 24.31250
                                        },
                                        "constraints": {
                                            "vertical": "TOP",
                                            "horizontal": "LEFT"
                                        },
                                        "fills": [
                                            {
                                                "blendMode": "NORMAL",
                                                "type": "SOLID",
                                                "color": {
                                                    "r": 1.0,
                                                    "g": 1.0,
                                                    "b": 1.0,
                                                    "a": 1.0
                                                }
                                            }
                                        ],
                                        "strokes": [],
                                        "strokeWeight": 1.0,
                                        "strokeAlign": "OUTSIDE",
                                        "effects": [],
                                        "characters": "White Towels",
                                        "style": {
                                            "fontFamily": "Roboto",
                                            "fontPostScriptName": "RobotoRoman-Bold",
                                            "fontWeight": 700,
                                            "fontSize": 32.0,
                                            "textAlignHorizontal": "LEFT",
                                            "textAlignVertical": "TOP",
                                            "letterSpacing": 0.0,
                                            "lineHeightPx": 37.50,
                                            "lineHeightPercent": 100.0,
                                            "lineHeightUnit": "INTRINSIC_%"
                                        },
                                        "layoutVersion": 4,
                                        "characterStyleOverrides": [],
                                        "styleOverrideTable": {},
                                        "lineTypes": [
                                            "NONE"
                                        ],
                                        "lineIndentations": [
                                            0
                                        ]
                                    }

APIs

This topic has been closed for replies.

tank666Solution

The render bounds are larger than the bounding box due to the “Drop shadow” effect applied to the frame.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

tank666

Aniekan_Akai:

"absoluteBoundingBox": {
    "x": -378.0,
    "y": -125.0,
    "width": 367.0,
    "height": 41.0
},
"absoluteRenderBounds": {
    "x": -377.4531250,
    "y": -119.0,
    "width": 188.81250,
    "height": 24.31250
}

In fact, as you can see from the API response, the render bounds is smaller than the bounding box.

I also looked at your file, and I can say for sure that the render in the editor is completely consistent with the API response above. See screenshot:

Blue rectangle: bounding box.
Yellow rectangle: render bounds.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Aniekan_AkaiAuthor

Sorry I just realised i included the wrong snippet, I am referring to the render bounds and bounding box for the frame

                          {
                                "id": "247:26",
                                "name": "row1_control",
                                "type": "FRAME",
                                "scrollBehavior": "SCROLLS",
                                "boundVariables": {
                                    "fills": [
                                        {
                                            "type": "VARIABLE_ALIAS",
                                            "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                        }
                                    ]
                                },
                                "blendMode": "PASS_THROUGH",
                                "children": [...]
                                "absoluteBoundingBox": {
                                    "x": -386.0,
                                    "y": -191.0,
                                    "width": 753.0,
                                    "height": 52.0
                                },
                                "absoluteRenderBounds": {
                                    "x": -390.0,
                                    "y": -193.0,
                                    "width": 761.0,
                                    "height": 60.0
                                },
                                "constraints": {
                                    "vertical": "TOP",
                                    "horizontal": "LEFT"
                                },
                                "layoutSizingHorizontal": "FIXED",
                                "layoutSizingVertical": "FIXED",
                                "clipsContent": true,
                                "background": [
                                    {
                                        "blendMode": "NORMAL",
                                        "type": "SOLID",
                                        "color": {
                                            "r": 0.82745099067687988,
                                            "g": 0.82745099067687988,
                                            "b": 0.82745099067687988,
                                            "a": 1.0
                                        },
                                        "boundVariables": {
                                            "color": {
                                                "type": "VARIABLE_ALIAS",
                                                "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                            }
                                        }
                                    }
                                ],
                                "fills": [
                                    {
                                        "blendMode": "NORMAL",
                                        "type": "SOLID",
                                        "color": {
                                            "r": 0.82745099067687988,
                                            "g": 0.82745099067687988,
                                            "b": 0.82745099067687988,
                                            "a": 1.0
                                        },
                                        "boundVariables": {
                                            "color": {
                                                "type": "VARIABLE_ALIAS",
                                                "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                            }
                                        }
                                    }
                                ],
                                "strokes": [],
                                "cornerRadius": 8.0,
                                "cornerSmoothing": 0.0,
                                "strokeWeight": 1.0,
                                "strokeAlign": "INSIDE",
                                "backgroundColor": {
                                    "r": 0.82745099067687988,
                                    "g": 0.82745099067687988,
                                    "b": 0.82745099067687988,
                                    "a": 1.0
                                },
                                "layoutMode": "HORIZONTAL",
                                "counterAxisSizingMode": "FIXED",
                                "itemSpacing": 10.0,
                                "primaryAxisSizingMode": "FIXED",
                                "counterAxisAlignItems": "CENTER",
                                "paddingLeft": 8.0,
                                "paddingRight": 8.0,
                                "paddingTop": 8.0,
                                "paddingBottom": 8.0,
                                "layoutWrap": "NO_WRAP",
                                "effects": [
                                    {
                                        "type": "DROP_SHADOW",
                                        "visible": true,
                                        "color": {
                                            "r": 0.0,
                                            "g": 0.0,
                                            "b": 0.0,
                                            "a": 0.250
                                        },
                                        "blendMode": "NORMAL",
                                        "offset": {
                                            "x": 0.0,
                                            "y": 2.0
                                        },
                                        "radius": 4.0,
                                        "showShadowBehindNode": false
                                    }
                                ]
                            }

Aniekan_AkaiAuthor

Point of correction: This is the part that has the render bound > bounding box. Here is the actual JSON response

                          {
                                "id": "247:26",
                                "name": "row1_control",
                                "type": "FRAME",
                                "scrollBehavior": "SCROLLS",
                                "boundVariables": {
                                    "fills": [
                                        {
                                            "type": "VARIABLE_ALIAS",
                                            "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                        }
                                    ]
                                },
                                "blendMode": "PASS_THROUGH",
                                "children": [...]
                                "absoluteBoundingBox": {
                                    "x": -386.0,
                                    "y": -191.0,
                                    "width": 753.0,
                                    "height": 52.0
                                },
                                "absoluteRenderBounds": {
                                    "x": -390.0,
                                    "y": -193.0,
                                    "width": 761.0,
                                    "height": 60.0
                                },
                                "constraints": {
                                    "vertical": "TOP",
                                    "horizontal": "LEFT"
                                },
                                "layoutSizingHorizontal": "FIXED",
                                "layoutSizingVertical": "FIXED",
                                "clipsContent": true,
                                "background": [
                                    {
                                        "blendMode": "NORMAL",
                                        "type": "SOLID",
                                        "color": {
                                            "r": 0.82745099067687988,
                                            "g": 0.82745099067687988,
                                            "b": 0.82745099067687988,
                                            "a": 1.0
                                        },
                                        "boundVariables": {
                                            "color": {
                                                "type": "VARIABLE_ALIAS",
                                                "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                            }
                                        }
                                    }
                                ],
                                "fills": [
                                    {
                                        "blendMode": "NORMAL",
                                        "type": "SOLID",
                                        "color": {
                                            "r": 0.82745099067687988,
                                            "g": 0.82745099067687988,
                                            "b": 0.82745099067687988,
                                            "a": 1.0
                                        },
                                        "boundVariables": {
                                            "color": {
                                                "type": "VARIABLE_ALIAS",
                                                "id": "VariableID:cd8b39aca6f7b5dbc14f6f1424a78c9630d9918c/248:15"
                                            }
                                        }
                                    }
                                ],
                                "strokes": [],
                                "cornerRadius": 8.0,
                                "cornerSmoothing": 0.0,
                                "strokeWeight": 1.0,
                                "strokeAlign": "INSIDE",
                                "backgroundColor": {
                                    "r": 0.82745099067687988,
                                    "g": 0.82745099067687988,
                                    "b": 0.82745099067687988,
                                    "a": 1.0
                                },
                                "layoutMode": "HORIZONTAL",
                                "counterAxisSizingMode": "FIXED",
                                "itemSpacing": 10.0,
                                "primaryAxisSizingMode": "FIXED",
                                "counterAxisAlignItems": "CENTER",
                                "paddingLeft": 8.0,
                                "paddingRight": 8.0,
                                "paddingTop": 8.0,
                                "paddingBottom": 8.0,
                                "layoutWrap": "NO_WRAP",
                                "effects": [
                                    {
                                        "type": "DROP_SHADOW",
                                        "visible": true,
                                        "color": {
                                            "r": 0.0,
                                            "g": 0.0,
                                            "b": 0.0,
                                            "a": 0.250
                                        },
                                        "blendMode": "NORMAL",
                                        "offset": {
                                            "x": 0.0,
                                            "y": 2.0
                                        },
                                        "radius": 4.0,
                                        "showShadowBehindNode": false
                                    }
                                ]
                            }

tank666Solution

The render bounds are larger than the bounding box due to the “Drop shadow” effect applied to the frame.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Aniekan_AkaiAuthor

That seems to be it. Thank you very much.
Do you know of other effects that do that do this? Also the effect doesn’t seem very visible, is that normal?

tank666

The render bounds are affected by strokes, effects.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Sign up

Login with SSO

Login to the community

Login with SSO