create_vector
Create vector nodes from SVG path strings to draw curves, waves, bezier shapes, custom icons, or area charts in Figma.
Instructions
Create a vector node from an SVG path string. This is the ONLY way to draw
curves, waves, bezier shapes, custom icons, or area charts in Figma.
pathData: SVG path commands (M, L, C, Q, A, Z, etc.)
── Wave / area chart recipe ───────────────────────────────────────────────
Closed path (ends with Z) gets fill — use for area-under-curve charts:
pathData = "M 0,120 C 40,60 80,140 130,80 C 180,20 230,100 290,50
L 290,160 L 0,160 Z"
gradient = {"angle":180, "stops":[
{"color":"#8B5CF6","position":0,"opacity":0.9},
{"color":"#1C1E2A","position":1,"opacity":0}
]}
shadow = {"color":"#7C3AED","x":0,"y":0,"blur":24,"spread":0,"opacity":0.7}
Open path (no Z) with noFill=True + stroke — use for line charts:
pathData = "M 0,80 C 50,20 100,120 150,60 C 200,10 250,80 300,40"
noFill = True
stroke = "#8B5CF6"
strokeWidth = 3
── Custom icon / shape ────────────────────────────────────────────────────
Any SVG path from Figma's pen tool or icon libraries works directly.
windingRule: 'NONZERO' (default) | 'EVENODD'
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | No | ||
| y | No | ||
| name | No | Vector | |
| width | No | ||
| height | No | ||
| noFill | No | ||
| shadow | No | ||
| stroke | No | ||
| opacity | No | ||
| gradient | No | ||
| hexColor | No | #FFFFFF | |
| pathData | No | M 0 0 L 100 0 | |
| fillOpacity | No | ||
| strokeWidth | No | ||
| windingRule | No | NONZERO | |
| strokeOpacity | No |