# Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」

URL: https://webrandum.net/figma-plugin-image-tracer/
公開日: 2022-08-05
更新日: 2022-08-05
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

Figmaを使っていると、たまにPNGやJPGなどのビットマップ画像の色を変えたり、ちょっと修正したいときがあります。

今回紹介するプラグインの「Image tracer」を使うと、ビットマップ画像をトレースしてベクターデータに変換できます。

基本的にはベクターデータがない場合は支給して用意することになりますが、サッと作ってしまいたい場合や、支給に時間がかかるのでとりあえずイメージだけ作って共有したい場合に使えます。

## Image tracer

![Image tracer](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-2.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/5641c33a714b24f88dea2ce7a31e0b38e9088f3d023fc211d1e677c30e838bc4.webp)Figmahttps://www.figma.com/community/plugin/735707089415755407Figma Community plugin - Trace black and white bitmap images to turn them into a vector layer.When you run Image tracer; it will take whatever layers you have selected and combine them together into one image (regardless of if they’re already a vector or not) — then it will convert it to ‘black & white’ and attempt to ...](https://www.figma.com/community/plugin/735707089415755407)

Image tracerはビットマップ画像をトレースしてベクターデータに変換してくれるプラグインで、Adobe Illustratorの「画像トレース」と似たような機能です。

アイコン画像や白黒画像であれば、かなり精度高くトレースしてくれます。

ちなみに、トレース時に白黒にしてからトレース作業を行うので、写真やカラフルな画像の場合は境界線の認識がうまくいかない場合があります。

あくまで用途としてはロゴやアイコンのベクターデータ化になります。

ただ、うまくいかなくてもトレース後に自分でパスを調整すればいいだけなので、1からすべて自分でトレースすることに比べるとかなりラクになります。

## 基本的な使い方

画像を選択した状態で「Image tracer」を起動してパネルを開きます。

![「Image tracer」パネル](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_2-2.png)

上の方に、どこがトレースされるのかプレビューが表示されます。

右下の「Place traced vector」ボタンをクリックすると、プレビューの内容でトレースされます。

### 細かいオプションの設定

左下の「Show options / Hide options」をクリックすると、パネル下に細かいトレースオプションを表示・非表示できます。

![「Image tracer」のオプション表示](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_3-2.png)

| 項目 | 内容 | 備考 |
| --- | --- | --- |

| invert image | トレースする画像を反転する |   |
| --- | --- | --- |

| Threshold | しきい値の設定 |   |
| --- | --- | --- |

| Blur | 周辺のぼかしの設定 | カーブなどが丸くなる |
| --- | --- | --- |

| Ignore less than | 設定したpx以下を無視する |   |
| --- | --- | --- |

| Smoothness | 滑らかさの設定 | パスを滑らかにする |
| --- | --- | --- |

| Curve optimisation | 曲線の最適化 |   |
| --- | --- | --- |

| Show path | トレースするパスを表示する |   |
| --- | --- | --- |

| Show points | トレースするポイントを表示する |   |
| --- | --- | --- |

| Fade image | プレビュー内の画像を半透明にする |   |
| --- | --- | --- |

「Show path」「Show points」「Fade image」はプレビューの表示に影響していて、それぞれデフォルトから値を変えると下記のような見た目になります。

![プレビューの表示に関するオプション](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_5-1.png)

### プレビュー画像の切り替え

また、パッと見だと分かりにくいのですが、オプションの右上の「Original image」がセレクトボックスになっていて、プレビューの表示を変えられます。

![「Original image」オプション](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_4-1.png)

- Original image：トレース元となる画像を表示

- Processed image：白黒に処理したトレース前の画像を表示

- Traced vector：トレース結果のベクターデータを表示