I was trying to export all VectorNode properties via ExportSettingsREST, but vectorNetwork or vectorPaths are missing - it’s impossible to reproduce vector node in my app.
Result of export:
"document": {
"id": "705:96",
"name": "Vector",
"type": "VECTOR",
"scrollBehavior": "SCROLLS",
"blendMode": "PASS_THROUGH",
"absoluteBoundingBox": {
"x": 568.91259765625,
"y": -1029.65625,
"width": 258.1748046875,
"height": 49.3125
},
"absoluteRenderBounds": {
"x": 568.91259765625,
"y": -1029.65625,
"width": 258.1748046875,
"height": 49.3125
},
"constraints": {
"vertical": "CENTER",
"horizontal": "CENTER"
},
"fills": [
{
"blendMode": "NORMAL",
"type": "SOLID",
"color": {
"r": 0,
"g": 0,
"b": 0,
"a": 1
}
}
],
"strokes": [],
"strokeWeight": 1,
"strokeAlign": "OUTSIDE",
"styles": {
"fill": "1:30"
},
"effects": []
},
"components": {},
"componentSets": {},
"schemaVersion": 0,
"styles": {
"1:30": {
"key": "9a91b6fc0f9bcda3f2e07cbe92c52d9b688d151c",
"name": "Content/Primary",
"styleType": "FILL",
"remote": true,
"description": ""
}
}
}```
And that VectorNode as SVG:
```<svg width="260" height="50" viewBox="0 0 260 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.9126 25C48.9126 38.2548 38.1674 49 24.9126 49C11.6578 49 0.912598 38.2548 0.912598 25C0.912598 11.7452 11.6578 1 24.9126 1C38.1674 1 48.9126 11.7452 48.9126 25Z" fill="black"/>
<path d="M77.564 49V1H87.7124V40.6328H108.291V49H77.564Z" fill="black"/>
<path d="M157.251 25C157.251 30.2344 156.259 34.6875 154.275 38.3594C152.306 42.0312 149.619 44.8359 146.212 46.7734C142.822 48.6953 139.009 49.6562 134.775 49.6562C130.509 49.6562 126.681 48.6875 123.291 46.75C119.9 44.8125 117.22 42.0078 115.251 38.3359C113.283 34.6641 112.298 30.2188 112.298 25C112.298 19.7656 113.283 15.3125 115.251 11.6406C117.22 7.96875 119.9 5.17188 123.291 3.25C126.681 1.3125 130.509 0.34375 134.775 0.34375C139.009 0.34375 142.822 1.3125 146.212 3.25C149.619 5.17188 152.306 7.96875 154.275 11.6406C156.259 15.3125 157.251 19.7656 157.251 25ZM146.962 25C146.962 21.6094 146.455 18.75 145.439 16.4219C144.439 14.0938 143.025 12.3281 141.197 11.125C139.369 9.92188 137.228 9.32032 134.775 9.32032C132.322 9.32032 130.181 9.92188 128.353 11.125C126.525 12.3281 125.103 14.0938 124.087 16.4219C123.087 18.75 122.587 21.6094 122.587 25C122.587 28.3906 123.087 31.25 124.087 33.5781C125.103 35.9062 126.525 37.6719 128.353 38.875C130.181 40.0781 132.322 40.6797 134.775 40.6797C137.228 40.6797 139.369 40.0781 141.197 38.875C143.025 37.6719 144.439 35.9062 145.439 33.5781C146.455 31.25 146.962 28.3906 146.962 25Z" fill="black"/>
<path d="M196.597 16.5156C196.269 15.375 195.808 14.3672 195.214 13.4922C194.621 12.6016 193.894 11.8516 193.035 11.2422C192.191 10.6172 191.222 10.1406 190.128 9.8125C189.05 9.48438 187.855 9.32032 186.542 9.32032C184.089 9.32032 181.933 9.92969 180.074 11.1484C178.23 12.3672 176.792 14.1406 175.761 16.4688C174.73 18.7812 174.214 21.6094 174.214 24.9531C174.214 28.2969 174.722 31.1406 175.738 33.4844C176.753 35.8281 178.191 37.6172 180.05 38.8516C181.91 40.0703 184.105 40.6797 186.636 40.6797C188.933 40.6797 190.894 40.2734 192.519 39.4609C194.16 38.6328 195.41 37.4688 196.269 35.9688C197.144 34.4688 197.582 32.6953 197.582 30.6484L199.644 30.9531H187.269V23.3125H207.355V29.3594C207.355 33.5781 206.464 37.2031 204.683 40.2344C202.902 43.25 200.449 45.5781 197.324 47.2188C194.199 48.8438 190.621 49.6562 186.589 49.6562C182.089 49.6562 178.136 48.6641 174.73 46.6797C171.324 44.6797 168.667 41.8438 166.761 38.1719C164.871 34.4844 163.925 30.1094 163.925 25.0469C163.925 21.1562 164.488 17.6875 165.613 14.6406C166.753 11.5781 168.347 8.98438 170.394 6.85938C172.441 4.73438 174.824 3.11719 177.542 2.00781C180.261 0.898437 183.207 0.34375 186.378 0.34375C189.097 0.34375 191.628 0.742188 193.972 1.53906C196.316 2.32031 198.394 3.42969 200.207 4.86719C202.035 6.30469 203.527 8.01562 204.683 10C205.839 11.9688 206.582 14.1406 206.91 16.5156H196.597Z" fill="black"/>
<path d="M259.087 25C259.087 30.2344 258.095 34.6875 256.111 38.3594C254.142 42.0312 251.455 44.8359 248.048 46.7734C244.658 48.6953 240.845 49.6562 236.611 49.6562C232.345 49.6562 228.517 48.6875 225.126 46.75C221.736 44.8125 219.056 42.0078 217.087 38.3359C215.119 34.6641 214.134 30.2188 214.134 25C214.134 19.7656 215.119 15.3125 217.087 11.6406C219.056 7.96875 221.736 5.17188 225.126 3.25C228.517 1.3125 232.345 0.34375 236.611 0.34375C240.845 0.34375 244.658 1.3125 248.048 3.25C251.455 5.17188 254.142 7.96875 256.111 11.6406C258.095 15.3125 259.087 19.7656 259.087 25ZM248.798 25C248.798 21.6094 248.291 18.75 247.275 16.4219C246.275 14.0938 244.861 12.3281 243.033 11.125C241.205 9.92188 239.064 9.32032 236.611 9.32032C234.158 9.32032 232.017 9.92188 230.189 11.125C228.361 12.3281 226.939 14.0938 225.923 16.4219C224.923 18.75 224.423 21.6094 224.423 25C224.423 28.3906 224.923 31.25 225.923 33.5781C226.939 35.9062 228.361 37.6719 230.189 38.875C232.017 40.0781 234.158 40.6797 236.611 40.6797C239.064 40.6797 241.205 40.0781 243.033 38.875C244.861 37.6719 246.275 35.9062 247.275 33.5781C248.291 31.25 248.798 28.3906 248.798 25Z" fill="black"/>
</svg>
There is no bug here, because such properties do not exist in the REST API. Please see the developer documentation:
https://www.figma.com/developers/api#vector-props
Right, there are missing in REST API. So how can I export VectorNode
data, like paths
?
Plugin API:
Just get the desired node properties directly.
Plugin API in combination with ExportSettingsREST
:
Get the ID of the desired node from JSON output, get the node by ID and get its properties.
REST API:
Add a geometry
query parameter. For example: geometry=paths
https://www.figma.com/developers/api#path-type
Thanks for replay @tank666 !
It doesn’t resolve my issue. I need to be “file agnostic” (different nodes IDs). I send result of ExportSettingsREST to my backend, and I have to reproduce nodes in another file based on it.
If there is no native support I have to use custom solution, like you suggest
I, of course, do not know all the details of your case, but why can’t you send the received node properties (via getNodeById
method) along with JSON REST output to your backend?
I have the same question
vectorNetwork is not exists on Figma REST API for VECTOR type node
Same as pluginData
for instance You need to find node and copy additional data on your own.
For example, aftre get data from ExportSettingsREST
i traverse whole JSON with nodes, and add there additional data:
private static injectVectorPaths(json: Object, node: FrameNode): void {
if (!('findAllWithCriteria' in node)) return;
const vectors = node.findAllWithCriteria({
types: ['VECTOR'],
});
vectors.forEach((vector) => {
const { vectorPaths, strokeGeometry, id } = vector;
const path = this.findPathToId(json, id, []);
if (vectorPaths?.length) {
set(json, [...path, 'fillGeometry'], vectorPaths);
}
if (strokeGeometry?.length) {
set(json, [...path, 'strokeGeometry'], strokeGeometry);
}
});
}
Thanks a lot Adrian
I need to do something related to vectorPaths across files in my project and I am facing similar problems.
I hope this property will be added to the REST API.