Skip to main content

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


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.


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



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

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


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?


The render bounds are affected by strokes, effects.


Reply