Figma Plugin Script: Create color catalog

figma-create-color-catalog.js

const colorStyles = figma.getLocalPaintStyles();

// Get values from local styles
const colors = colorStyles.map(style => {
　 　const regex = /\//g;
　 　const colorName = style.name;
　 　const varName = `var(--${colorName.replace(regex,'-')})`;
　 　const paint = style.paints[0];
  const hex = paint.type === "SOLID" ? rgbToHex(paint.color) : '';

　 　return {
　  　　　colorName,
　  　　　varName,
　  　　　hex,
　  　　　paint
  }
})

// Create a row one by one and append values to each the row
const colorSet = colors.map(color => {
  if(color.hex !== '') {
    return createRow(color)
  }
})

// Create a frame and append the rows to that
// *Ignore Gradient and Image styles
createFrame(colorSet.filter(Boolean));

function createFrame(nodes) {
  const frame = figma.createFrame();
  frame.layoutMode = "VERTICAL";
  frame.paddingTop = 16;
  frame.paddingBottom = 16;
  frame.primaryAxisSizingMode = "AUTO";
  frame.counterAxisSizingMode = "AUTO";

  nodes.forEach(node => frame.appendChild(node));
}

function createRow(color) {
  const row = figma.createFrame();
  row.layoutMode = "HORIZONTAL";
  row.paddingLeft = 24;
  row.paddingTop = 8;
  row.paddingRight = 24;
  row.paddingBottom = 8;
  row.primaryAxisSizingMode = "AUTO";
  row.counterAxisSizingMode = "AUTO";
  row.counterAxisAlignItems = "CENTER";
  row.itemSpacing = 16;

  const nameText = figma.createText();
  nameText.characters = color.colorName;
  nameText.fontName = { family: "Roboto", style: "Bold" }
  nameText.resize(110, 1);
  nameText.textAlignVertical = "CENTER";
  nameText.layoutAlign = "STRETCH";

  const varNameText = figma.createText();
  varNameText.characters = color.varName;
  varNameText.fontName = { family: "Roboto Mono", style: "Regular" }

  const hexText = figma.createText();
  hexText.characters = color.hex;
  hexText.fontName = { family: "Roboto", style: "Regular" }
  hexText.resize(80, 1);
  hexText.textAlignVertical = "CENTER";
  hexText.layoutAlign = "STRETCH";

  const colorChip = figma.createRectangle();
  colorChip.resize(32,32);
  const fills = clone(colorChip.fills);
  fills[0].color = color.paint.color;
  colorChip.fills = fills

  row.appendChild(colorChip);
  row.appendChild(nameText);
  row.appendChild(hexText);
  row.appendChild(varNameText);

  return row;
}

function rgbToHex(rgb) {
  const rr = Math.round(rgb.r * 255).toString(16).toUpperCase();
  const gg = Math.round(rgb.g * 255).toString(16).toUpperCase();
  const bb = Math.round(rgb.b * 255).toString(16).toUpperCase();

  return '#' + rr + gg + bb;
}

function clone(val) {
  return JSON.parse(JSON.stringify(val))
}