Figma で画像をベクター化する方法 — 自動トレース・SVG 書き出し・PNG→SVG の使い分け

「写真やロゴを編集できるベクターにしたい」「PNG を SVG にしたい」「そもそも Figma に画像をベクター化するボタンはある？」— Figma で画像のベクター化につまずく原因は、たいてい同じです。「ベクター化」という言葉が、実は複数の違うやりたいことを指しているからです。ラスター画像（写真・PNG）を編集可能なパスに変換したいのか、Figma 上にすでにあるベクターを SVG として書き出したいのか — このどちらなのかで、使う機能がまったく変わります。

そして「ラスター画像を自動でトレースしてベクターにする」は、Figma の標準機能だけではできません。本記事では、やりたいことを切り分けたうえで、それぞれの手順と、自動トレースにプラグインや外部処理が必要な理由を整理します。最後に Adobe XD から移行したベクター・パスを保ったまま扱う方法もまとめました。

先に結論：Figma に「自動トレース」ボタンはない

Figma には、Illustrator の画像トレースのようなラスター画像を自動でベクターパスに変換する標準機能はありません。やりたいことが「写真・PNG を編集可能なパスにする」ならベクター化プラグインまたは外部処理、「Figma 上のシェイプを SVG にする」なら標準の SVG 書き出しを使います。この 2 つを切り分けるのが最短ルートです。

この記事で得られること

  • 「ベクター化」の主なパターン（自動トレース・SVG 書き出し・PNG→SVG）の見分け方
  • ラスター画像の自動トレースにプラグイン / 外部処理が要る理由と使い分け
  • Figma 上のベクターを SVG で正しく書き出す手順
  • 「PNG を SVG にしたい」という検索意図の正しい切り分け
  • XD → Figma 移行でベクター・パスを保ったまま扱う方法

🗺️ あなたの「ベクター化」はどれ？

「ベクター化」で検索してたどり着く先は、人によってまったく別の操作が必要になります。まず自分のケースがどれかを確かめましょう。

やりたいこと使う機能難易度
写真・ロゴ PNG を編集可能なパスに自動トレース（プラグイン / Illustrator）標準機能では不可
Figma のシェイプ・アイコンを SVG に標準の SVG 書き出し（Export）いちばん簡単
PNG ファイルを SVG にしたい中身次第（ラスターなら自動トレース）誤解しやすい

ポイントは、「ベクター化」には『ラスターをパスに変換する（トレース）』と『すでにあるベクターを SVG で書き出す』の 2 系統があるということ。混同しやすいのは「写真を SVG にしたい」という要求に対して、中身がラスター（写真・スクリーンショット）の場合、ただ拡張子を変えるだけでは編集可能なベクターにはなりません。順に見ていきましょう。

🪄 ラスター画像の自動トレースはプラグイン / 外部で

ここが多くの人にとってのゴールラインです。写真やロゴの PNG / JPG を、編集できるベクターパス（アンカーポイントで形を調整できる図形）に変換したい — この「自動トレース」は、Figma の標準機能だけではできません。Figma は画像を「ラスター（ピクセルの集まり）」として扱い、輪郭を自動で検出してパスに起こす機能は持っていないためです。

ラスター画像をベクター化したい場合は、次のいずれかになります。

  • ベクター化（画像トレース）プラグインを使う: Figma Community には、画像を解析してベクターパスに変換するプラグインが複数あります。画像を選んでプラグインを実行すると、トレースされたパスが生成されます。Figma の中で完結させたいときに便利です。
  • 外部でトレースしてから取り込む: Adobe Illustrator の「画像トレース」など外部ツールでベクター化し、その SVG を Figma に配置・ペーストします。線の単純化やカラー数を細かく詰めたいときは、こちらのほうが仕上がりを制御しやすいです。

拡張子を変えても「ベクター」にはならない

ラスター画像（写真・スクリーンショット）をそのまま SVG という拡張子で保存しても、中身はピクセル画像のままで、編集可能なパスにはなりません。「ベクター化」とは形を数式的なパスに置き換えることで、自動トレースという処理が必須です。ロゴのように線がはっきりした画像はトレースしやすく、写真のように階調が連続した画像はきれいなパスになりにくい、という傾向があります。

プラグインと外部処理の使い分け

ラフな確認やスピード重視なら Figma のベクター化プラグイン、ロゴの清書や入稿のようにパスの品質が重要なら Illustrator などでトレース → SVG を配置、が目安です。どちらの場合も最終的に Figma に置くのは「ベクターになったパス / SVG」なので、配置後の扱いは後述の SVG と同じになります。

📤 Figma のベクターを SVG で書き出す（標準機能）

逆に、Figma 上にすでにあるシェイプやアイコン（ベクター）を SVG として書き出したいなら、これは標準機能で完結します。アイコンやロゴを他のツールや Web で使うときの定番です。

  1. 書き出したいシェイプ・フレームを選択します。
  2. 右パネル下部の Export（書き出し） で「+」を押し、フォーマットを SVG に設定します。
  3. Export ボタンで SVG ファイルとして書き出します。

SVG として書き出せるのは「ベクターの中身」だけ

Export で SVG を選んでも、対象がラスター画像（配置した写真・PNG）の場合は、SVG の中にそのビットマップが埋め込まれるだけで、編集可能なパスにはなりません。きれいなベクター SVG が欲しいなら、元がベクター（Figma で描いた / トレース済みのパス）である必要があります。

複数のアイコンを SVG / PNG で一度に書き出したいときの効率的な手順は、Figma で画像をまとめて書き出す方法 にまとめています。

🔁 PNG を SVG にしたいときの切り分け

「PNG を SVG にしたい」という検索はとても多いですが、答えは PNG の中身によって変わります。ここを切り分けないと思い通りの結果になりません。

  • 元がベクターの PNG（Figma や Illustrator で描いたものを PNG 書き出ししただけ）: 元データが Figma 上にあるなら、PNG を変換するのではなく、元のベクターを選んで SVG で書き出すのが正解です（前章の手順）。
  • 写真・スクリーンショットなど純粋なラスターの PNG: 形の情報がないので、SVG にするには自動トレースが必要です（最初の章のプラグイン / Illustrator）。トレース結果は元画像に近い形であり、写真では特に劣化しやすい点に注意してください。

「PNG→SVG コンバーター」への過度な期待は禁物

Web 上の「PNG to SVG」変換ツールの多くは、ラスター画像を SVG コンテナに埋め込むだけか、簡易トレースをかけるだけです。ロゴを正確にベクター化したいなら、元データ（AI / Figma のパス）から SVG 書き出しするのが最も確実です。元データが手元にない場合のみ、トレースで近い形を作る、と考えてください。

🚀 XD のベクター・パスを保ったまま Figma へ — Pixel Fine Converter

XD で作ったシェイプやパスを Figma の構造に変換。Free 版でご自身のファイルの再現度を確かめてから判断できます。

🔄 XD から移行したベクター・パス

Adobe XD から移行したファイルでは、ベクターにもう 1 つ注意が必要です。XD 上で作ったベクター図形やパスは、そのパス構造ごと Figma へ移行される必要があります。ここがずれると、移行後にシェイプが画像（ラスター）に化けてしまったり、パスが崩れて編集できなくなることがあります。一度ラスターになってしまうと、再び編集可能にするには前述の自動トレースが必要になり、品質も落ちます。

  • ベクター図形・パスは、Figma のベクターネットワークとして再構成される必要があります。
  • アイコンやロゴは、パスを保ったまま移行できれば、Figma 側でそのまま SVG 書き出しや編集ができます。

なお Pixel Fine Converter は画像を自動トレースするツールではなく、XD 側ですでにベクターとして作ってあるシェイプ・パスの構造を Figma にそのまま変換するためのものです。手作業で 1 つずつ描き直す手間を減らせるため、移行時にベクターがラスターへ化ける事故を防ぐのに役立ちます。移行作業全体の進め方は XD → Figma 移行プレイブック に、図形やパスの変換の詳細は XD の図形を Figma に変換する にまとめています。

💬 よくある質問

Q: Figma で画像をベクター化できますか？

Figma の標準機能だけでは、ラスター画像（写真・PNG）を自動でベクターパスに変換することはできません。ベクター化（画像トレース）プラグインを使うか、Illustrator など外部でトレースしてから SVG を取り込みます。Figma 上にすでにあるシェイプなら、SVG での書き出しは標準機能で行えます。

Q: PNG を SVG に変換するには？

その PNG の中身次第です。元が Figma / Illustrator で描いたベクターなら、PNG を変換せず元のベクターを SVG で書き出すのが最も確実です。写真やスクリーンショットなど純粋なラスターなら、自動トレースで近い形のベクターを作る必要があります。

Q: ロゴの PNG をきれいにベクター化したいです。

元データ（AI ファイルや Figma のパス）が手元にあるなら、そこから SVG を書き出すのがいちばんきれいです。元がなく PNG しかない場合は、Illustrator の画像トレースや Figma のトレースプラグインで近い形に起こします。線がはっきりしたロゴはトレースしやすいです。

Q: Figma のアイコンを SVG で保存するには？

シェイプを選択し、右パネルの Export で形式を SVG にして書き出します。対象がベクターであれば、編集可能な SVG として出力されます。複数まとめて書き出すならバッチエクスポートが便利です。

Q: XD で作ったベクターが、Figma 移行後にラスター画像になりました。

XD のパス構造が Figma 側に正しく引き継がれていないためです。ベクター・パス構造ごと変換できる移行特化のコンバーターを使うか、移行後に描き直す必要があります。一度ラスター化すると元のように編集することはできません。

🎯 まとめ

Figma の「ベクター化」は、まず自分のやりたいことがどれかを切り分けるのがコツです。本記事の要点は次の 3 つです。

#やりたいこと使う機能
1写真・ロゴをパスに変換標準機能では不可 — トレースプラグイン or Illustrator
2Figma のベクターを SVG に標準の SVG 書き出し（Export）
3PNG を SVG にしたい中身がラスターなら自動トレースが必要

「ラスターをパスに変換」ならトレース、「あるベクターを書き出す」なら SVG エクスポート — この区別さえ押さえれば、Figma のベクター化で迷いにくくなります。そしてファイルのベースが Adobe XD で作成されたものなら、ベクター・パスの構造を保ったまま移行することが、ラスター化を避けるいちばんの近道です。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます

関連ページ