はじめに
AI(ChatGPT, Claudなど)で生成したSVGは、そのままでは使いづらいことが多いです。Figmaを使えば、生成されたSVGを通常のベクターレイヤーとして編集できます。この記事では、SVGファイルをFigmaに取り込んで編集し、最適化して書き出すまでの基本的な流れを解説します。
SVGをFigmaで編集できるようにする
インポート方法
-
ドラッグ&ドロップ
- SVGファイルをFigmaのキャンバスに直接ドロップ
- 複数ファイルを一度にドロップ可能
-
メニューからインポート
- File > Import files（⌘/Ctrl + Shift + K）
- Place image/videoボタンをクリック
-
コピー&ペースト
- SVGファイルの内容をクリップボードにコピー
- Figmaに直接ペースト
例えば、カレーの作り方の手順のSVGをインポートしたときの様子。
グループ解除で要素ごとに編集できるようになる。
インポート後の状態
重要：インポートされたSVGは通常のベクターレイヤーとして編集可能になります
- パスの編集
- カラーの変更
- サイズ調整
- 各要素の選択・移動
- エフェクトの適用
基本的な編集操作
レイヤーの選択
- ダブルクリックで個別のレイヤーを選択
- 左のレイヤーパネルから選択
- 複数選択：Shift + クリック
よく使う編集機能
- サイズ変更：トランスフォームコントロール
- カラー変更：カラーピッカー
- パスの編集：ベクターツール
- グループ化/解除：⌘/Ctrl + G / ⌘/Ctrl + Shift + G
SVGの書き出し
基本的な書き出し
- 要素を選択
- 右パネルのExportセクション
- Format: SVGを選択
- Export選択範囲をクリック
エクスポート設定のポイント
-
Include "id" attribute
- SVGの識別子を含める
- 開発時の操作に有用
-
Outline stroke
- ストロークをアウトライン化
- 表示の一貫性を保つ
一括エクスポート
- 複数要素の選択
- エクスポート設定
- Export allで一括書き出し
まとめ
- SVGファイルはFigmaに簡単にインポート可能
- インポートすると通常のベクターレイヤーとして編集可能
- 必要な編集を加えた後、最適化してSVGとして書き出せる
この基本的な流れを押さえておけば、AIで生成したSVGを編集する効率があがります。一般的な技術記事作成、勉強会の資料作成などで活用できそうです。オンラインで作業できるので、出先の環境でも作業できそうです。