Code snippets
Create an Arrow

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

proptypedefaultrequired
arrowTypestringright
namestringX
strokenumber4
strokeColorobject{ r: 0, g: 0, b: 0 }
xnumber20
ynumber20

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);