Last active
September 12, 2023 12:54
-
-
Save alexjlockwood/5368d6b1b7fcd1c07c03b57d66fcd2c6 to your computer and use it in GitHub Desktop.
Generates style descriptions for each color style in the current Figma file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get the list of color styles in the current Figma file. | |
const colorStyles = figma.getLocalPaintStyles(); | |
const updatedColorStyles = colorStyles.filter(style => { | |
const { paints } = style; | |
if (paints.length !== 1) { | |
// Skip styles containing multiple colors. | |
return false; | |
} | |
const [paint] = paints; | |
if (paint.type !== 'SOLID') { | |
// Skip styles containing gradients, image fills, etc. | |
return false; | |
} | |
const hexColor = rgbToHex(paint.color); | |
if (style.description === hexColor) { | |
// Skip styles that already have the correct description. | |
return false; | |
} | |
// Set the style description equal to the color's hex code. | |
style.description = hexColor; | |
return true; | |
}); | |
// Show a toast indicating the number of style descriptions that were updated. | |
figma.notify(`✅ Updated ${updatedColorStyles.length} style description(s)`); | |
/** | |
* Converts an RGB object to a hex color string. For example: | |
* { r: 0.5, g: 0.5, b: 0.5 } => '#808080' | |
*/ | |
function rgbToHex(rgb: RGB) { | |
const r = ratioToHex(rgb.r); | |
const g = ratioToHex(rgb.g); | |
const b = ratioToHex(rgb.b); | |
return `#${r}${g}${b}`; | |
} | |
/** | |
* Converts a ratio between [0,1] to a 2-character hex string. For example: | |
* 0.5 => '80' | |
*/ | |
function ratioToHex(ratio: number) { | |
const hex = Math.round(ratio * 255).toString(16).toUpperCase(); | |
return `${hex.length === 1 ? '0' : ''}${hex}`; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great work! However, this script works only for solid colors, and will not work if it is a gradient color.