Adding Pattern Fills and Strokes

Adding pattern fills and strokes to nodes is a bit different from adding other fill and stroke types, as described in Editing Properties. This is because pattern fills and strokes reference other nodes in the document as their source, and those nodes need to be loaded before they can be used (see Migrating to Dynamic Loading for more information on how we load nodes dynamically).

Rather than setting the fill or stroke property of a node directly, you need to use setFillsAsync or setStrokesAsync, which return promises that resolve when the pattern fills or strokes have been applied. Setting node.fills or node.strokes directly with a PatternPaint will result in an error.

Example

// Create a circle to use as the pattern source
const circle = figma.createEllipse();
circle.resize(10, 10);

// Create a rectangle to apply the pattern fill to
const rectangle = figma.createRectangle();
rectangle.x = 20;
rectangle.resize(100, 100);

// Define the pattern paint referencing the circle
const patternPaint = {
  type: 'PATTERN',
  sourceNodeId: circle.id, // Reference the circle as the pattern source
  tileType: 'HORIZONTAL_HEXAGONAL',
  scalingFactor: 1,
  spacing: {x: 0.2, y: 0.2},
  horizontalAlignment: 'CENTER',
}

// Apply the pattern fill to the rectangle
await rectangle.setFillsAsync([patternPaint]);

Example​

Example