Skip to main content
Solved

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

A

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
                                        ]
                                    }

Best answer by tank666

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

View original
This topic has been closed for comments

6 replies

tank666
  • tank666
  • 4868 replies
  • February 1, 2024

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:

render-and-bounding-box

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/@tank666
A

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
                                    }
                                ]
                            }
A

boundingboxbiggerthanrenderbound

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
                                    }
                                ]
                            }
tank666
  • tank666
  • 4868 replies
  • Answer
  • February 1, 2024

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/@tank666
A

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
  • tank666
  • 4868 replies
  • February 1, 2024

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/@tank666
A
1 person likes this
  • A
    Aniekan_Akai
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings