Image Colour Separation（Figmaプラグイン）

画像を色ごとに分解するFigmaプラグイン。キャンバス上の画像を選んで色を指定すると、その色に近い画素だけを残した画像が隣に生成される。
Figma Communityで公開中。

使い方

キャンバス上の画像を選択する
抽出したい色をカラーピッカーで指定する（スポイトで画像から直接拾える）
Sensitivityのスライダーで、どこまで近い色を拾うかを決める
Generate the image を押すと、元画像の右隣に抜き出した画像が生成される

空の青だけを抜いたり、特定の一色だけを残したり。Sensitivityを上げるほど許容範囲が広がり、下げるとピンポイントな色だけが残る。指定する色を変えて何度か繰り返せば、一枚の写真を色の層に分けられる。

仕組み

Figmaのプラグインは2つの環境に分かれている。ドキュメントを操作できるメインスレッドにはDOMがなく、DOMのあるUIのiframeからはドキュメントを触れない。画像のデコードとエンコードにはcanvasが要るのでUI側でしかできず、画像の取得と配置はメイン側でしかできない。

そこで、UIを不可視で開き直して画像処理用のワーカーとして使っている。

const bytes = await selectedImage.getBytesAsync()

// 不可視のiframeをワーカーとして開く
figma.showUI(__html__, { visible: false })
figma.ui.postMessage({ bytes, color, sensitivity })

生のバイト列を投げ、加工済みのバイト列が返ってくるのを待つ、という往復で処理している。

色の判定自体はシンプルで、1画素ずつ指定色とのRGBの距離を測り、離れている画素のアルファを0にしているだけ。Sensitivityはこの距離の閾値そのもの。

const diff = Math.sqrt(Math.pow(pixelR - r, 2) + Math.pow(pixelG - g, 2) + Math.pow(pixelB - b, 2))

if (diff > threshold) {
  pixels[i + 3] = 0
}

戻ってきたバイト列は、元のfillをコピーしてhashだけ差し替えれば新しい画像になる。あとは元画像と同じ見た目のサイズに合わせ、右隣に配置している。