I am trying to apply an alpha for color, but I can’t figure out how do it. I want to do something like:
node.strokes = [{ type: 'SOLID', color: {r: 0, g: 0, b: 0, a:1} }]
But this gets an error: Error: in set_strokes: Expected “strokes.[0].color” to have type {r: number, g: number, b: number} but got additional property “a”.
Right now I’m using opacity, but this controls the layer opacity not the color’s alpha channel.
Best answer by Frederick_Allen
@tank666 Thank you for you help! This is what I should have done: node.strokes = [{ type: 'SOLID', color: chart.color, opacity: chart.opacity }];
As you may have noticed in the Plugin API documentation, opacity instead of alpha channel is only used for SolidPaint.
figma.comCould you share the code where you change the opacity? You are most likely changing the opacity of the node and not the opacity property of the strokes object.
@tank666 Thank you for you help! This is what I should have done: node.strokes = [{ type: 'SOLID', color: chart.color, opacity: chart.opacity }];
Transparency is a property outside the color itself, and it’s also known as alpha component, You can’t code transparent as pure RGB (Red-Green-Blue), but you can use the RGBA notation, in which you define the color + alpha channel together:
rgba(red, green, blue, alpha)
Where alpha defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
color: rgba(255, 0, 0, 0.5); /* 0.5 is the transparency value */
There’s also the HEXA notation ( #RRGGBBAA ) now supported on all major browsers, which is pretty much the same as RGBA color code but using hexadecimal notation instead of decimal. It’s called HEXA ( HEX + Alpha ). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA.
color: #FF000080; /* red at 50% opacity */
Here the FF0000 is the color and 80 is the transparency. Where 80 is the hexadecimal equivalent of 50%.
Is it possible to get Hexadecimal notation of the color from Figma?
No, you need to write your own function that converts Figma’s fill value to HEX.
Oh, I see. Thanks a lot!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.