That’s weird. Seems like a bug so it may be better to report it directly to Figma support team via support@figma.com or the support request form.

Thanks, will do. In a way it isn’t that important, i’m more a software tester turned dev, i’m writing a little tool that converts my figma drawing to a functional React component. My use case was more to just test different properties, more of an academic issue.

Thanks for your attention.

Oh got it! It returns the absolute bounding box, so this behavior is to be expected, not really a bug. It would’ve been better if it returned all object dimensions though, like rotation and real width/height. Not sure why they made it work this way instead.

Thanks for the response. My main concern is the JSON doesn’t maintain the fidelity of the drawing. I’d be fine if the rotate property isn’t output at all for my use case actually. The issue for me is that as i’m using Figma effectively as a form designer to create React && CSS files from my drawing, forgot to say I am lazy 🙂. For my use case 99.999% of the time i’d be happy with the true width && height were persisted in the JSON not contain a rotate value, that actually would be better for me. But then I’d expect the Height/Width to not be altered if rotate was never emitted. Note in the screen shots provided the CSS value displayed within Figma appear correct, H 24 W 184 with a rotate of 33deg. However, when persisted to JSON the resulting JSON is H 120 and W 184 effectively asserting (24x184) === (120 x 184). Might be me but it seems this would never be desirable. Or thinking about an an easy fix, might be a bit kludgy but how about emitting another secion on the JSON say 'rawControlDimensions" if/when rotate is present? Might be the easiest cleanest way not to break others but still emit the correct values for those who need it?

Anyway thinks for your attention, really do like Figma turning a lot of my friend on to it 🙂

Cheers,

dan:)

I just read the docs, and it looks like you should also be getting size and relativeTransform properties of the node which should be enough. Are you not getting those?

Thanks for a quick response. You do sleep? Double checking the JSON emitted for the element, not seeing either ‘relativeTransform’ nor ‘size’ in the JSON. Double checking to be suse the values i’m seeingm it is the same as reported in the original message. Also want to be clear, the ‘absoluteBoundingBox’ was altered by me when trying to bold the height, that would be the only difference from what i’m seeing persisted and reported in the messages, didn’t want to add confusion, but i’m a noob at the message board options 😎.

Again, thanks for the help, speaking from past experience and knowing my luck, maybe i hit an edge case feel free to look at my drawing, copied one so you could look at it in case. Assuming you could easily access my account the drawing URL would be (created this for you all to look at if needed):

Thanks,

dan d:)

Yeah I just tried it and it seems like the API it doesn’t give out all the fields listed in the docs. I tried getting the full file using /file/:key and then a specific node using /file/:key/nodes=125:27 endpoint. I don’t understand what’s wrong…

Solution.

Ok turns out I just needed to read the docs better. When getting a specific node by id, you also need to specify &geometry=paths query parameter. This returns all the necessary data, such as size and transform matrix. For this specific node:

{

	"name": "EditUser (Copy)",

	"lastModified": "2021-02-18T23:24:52Z",

	"thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/8a442f2d-25f5-46bb-8d40-807518fb3424?Expires=1614556800&Signature=E0c-96j8CT9TK2isSj7j2CJSdvQdrnmbP1IgrJnN3KQp0lNIavvaF0mfs05rk9YMaezMCFXX0ilAZiRUjF26x6FDp4AaNH3EagweGXeD7xVZQX1ZfzulcRQ7yrMN6X8shhjMIETltMJV9rYU4EGxq8IXq3uVtu4Q7G~dTlKh6wSAbjMCuTLtpP44nXtc1pjZz36nvbwMa0XZbrkRU6tLwQmctdEDY5t8mn58iUGL6C9ldV3Joi-PCb5iVZDbNORbk~TuskZ2gxIeGMnsjTq-VsUWob3~IRCMj6S14F2yLfOwJZf6DoNXjypBUOHJiyH6UVwPK3aniDeFoBstLVlI7A__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",

	"version": "686304844",

	"role": "editor",

	"nodes": {

		"125:27": {

			"document": {

				"id": "125:27",

				"name": "lastNameField",

				"type": "RECTANGLE",

				"blendMode": "PASS_THROUGH",

				"absoluteBoundingBox": {

					"x": 464.59423828125,

					"y": 188.33920288085938,

					"width": 167.38670349121094,

					"height": 120.3416748046875

				},

				"constraints": { "vertical": "TOP", "horizontal": "LEFT" },

				"relativeTransform": s

					/0.83867049217224121, 0.54463905096054077, 464.59423828125],

					/

						-0.54463905096054077,

						0.83867049217224121,

						288.55279541015625

					]

				],

				"size": { "x": 184.0, "y": 24.0 },

				"fills": f

					{

						"blendMode": "NORMAL",

						"type": "SOLID",

						"color": {

							"r": 0.99583333730697632,

							"g": 0.99583333730697632,

							"b": 0.99583333730697632,

							"a": 1.0

						}

					}

				],

				"fillGeometry": m

					{

						"path": "M0 7C0 3.13401 3.13401 0 7 0L177 0C180.866 0 184 3.13401 184 7L184 17C184 20.866 180.866 24 177 24L7 24C3.13401 24 0 20.866 0 17L0 7Z",

						"windingRule": "NONZERO"

					}

				],

				"strokes": r

					{

						"blendMode": "NORMAL",

						"type": "SOLID",

						"color": { "r": 0.0, "g": 0.0, "b": 0.0, "a": 1.0 }

					}

				],

				"strokeWeight": 1.0,

				"strokeAlign": "INSIDE",

				"strokeGeometry": m

					{

						"path": "M7 1L177 1L177 -1L7 -1L7 1ZM183 7L183 17L185 17L185 7L183 7ZM177 23L7 23L7 25L177 25L177 23ZM1 17L1 7L-1 7L-1 17L1 17ZM7 23C3.68629 23 1 20.3137 1 17L-1 17C-1 21.4183 2.58173 25 7 25L7 23ZM183 17C183 20.3137 180.314 23 177 23L177 25C181.418 25 185 21.4183 185 17L183 17ZM177 1C180.314 1 183 3.68629 183 7L185 7C185 2.58172 181.418 -1 177 -1L177 1ZM7 -1C2.58172 -1 -1 2.58172 -1 7L1 7C1 3.68629 3.68629 1 7 1L7 -1Z",

						"windingRule": "NONZERO"

					}

				],

				"effects": f],

				"cornerRadius": 7.0,

				"rectangleCornerRadii": R7.0, 7.0, 7.0, 7.0]

			},

			"components": {},

			"schemaVersion": 0,

			"styles": {}

		}

	}

}

The full command I used: curl -sH 'X-Figma-Token: YOUR-TOKEN' 'https://api.figma.com/v1/files/6LbL35bbnCvcrWZm6qSPE6/nodes?ids=125:27&geometry=paths' > figma.json

Ah makes sense, now i’m wondering if i might be working into a feature request instead… Would be great to have a query parameter say ‘&css=true’ or “&markup=mcss|ios|android]”? The parameter would ask Figma to emit the markup and desired format.

Ultimately, the CSS is exactly what i’m after, looking at “Inspect” everything is all there and properly deciphered so i can be lazy 😎 Just seems users shouldn’t need to re-invent the wheel as all the info is already available in Figma and should easily be provided if requested… Also for say gradients there doesn’t appear a clear to map the raw data in the model to what the respective markup would be… Not to mention, while i may never happen, what if your persisting model format need to change, while it would always result in the CSS, if one could explicitly look for a “cssFormat” node, we would be protected as the CSS would be a product of what the model would describe…?

For a user which is easier to use…

This CSS:

position: absolute;

width: 184px;

height: 24px;

left: 139.98px;

top: 190.36px;

background: linear-gradient(90deg, #FF0000 0.01%, rgba(255, 255, 255, 0) 17.95%), linear-gradient(90deg, #66DF2D 19.03%, rgba(255, 255, 255, 0) 38.87%), linear-gradient(90deg, #27EECA 38.6%, rgba(255, 255, 255, 0) 68.76%), linear-gradient(90deg, #BD09DA 69.58%, rgba(58, 208, 255, 0) 100.01%);

opacity: 0.5;

border: 1px solid #061DEF;

box-sizing: border-box;

backdrop-filter: blur(32px);

border-radius: 5px;

Or…

“fills”:

�

{

“blendMode”:“NORMAL”,

“type”:“GRADIENT_LINEAR”,

“gradientHandlePositions”:

N

{

“x”:0.69576449092556913,

“y”:0.48512256237057017

},

{

“x”:1.0001123958844771,

“y”:0.48512251995311217

},

{

“x”:0.69576443643059271,

“y”:9.4295686284203857

}

],

“gradientStops”:

�

{

“color”:

{

“r”:0.73982512950897217,

“g”:0.035307884216308594,

“b”:0.85451382398605347,

“a”:1.0

},

“position”:0.0

},

{

“color”:

{

“r”:0.22881925106048584,

“g”:0.81491643190383911,

“b”:1.0,

“a”:0.0

},

“position”:1.0

}

]

},

/* snipp… */

Thanks again for the help.

Yep, that would be nice. And I saw this requested before in other places. You can create a feature request in the #product-ideas category so people with the same issue could vote for it.

Thanks will create a product request. Really appreciate the help 😎

As promised, in case you’d be curious to add any comments Gleb. Again thanks for the help 😎

After getting the relativeTransform data, how can I find the right angle? I tried

 Math.atan2(

        rectangle.relativeTransform[0][0],

        rectangle.relativeTransform[1][0]

      )

But it didn’t work.