Figma Support Forum

Rendering line/polygons into SVG via rest api

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?

You can export anything you want as SVG via the images endpoint: https://www.figma.com/developers/api#get-images-endpoint

Thanks, that’s perfect.