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

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

今回紹介するプラグインの「Image tracer」を使うと、ビットマップ画像をトレースしてベクターデータに変換できます。
基本的にはベクターデータがない場合は支給して用意することになりますが、サッと作ってしまいたい場合や、支給に時間がかかるのでとりあえずイメージだけ作って共有したい場合に使えます。

Image tracer

Figma

Figma

https://www.figma.com/community/plugin/735707089415755407

Figma 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 ...

Image tracerはビットマップ画像をトレースしてベクターデータに変換してくれるプラグインで、Adobe Illustratorの「画像トレース」と似たような機能です。
アイコン画像や白黒画像であれば、かなり精度高くトレースしてくれます。

ちなみに、トレース時に白黒にしてからトレース作業を行うので、写真やカラフルな画像の場合は境界線の認識がうまくいかない場合があります。
あくまで用途としてはロゴやアイコンのベクターデータ化になります。

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

基本的な使い方

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

上の方に、どこがトレースされるのかプレビューが表示されます。
右下の「Place traced vector」ボタンをクリックすると、プレビューの内容でトレースされます。

細かいオプションの設定

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

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

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

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

• Original image：トレース元となる画像を表示
• Processed image：白黒に処理したトレース前の画像を表示
• Traced vector：トレース結果のベクターデータを表示