Create an arrow
As simple as this seems, it took me a little bit to figure all of this out, so here it is for you.
This is a little bit involved, so breaking it up into two parts.
Create arrow function
code.js
// first let's set a global arrow size
const ARROW_SIZE = 200;
// now here are the arrow options (8 total)
// you can trim it down to 4 if you don't need diagonals
const arrowOptions = {
right: {
width: ARROW_SIZE,
height: 0,
start: { x: 0, y: 0 },
end: { x: ARROW_SIZE, y: 0 }
},
left: {
width: ARROW_SIZE,
height: 0,
end: { x: 0, y: 0 },
start: { x: ARROW_SIZE, y: 0 }
},
up: {
width: 0,
height: ARROW_SIZE,
end: { x: 0, y: 0 },
start: { x: 0, y: ARROW_SIZE }
},
down: {
width: 0,
height: ARROW_SIZE,
end: { x: 0, y: ARROW_SIZE },
start: { x: 0, y: 0 }
},
upRight: {
width: ARROW_SIZE,
height: ARROW_SIZE,
end: { x: ARROW_SIZE, y: 0 },
start: { x: 0, y: ARROW_SIZE }
},
upLeft: {
width: ARROW_SIZE,
height: ARROW_SIZE,
end: { x: 0, y: 0 },
start: { x: ARROW_SIZE, y: ARROW_SIZE }
},
downRight: {
width: ARROW_SIZE,
height: ARROW_SIZE,
end: { x: ARROW_SIZE, y: ARROW_SIZE },
start: { x: 0, y: 0 }
},
downLeft: {
width: ARROW_SIZE,
height: ARROW_SIZE,
end: { x: 0, y: ARROW_SIZE },
start: { x: ARROW_SIZE, y: 0 }
}
};
function createArrow(props) {
// details, dimensions, and placement
const { arrowType = 'right', name, x = 20, y = 20 } = props;
// get arrow specs for type selected
const { width, height, start, end } = arrowOptions[arrowType];
// stroke and color
const { stroke = 4, strokeColor = { r: 0, g: 0, b: 0 } } = props;
// https://www.figma.com/plugin-docs/api/properties/figma-createvector
const arrow = figma.createVector();
arrow.name = name;
arrow.x = x;
arrow.y = y;
arrow.strokeWeight = stroke;
arrow.strokes = [{ type: 'SOLID', color: strokeColor }];
arrow.resize(width, height); // w, h
// https://www.figma.com/plugin-docs/api/VectorNetwork
arrow.vectorNetwork = {
vertices: [
{
...start,
strokeCap: 'NONE',
strokeJoin: 'MITER',
cornerRadius: 0,
handleMirroring: 'NONE'
},
{
...end,
strokeCap: 'ARROW_LINES',
strokeJoin: 'MITER',
cornerRadius: 0,
handleMirroring: 'NONE'
}
],
segments: [
{
start: 0,
end: 1,
tangentStart: {
x: 0,
y: 0
},
tangentEnd: {
x: 0,
y: 0
}
}
],
regions: []
};
return arrow;
}
Function props
prop | type | default | required |
---|---|---|---|
arrowType | string | right | |
name | string | X | |
stroke | number | 4 | |
strokeColor | object | { r: 0, g: 0, b: 0 } | |
x | number | 20 | |
y | number | 20 |
strokeColor is Figma's RGB format
Example:
Regular RGB for grey rgb(206, 206, 206)
RBG (Figma) would be { r: 206 / 255, g: 206 / 255, b: 206 / 255 }
Example usage
This is an example usage of the create arrow function
code.js
// first let's grab a layer to add this arrow layer to
const layerNode = figma.getNodeById('123:456');
// grab arrow from create arrow function
const arrow = createArrow({
name: 'My Arrow Layer Name'
});
// add arrow within our figma layer (at x=20, y=20)
layerNode.appendChild(arrow);