Skip to main content
Solved

Adding a new stroke on rectangle

Antoine_Zurcher

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

Best answer by Gleb

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]
View original

2 replies

Gleb
  • Gleb
  • Power Member
  • 4708 replies
  • Answer
  • April 14, 2021

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]
sleman_safiah
1 person likes this
  • sleman_safiah
    sleman_safiah
Antoine_Zurcher

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}
}
abelhancock
sleman_safiah
Gleb
3 people like this
  • abelhancock
    abelhancock
  • sleman_safiah
    sleman_safiah
  • Gleb
    Gleb

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings