I have a use case where I have to convert figma Nodes into SVG (if possible). For example, convert line, polygon etc into SVG, so it can be rendered into browser.
The response I get from Figma rest api looks something like this -
{
“id”: “205:1”,
“name”: “Line 3”,
“type”: “LINE”,
“blendMode”: “PASS_THROUGH”,
“absoluteBoundingBox”: {
“x”: 138,
“y”: 378,
“width”: 133,
“height”: 51.000003814697266
},
“constraints”: {
“vertical”: “TOP”,
“horizontal”: “LEFT”
},
“fills”: ,
“strokes”: [
{
“blendMode”: “NORMAL”,
“type”: “SOLID”,
“color”: {
“r”: 0,
“g”: 0,
“b”: 0,
“a”: 1
}
}
],
“strokeWeight”: 1,
“strokeAlign”: “CENTER”,
“effects”:
}
Corrosponding CSS I can copy from Figma is -
/* Line 3 */
position: absolute;
width: 142.44px;
height: 0px;
left: 40px;
top: 98px;
border: 1px solid #000000;
transform: rotate(-20.98deg);
How do I calculate the transform angle here? All I have is x, y, height and width. How do I calculate the entire path for SVG? Line is a simple example. What about polygons? Is there a field that gives all the stroke co-ordinates?
