colorExtraction.js

const selection = figma.currentPage.selection[0]; // 最初の選択オブジェクト

if (selection && selection.type === "FRAME") {
  const colors = new Set(); // 色の重複を防ぐ
  const children = selection.findAll((node) => "fills" in node);

  children.forEach((node) => {
    if (Array.isArray(node.fills)) {
      node.fills.forEach((fill) => {
        if (fill.type === "SOLID") {
          const { r, g, b } = fill.color;
          colors.add(
            `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
              b * 255
            )})`
          );
        }
      });
    }
  });

  const colorArray = Array.from(colors);
  const rectangleWidth = 100;
  const rectangleHeight = 100;
  const spacing = 20;
  const textOffset = 10;

  colorArray.forEach((color, index) => {
    // 色見本の矩形を作成
    const rect = figma.createRectangle();
    rect.resize(rectangleWidth, rectangleHeight);
    rect.x = selection.x + index * (rectangleWidth + spacing);
    rect.y = selection.y + selection.height + spacing;
    rect.fills = [{ type: "SOLID", color: parseRgb(color) }];

    // Hexコードを表示するテキスト
    const text = figma.createText();
    text.x = rect.x;
    text.y = rect.y + rectangleHeight + textOffset;
    text.fontName = { family: "Inter", style: "Regular" };
    text.characters = rgbToHex(color);

    // 非同期でFontのload（Figmaの仕様）
    figma.loadFontAsync({ family: "Inter", style: "Regular" }).then(() => {
      text.characters = rgbToHex(color);
    });
  });
} else {
  figma.notify("Frameを選択してください");
}

// RGB文字列をオブジェクトに変換
function parseRgb(rgb) {
  const matches = rgb.match(/rgb\((\d+), (\d+), (\d+)\)/);
  return {
    r: parseInt(matches[1]) / 255,
    g: parseInt(matches[2]) / 255,
    b: parseInt(matches[3]) / 255,
  };
}

// RGBをHexに変換
function rgbToHex(rgb) {
  const matches = rgb.match(/rgb\((\d+), (\d+), (\d+)\)/);
  const r = parseInt(matches[1]).toString(16).padStart(2, "0");
  const g = parseInt(matches[2]).toString(16).padStart(2, "0");
  const b = parseInt(matches[3]).toString(16).padStart(2, "0");
  return `#${r}${g}${b}`;
}