Get color fill styles from a Figma documnet

getColorFillStyles.js

// Outputs json that includes your styles, their names, colors, etc.
// It's shaped like this:
//
// [
//   {
//     "name": "Danger",
//     "key": "cab6ae8c5b6634d6exampleKey151b4ee724",
//     "description": "",
//     "color": {
//       "type": "SOLID",
//       "visible": true,
//       "opacity": 1,
//       "blendMode": "NORMAL",
//       "color": {
//         "hex": "#df2d24",
//         "rgb": {
//           "r": 0.8745098114013672,
//           "g": 0.1764705926179886,
//           "b": 0.1411764770746231
//         }
//     }
//   },
//   ...
// ]
//
// Open a Figma doc in the browser, open dev tools and run this...

const rgbToHex = (r, g, b) => {
    const componentToHex = (c) => {
        c = Math.round(c * 255);
        let hex = c.toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };

    const combineComponents = (r, g, b) => {
        return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
    };

    return combineComponents(r, g, b);
};

oneCoreColorStyles = figma.getLocalPaintStyles().map(style => {
  return {
    name: style.name,
    key: style.key,
    description: style.description,
    color: {
      ...style.paints[0], 
      color: {
        hex: rgbToHex(style.paints[0].color.r, style.paints[0].color.g, style.paints[0].color.b),
        rgb: style.paints[0].color
      }
    }
  }
})