FigmaのSVG書き出しは、対象を選択してサイドバーのエクスポート設定を開き、形式をSVGに指定する3ステップで完了します。右クリック1回で済む「SVGとしてコピー」も含めると、用途に応じた2つのルートを使い分けることで、Web制作の実務効率が大きく変わります。この記事では基本手順から軽量化・currentColor対応・一括書き出しまでを実践レベルで解説します。
▶ 3日で初案件PR
この記事でわかること
エクスポートパネルと右クリックコピーの2ルートを使い分けて書き出し工数を削減できること、SVG ExportプラグインでcurrentColor対応と軽量化を同時に自動化できること、書き出し前の7項目チェックで納品後の修正依頼をほぼゼロにできること。
今の仕事について、一番近いものは？
この記事の結論
FigmaでのSVG書き出しは、エクスポートパネルから形式を指定する方法と、右クリックでコピーする方法の2ルートを目的別に選ぶことが最短の解です。アイコン用途では、書き出し前にレイヤー名を整え、SVG Exportプラグインを使うことで軽量化とcurrentColor対応を同時に実現できます。フリーランス案件での納品品質を安定させるには、この3つの工程を一連の作業手順として定着させてください。
今日やるべき1つ
対象レイヤーを選択して右サイドバーの「エクスポート」に「+」を追加し、形式をSVGに変更してダウンロードボタンを押す（3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まず基本手順を確認したい | Figma SVG書き出しは2ルートで使い分け | 3分 |
| PNGとSVGどちらにすべきか迷っている | SVGとPNGはWeb用途で使い分け | 3分 |
| 書き出したSVGが重い・編集しにくい | Figma SVG書き出しは5つの仕組みで軽量化 | 5分 |
| アイコンをまとめて出力したい | Figma SVG一括書き出しは3ステップで完了 | 4分 |
| 書き出し前にチェックしたい | Figma SVG書き出し前の確認は7項目 | 3分 |
Figma SVG書き出しは2ルートで使い分け
FigmaでSVGを書き出す方法には「エクスポートパネル」と「右クリックのコピー」の2ルートがあります。2つのルートは目的が異なるため、用途を理解してから選ぶことで作業時間を削減できます。
エクスポートパネルはファイル保存に使う
エクスポートパネルを使う手順は、書き出したいレイヤーまたはフレームをキャンバス上でクリックして選択し、右サイドバー下部の「エクスポート」セクションで「+」ボタンをクリックする流れです。形式をSVGに変更してから「{レイヤー名}をエクスポート」ボタンを押すと、SVGファイルがローカルにダウンロードされます。複数のレイヤーを選択した状態でエクスポートすると、各レイヤーが個別のSVGファイルとして出力されます。
このルートはファイルとして納品する場面、または複数アセットをまとめて保存する場面に適しています。フリーランス案件でクライアントにSVGファイルを渡すとき、あるいは自分のプロジェクトのアセットフォルダを整備するときに使うルートです。エクスポート設定はレイヤーごとに保存されるため、一度設定しておけば次回以降の書き出し作業が1クリックで済みます。
Figmaの公式ヘルプでは、レイヤー・フレーム・コンポーネント・グループ・セクション・スライス・キャンバス全体のいずれもエクスポートできると案内されています（Figmaからのエクスポート）。
「SVGとしてコピー」はコード貼り付けに使う
右クリックメニューから「コピー/貼り付け」→「SVGとしてコピー」を選ぶと、SVGのソースコードがクリップボードにコピーされます。HTMLファイルやコードエディタに直接貼り付けるだけで使えるため、ファイルを保存する工程が不要です。インラインSVGとしてHTMLに埋め込みたいとき、またはコードレビューを素早く行いたいときに有効です。
「SVGとしてコピー」はクリップボードに保存されるだけでファイルが残らない点に注意してください。同じ図形を複数の案件で使い回す場合は、エクスポートパネルでファイルとして保存しておく方が管理しやすくなります。右クリックだけで完結するこの方法は、ちょっとした確認作業や別アプリへの貼り付けを試す場面でも重宝します。また、画像フリーアイコン選びは3条件で即決の記事でも紹介しているように、SVGアイコンをシームレスに活用するためには書き出し手順の理解が前提になります。
「Figmaで要素をSVGとしてコピーし、別アプリへ貼り付けて活用している」というユーザーの報告があります（Tip: You can use Figma for easy SVG editing and exporting）。
CHECK
▶ 今すぐやること: 手元のFigmaファイルで任意のアイコンを右クリックし「SVGとしてコピー」を選んでテキストエディタに貼り付け、SVGコードが出力されることを確認する（2分）
Q: 「SVGとしてコピー」と「エクスポート」は同じコードが出力されますか？
A： 基本的に同じベクターデータが出力されます。ただしエクスポートパネルにはID属性の付与やアウトライン化などの詳細設定オプションがあるため、細かい最適化が必要な場合はエクスポートパネルを使う方が実務に向いています。
Q： スライスツールはSVG書き出しに使えますか？
A： はい、使えます。スライスは書き出し範囲を指定するためのツールで、SVG形式でのエクスポートにも対応しています。フレームやグループの境界と異なる範囲で書き出したいときに使いますが、アイコンの通常書き出しにはフレームやコンポーネントをそのまま選択する方がシンプルです。
SVGとPNGはWeb用途で使い分け
PNGとSVGのどちらで書き出せばよいかは、目的に応じた使い分けを知っておくことで書き出し作業の判断が素早くなります。
SVGはアイコンとロゴで優位
SVGはベクター形式のため、どのサイズに拡大縮小しても画像が劣化しません。アイコン・ロゴ・シンプルな図形など、形状がパスで構成されているものはSVGで書き出すことで、Retinaディスプレイでも1ファイルで対応できます。HTMLに直接埋め込む場合はCSSでスタイルを変更できる点も実務上の利点です。
ファイルサイズの観点では、シンプルな図形であればSVGはPNGより軽量になります。一方で複雑なグラデーションや写真のようなラスター要素が多い図形の場合、SVGのコード量が膨大になりかえって重くなることがあります。パスの数が300以下であればSVGが有利な場合が多いとされていますが、実際のファイルサイズは構造の複雑さにも依存するため、両形式で書き出して比較することが確実です。画像圧縮で画質落とさない方法の記事も参考にしながら、書き出し後のファイルサイズを最適化してください。
PNGは写真・複雑イラストに使う
写真や複雑なグラデーション、多数のカラーが重なるイラストはPNGで書き出す方が適切です。こうした要素をSVGで書き出すと、ファイルサイズが数百KBを超えることがあり、ページ読み込み速度の低下につながります。
OGP画像やSNS用のサムネイルなど、外部サービスへの入稿が必要な場面ではPNGまたはJPGが求められることがほとんどです。外部入稿用にはPNG、Web実装用のアイコン・UIパーツにはSVGという使い分けが実務上の標準的なルールです。
| 用途 | 推奨形式 | 理由 |
| アイコン・ロゴ | SVG | 拡大縮小で劣化しない、CSSで色変更可能 |
| UIパーツ（ボタン枠・線など） | SVG | HTMLインラインで使いやすい |
| 写真・複雑イラスト | PNG / JPG | SVG化でコードが膨大になる |
| OGP・SNS用サムネイル | PNG | 外部サービスがSVG非対応のことが多い |
| 印刷用 | 高解像度印刷に対応 |
CHECK
▶ 今すぐやること: 自分のFigmaファイルのアイコンレイヤーを1つ選び、SVGで書き出してコードエディタでファイルサイズを確認する（3分）
Q: JPGとSVGはどちらがWeb表示に向いていますか？
A： JPGは写真の圧縮に特化した形式で、SVGのようなベクター要素の表現には向いていません。Webでのアイコン・ロゴにはSVGを、写真はJPGという使い分けが基本です。
Q： SVGはすべてのブラウザで表示できますか？
A： 2025年時点で主要ブラウザ（Chrome・Firefox・Safari・Edge）のすべてがSVGに対応しています。IE11以前では一部非対応でしたが、現在の実務では考慮不要です。
Figma SVG書き出しの対象を3分で診断
書き出したいものがFigmaのどのオブジェクトに当たるのかを把握しておくと、書き出しミスを防ぐことができます。以下の分岐で確認してください。
Q1: 書き出したい対象は単一のアイコン・ロゴですか？
Yesの場合はQ2に進みます。Noの場合はQ3に進みます。
Q2: そのアイコンはコンポーネントまたはフレームの中にありますか？
Yesの場合、コンポーネントまたはフレームそのものを選択してエクスポートします。このとき親フレームではなく、アイコン1つに対応するフレームを選ぶことがポイントです（Result A）。Noの場合、パスやグループをそのまま選択してエクスポートします（Result B）。
Q3: 複数のアイコンをまとめて書き出したいですか？
Yesの場合、Shift+クリックで複数のフレームを選択した後、エクスポートパネルから一括出力します（Result C）。Noの場合、ページ全体またはセクション単位でのエクスポートが必要かどうかをFigmaヘルプで確認してください（Result D）。
Result A: フレーム・コンポーネント単位で書き出す
フレームを選択した状態でエクスポートすると、フレーム内のすべての要素がまとめて1つのSVGになります。アイコンの余白もフレームサイズに合わせて出力されるため、実装時のズレが起きにくくなります。
Result B: グループ・パス単位で書き出す
グループやパスを選択してエクスポートすると、そのパスの境界ボックスがSVGの領域になります。余白の調整が必要な場合は、フレームでラップしてからエクスポートする方が管理しやすいです。
Result C: 複数フレームを一括書き出し
各フレームが個別のSVGファイルとして出力されます。フレーム名がそのままファイル名になるため、書き出し前にレイヤー名を整えておくことがポイントです。
Result D: ページ・セクション全体の書き出し
メインメニューの「ファイル」→「エクスポート」から、ページ単位またはセクション単位での書き出しができます。アセットの棚卸しに使う場面で有効です。
CHECK
▶ 今すぐやること: Figmaを開いて書き出したいアイコンのレイヤーパネルを確認し、コンポーネントまたはフレームとして管理されているかどうかを確認する（2分）
Q: テキストレイヤーはSVGで書き出せますか？
A： 書き出すことは可能ですが、フォントデータが埋め込まれないため、閲覧環境によっては表示が崩れることがあります。テキストをSVGとして使う場合は、事前にアウトライン化（パス変換）しておく方が安全です。
Q： フレームの外にはみ出した要素はSVGに含まれますか？
A： いいえ、含まれません。フレームを選択してエクスポートした場合、フレームの境界ボックス内の要素だけが出力され、はみ出た部分はクリップされます。意図しない切れ込みが発生した場合は、フレームサイズを見直してください。
PR提供: 日本デザインスクール（デザスク）
Figma SVG書き出しは5つの仕組みで軽量化
書き出したSVGが重い、またはコードが複雑で編集しにくいという問題は、設定と前処理の工程で解決できます。仕組みを作ってしまえば、その後の作業時間は大幅に削減されます。
ポイント1: レイヤー名の整備でファイル名を自動化する
【対象】 : 複数アイコンを定期的に書き出しているデザイナーおよびフリーランス
【手順】 : Figmaのレイヤーパネルで書き出し対象のフレームを全選択し、命名規則（例: icon-arrow-right）に従ってリネームします（5分）。次にエクスポートパネルに「+」を追加して形式をSVGに設定し、設定をフレームごとに保存します（2分）。複数フレームを選択した状態でエクスポートすると、レイヤー名がそのままファイル名として出力されます。
【コツと理由】 : 「書き出してからファイル名を変更する」手順より、「書き出し前にレイヤー名を整える」方がファイル名の修正工数をゼロにできます。Figmaはフレーム名をそのままファイル名として使用するため、命名規則をFigmaファイル側で管理すれば、書き出しのたびにリネームする作業が発生しません。チームで同じ命名規則を使えば、実装担当者との認識ズレも防止できます。
【注意点】 : フレーム名にスペースや全角文字を含めると、ファイル名にそのまま反映されてWebサーバーでのパス処理に問題が生じることがあります。ハイフンまたはアンダースコアで区切る命名規則に統一してください。
ポイント2: SVG ExportプラグインでcurrentColor対応を自動化する
【対象】 : CSSで色を制御したいアイコンをFigmaから書き出しているエンジニアおよびデザイナー
【手順】 : Figma CommunityからSVG Exportプラグインをインストールし、対象ファイルで起動します（3分）。プラグインの設定で「Icon」モードを選択し、カラー値をcurrentColorに置換するオプションを有効にします（2分）。対象アイコンを選択してプラグインからエクスポートすると、塗り色がすべてcurrentColorに変換されたSVGが出力されます。
【コツと理由】 : コードエディタで手動置換する手順より、SVG Exportプラグインの設定に任せる方が置換ミスをゼロにできます。標準書き出しのSVGはFigmaで設定した色コードがベタ書きされるため、CSSからの色制御ができません。プラグインを使うとこの変換が自動化されるため、1アイコンあたりの追加作業時間を大幅に短縮できます。
【注意点】 : currentColor変換はアイコンのパスに設定した塗り色すべてに適用されます。多色アイコン（2色以上）の場合、意図しない色が消えることがあるため、変換後のSVGコードを確認する工程は省略しないでください。グラデーションが含まれる要素はcurrentColorでの表現に対応していないため、この方法は使用不可です。
ポイント3: 不要なグループとパスを事前に整理して軽量化する
【対象】 : 書き出したSVGのコードが複雑で実装担当者から指摘を受けているデザイナー
【手順】 : 書き出し対象のフレームを選択し、レイヤーパネルで不要なグループのネストや非表示レイヤーを確認します（5分）。実際の見た目に影響しない非表示レイヤーを削除し、不要なグループはCmd+Shift+Gで解除してパスを整理します（5分）。整理後にSVGで書き出し、コードエディタでファイルサイズと構造を確認します。
【コツと理由】 : 「書き出し後にSVGOなどのツールで圧縮する」方法が定番ですが、「Figmaのレイヤー構造を書き出し前に整える」方がSVGのコード構造そのものがシンプルになるため、後工程の圧縮効率も上がります。Figmaは非表示レイヤーや空グループもSVGのコードとして出力する仕様のため、それらを事前に削除することでコード量を削減できます。圧縮ツールは最後の仕上げに使うものであり、レイヤー整理の代替にはなりません。
【注意点】 : グループを解除するとレイヤー名が失われることがあります。命名規則が設定されているフレームは、グループ解除後にフレーム名が正しいかどうかを再確認してください。コンポーネントのメインコンポーネントを直接編集すると他の箇所に影響が出るため、書き出し専用のフレームに内容をコピーしてから整理するとリスクを抑えられます。
ポイント4: エクスポート設定のプリセットをチームで共有する
【対象】 : 複数人のデザインチームで一貫したSVG書き出し品質を維持したいリーダーおよびフリーランス
【手順】 : SVG Exportプラグインでアイコン用のプリセット（命名規則・currentColor・アウトライン設定）を作成し、JSON形式でエクスポートします（10分）。チームの共有ドライブまたはGitリポジトリにプリセットファイルを格納し、メンバーに配布します（5分）。新規メンバーはプリセットをプラグインにインポートするだけで、チームと同じ書き出し設定を即座に使える状態になります（2分）。
【コツと理由】 : Slackでスクリーンショットを使って設定方法を共有する手順より、プリセットファイルをインポートするだけで完了する仕組みを作る方が、新メンバーへのオンボーディング時間を短縮できます。設定のドキュメント化は手間がかかる一方で、人が増えるほど書き出し品質のばらつきが出やすくなるため、ファイルで管理することが根本的な解決策です。
SVG Exportプラグインでプリセットを適用し、アイコンを軽量化しながらcurrentColor向けに変換したデザイナーは、「書き出し工程の属人化を解消できた」と語っています（FigmaでSVGアイコンを軽量化させつつcurrentColorへ変換する実践記）。なお、こうした書き出しの仕組み化は作業効率上げる方法の記事で紹介している「繰り返し業務をテンプレート化する」アプローチとも共通しています。
【注意点】 : プリセットは書き出し設定の共有には有効ですが、Figmaファイル内のレイヤー命名規則が統一されていないと、ファイル名の整合性が取れなくなります。プリセット配布と並行してレイヤー命名規則のドキュメントも整備してください。プリセットだけ配布して「あとは自由」という運用は逆効果です。
ポイント5: 書き出し後のSVGをSVGOで仕上げ圧縮する
【対象】 : Webパフォーマンスを重視するWeb制作者およびFigmaでアセットを管理しているフロントエンドエンジニア
【手順】 : SVGO公式CLIまたはWebブラウザで使えるSVGOMGをインストールし、FigmaからエクスポートしたSVGファイルを入力します（5分）。SVGOMGのスライダーで「Remove viewBox」がオフ、「Prettify markup」がオフになっていることを確認してから実行します（1分）。出力されたSVGのファイルサイズをエクスポート直後と比較し、削減率を確認します。
【コツと理由】 : FigmaのエクスポートはSVG出力の出発点であり、SVGO通過後のSVGを納品物として使う方がファイルサイズの削減が見込め、ページパフォーマンスに直結します。Figmaが出力するSVGには実装に不要なメタデータやコメントが含まれることがあり、SVGOはこれらを自動で除去します。SVGO通過前のSVGをそのまま本番に使う必要はありません。
【注意点】 : SVGOの一部オプションはviewBox属性を削除したり、IDを変更したりすることがあります。インラインSVGとしてCSSアニメーションを適用している場合は、IDが消えると動作が壊れるため、圧縮後に動作確認を省略しないでください。複数のSVGを一括圧縮する場合も、1ファイルずつ確認するか自動テストを組み込むことをおすすめします。
CHECK
▶ 今すぐやること: Figmaから任意のアイコンをSVGで書き出し、SVGOMGに貼り付けてファイルサイズの変化を確認する（5分）
Q: currentColorはHTMLインラインSVGでのみ有効ですか？
A： いいえ、インラインSVGのほか、CSSのmask-imageを使ったアイコン実装でも機能します。<img>タグでSVGを読み込む場合はCSSが適用されないため、currentColorの効果は得られません。インラインSVGまたはCSSマスクの実装方式が必要です。
Q： SVGOで圧縮するとSVGが崩れることはありますか？
A： デフォルト設定でも一部のSVGで視覚的な変化が起きることがあります。特にviewBoxの削除やパスの最適化が影響することがあるため、圧縮後は必ずブラウザで表示確認をする工程を設けてください。
Figma SVG一括書き出しは3ステップで完了
Figmaには複数オブジェクトを選択して一括書き出しする機能が標準で備わっています。正しい手順を覚えれば、複数アイコンの書き出し作業時間を大幅に削減できます。
複数フレームを選択してエクスポートする
書き出したいフレームをShift+クリックまたはCmd+A（全選択）で複数選択し、右サイドバーのエクスポートパネルに「+」を追加してSVGを選びます。「{数}個の要素をエクスポート」ボタンが表示されるのでクリックすると、選択した各フレームが個別のSVGファイルとして出力されます。このときフレーム名がそのままファイル名になるため、事前にレイヤー名を整理しておくことがポイントです。
エクスポートセクションのプリセット設定を活用する
エクスポートパネルでは倍率（1x / 2x / 3x）と形式（PNG / SVG）を組み合わせたプリセットを1つのレイヤーに複数追加できます。1xのSVGと2xのPNGを同時に設定しておくと、エクスポート時に両形式が一括で出力されます。アイコンごとに毎回設定を変える必要がなくなるため、設定の統一と書き出し速度の両方が改善されます。
フレーム外の要素をスライスで管理する
フレームの境界に収まらない要素、または複数のフレームにまたがるデザイン要素は、スライスツール（Sキー）で書き出し範囲を指定して管理できます。スライスを作成してエクスポートパネルでSVGを設定すると、スライスの範囲が1つのSVGとして出力されます。フレーム構造を崩さずに特定の範囲だけを書き出したいケースで有効な方法です。
書き出し形式の使い分けを実践しているデザイナーは、「右下のエクスポート設定からPNG/JPG/SVG/PDFを選び、用途に応じて書き出す流れが定着した」と語っています（Figmaのエクスポート(書き出し)実務記事）。素材アイコン無料サイト5選の記事でも触れているように、SVG形式を優先してダウンロード・管理することで、プロジェクト全体の資産管理が大幅にシンプルになります。
CHECK
▶ 今すぐやること: Figmaでアイコンが入った複数のフレームをShift+クリックで選択し、エクスポートパネルに「+」を追加してSVGを設定してからエクスポートボタンを押す（4分）
Q: ページ内のすべてのフレームを一括書き出しするにはどうすればよいですか？
A： Cmd+A（Mac）またはCtrl+A（Windows）でページ内のすべてのオブジェクトを選択した後、エクスポートパネルでSVGを設定してエクスポートできます。エクスポート設定が追加されていないオブジェクトがある場合は、一括選択後に設定を追加すると全フレームに適用されます。
Q： エクスポートしたSVGのファイル名をまとめて変更する方法はありますか？
A： Figmaのエクスポート機能自体にリネーム機能はありません。書き出し後にFinderまたはExplorerで一括リネームするか、gulpやNode.jsのスクリプトを使ってファイル名を変換する方法が実務では使われています。根本的な解決策はFigmaのレイヤー名を書き出し前に統一することです。
Figma SVG書き出し前の確認は7項目
書き出し前に7項目を確認する習慣をつけることで、納品後の修正依頼の発生率を大幅に減らせます。
この7項目のうち、実務上のトラブル原因として最も多いのはテキストのアウトライン化漏れとラスター要素の混入です。アイコンを作る際に途中で文字を仮配置したまま忘れることや、外部から貼り付けたPNG画像がレイヤーに残っていることがよくある原因として挙げられます。書き出し前にこの2点を重点確認する運用にするだけで、手戻りの大部分を防ぐことができます。大容量ファイル送る無料の記事でも触れているように、納品ファイルの品質チェックと適切な送付方法をセットで意識することで、クライアントとのやり取りがよりスムーズになります。
| 確認項目 | 確認内容 | 対応方法 |
| 1. レイヤー名 | スペース・全角文字が含まれていないか | ハイフン/アンダースコアに置換 |
| 2. 非表示レイヤー | 非表示のまま残っているレイヤーがないか | 不要なものは削除 |
| 3. テキスト | 書き出すSVGにテキストレイヤーが含まれていないか | アウトライン化（パス変換）する |
| 4. ラスター要素 | PNG・JPGの埋め込み画像が含まれていないか | ベクターに置き換えるか別形式で出力 |
| 5. フレームサイズ | 書き出したいコンテンツがフレームに収まっているか | フレームをコンテンツに合わせてリサイズ |
| 6. エクスポート形式 | 形式がSVGに設定されているか | エクスポートパネルで確認 |
| 7. グループ構造 | 不要なネストが残っていないか | Cmd+Shift+Gでグループ解除 |
CHECK
▶ 今すぐやること: 直近で書き出したSVGファイルをコードエディタで開き、<image>タグまたは<text>タグが含まれていないかどうかを検索して確認する（3分）
Q: ラスター要素が混入したSVGはどうやって見つけますか？
A： SVGのソースコードを開いて<image>タグが含まれているかどうかを検索するのが最速の確認方法です。Figmaのレイヤーパネルで対象フレームを展開し、「画像」と表示されているレイヤーが含まれていないかどうかを事前に確認することも有効です。
Q： テキストのアウトライン化はFigmaでどうやって行いますか？
A： テキストレイヤーを選択してCmd+Shift+O（Mac）またはCtrl+Shift+O（Windows）を押すと、テキストがアウトライン化されてパスに変換されます。アウトライン化後はテキストの編集ができなくなるため、元のテキストレイヤーはグループとして保持しておくことをおすすめします。
Figma SVGは2ルートと5仕組みで完結
FigmaのSVG書き出しは、エクスポートパネルと右クリックコピーの2ルートを目的別に使い分けることが出発点です。アイコン実務においてはレイヤー名の整備・currentColor対応・SVGOによる圧縮を一連の手順として仕組み化することで、書き出しのたびに発生していた手作業を大部分なくすことができます。フリーランスの場合は、自分専用の書き出しテンプレートをFigmaファイルとして持っておくと、案件をまたいで品質を統一できます。
SVGの書き出し品質は、Figmaでの設計段階のレイヤー管理と書き出し後の圧縮工程の両方が揃ってはじめて安定します。次のアイコンを書き出すときにレイヤー名をハイフン区切りで統一し、SVG Exportプラグインを一度試してください。
| 状況 | 次の一歩 | 所要時間 |
| 初めてSVGを書き出す | エクスポートパネルでSVGを選んでダウンロードする | 3分 |
| アイコンの色をCSSで変えたい | SVG ExportプラグインでcurrentColor変換を試す | 10分 |
| 書き出しSVGが重い | SVGOMGで圧縮してサイズを比較する | 5分 |
| 複数アイコンを一括で出力したい | フレームを複数選択してエクスポートパネルを設定する | 4分 |
| チームで品質を統一したい | プリセットJSONを作成して共有フォルダに保存する | 15分 |
Figma SVG書き出しに関するよくある質問
Q: 書き出したSVGをFigmaで開き直すことはできますか？
A： はい、FigmaはSVGファイルのインポートに対応しており、ドラッグ&ドロップまたは「ファイル」→「読み込む」から取り込めます。ただし、Figmaが出力したSVGをインポートすると、グループやフレームの構造が元のレイヤー構成と異なる形で展開されることがあります。
Q： 「書き出しできない」と表示される場合の原因は何ですか？
A： エクスポート設定が追加されていない状態でエクスポートしようとすると出力されないことがあります。エクスポートパネルに「+」でSVGを追加してから再試行してください。ブラウザ版Figmaではダウンロードのブロックが発生することがあるため、ダウンロードの許可設定を確認することも有効です。
Q： FigmaのSVGはIllustratorで開いて編集できますか？
A： 多くの場合、FigmaからエクスポートしたSVGはIllustratorで開いて編集できます。ただし、Figmaの一部のエフェクト（ブラーや一部のブレンドモード）はSVGの標準フィルタとして出力されるため、Illustratorでの表示が異なるケースがあります。
【出典・参照元】
Figmaからのエクスポート – Figma公式ヘルプ（エクスポート対象と手順の基本情報）
SVG Export（Figma Community） – currentColor対応・軽量化プラグイン
FigmaでSVGアイコンを軽量化させつつcurrentColorへ変換する実践記 – プリセット活用の体験談
Figmaのエクスポート(書き出し)実務記事 – 書き出し形式の使い分け実務解説
Tip: You can use Figma for easy SVG editing and exporting – SVGとしてコピーの活用体験談
SVGO公式CLI – SVG圧縮ツール