Adding a new stroke on rectangle

Plugin and Widget API Questions
1

Hi,

I am trying to add a stroke to a rectangle component but it does not seem to work. What I am trying to do is this:

const rect = figma.createRectangle();
rect.x = xmin;
rect.y = ymin;
rect.resize(xmax - xmin, ymax - ymin);
rect.cornerRadius = 5;

const fills = clone(rect.fills);
fills[0].opacity = 0;
rect.fills = fills;

const strokes = clone(rect.strokes);
strokes[0].color = {r: 0, g: 0, b: 0};
rect.strokes = strokes;
rect.strokeWeight = 5;
rect.strokeAlign = "CENTER";
frame.appendChild(rect);

I understand that a newly created rectangle does not have strokes thus the strokes array is empty, so how do I create a strokes component and apply it to my rectangle?

Thanks

2

You need to create a strokes array and set all necessary stroke properties. Something like:

const stroke = { 
    type: "SOLID",
    color: {r: 0, g: 0, b: 0}
}
node.strokes = [stroke]
1 Like
3

Thanks for the quick reply. I also had to specify the type of the stroke by defining it as SolidPaint:

const stroke: SolidPaint = {
    type: "SOLID",
    color: {r: 0, g: 0, b: 0}
}
3 Likes