Skip to main content

Hi,

Is it possible to save a color as a color style in the file with the figma api?

Thanks in advance!

Of course, with the Plugin API, you can create a color style using figma.createPaintStyle().


Thanks a lot!


I was dealing with this recently: hereโ€™s a function that creates a color style in the current file:


pEDIT] updated to accept hex string or RGB


// accepts either a hex string or RGB for color parameter
const createColorStyle = (name:string, color:RGB|string, opacity:number = 1, blendMode:BlendMode = 'NORMAL') => {
// returns input value if already RGB; otherwise converts from hex to RGB
const convertToRGB = (color:string|RGB) => {
// can't use typeof here because RGB is an interface type
if ((color as RGB).hasOwnProperty('r')){
return color as RGB;
}
const hex = (color as String).replace('#','');
const rgb:RGB = {
r: parseInt(hex.substr(0,2), 16)/255,
g: parseInt(hex.substr(2,2), 16)/255,
b: parseInt(hex.substr(4,2), 16)/255
}
return rgb;
}
const style = figma.createPaintStyle();
style.name = name;
const paint: SolidPaint = {
type: "SOLID",
color: convertToRGB(color),
opacity: opacity,
blendMode: blendMode
}
style.paints = =paint];
}

// test it out

const color:RGB = {
r: 39/255,
g: 176/255,
b: 185/255
}
createColorStyle('color from rgb', color);
createColorStyle('color from hex','cccccc');

Reply