Illustratorの.aiとFigmaのデータは、無料のFigmaプラグイン「Vector Porter for Figma」を使うと、レイヤーと文字を編集できる形のまま相互に変換できます。
SVGやPDFを経由したときと違い、レイヤーの名前と文字のまとまりが残ります。
Illustrator 2026で開いて比べた色の差は、Figmaから.aiへの18フレームで平均1.41、.aiからFigmaへの83項目で平均0.80でした。
なお、Vector Porter for Figmaの開発元は、Figmaメソッドの運営元であるMOTOKI合同会社です。
プラグインは、Figma CommunityのVector Porter for Figmaのページから無料で追加できます。
Vector Porter for Figmaでできること
プラグインには「Figma → .ai」と「.ai → Figma」の2つのタブがあります。
どちらも、できるだけ編集できる形で変換し、そのまま再現できなかった部分は「変換レポート」に理由と対処法つきで一覧にする作りです。
2026年11月5日時点で公開しているのは、2026年10月14日のバージョン1です。
SVGやPDFを経由して移す方法との違いは、Adobe XD・IllustratorをFigmaへ移す方法で比べました。
.ai → Figma
| Illustrator | Figmaでの形 |
|---|---|
| アートボード | フレーム（位置もそのまま） |
| レイヤー・サブレイヤー・グループ | 名前つきのグループ |
| パス・複合パス | ベクター（塗りの規則も保つ） |
| 塗り（RGB・CMYK・グレー・特色） | 単色の塗り |
| 線形・円形グラデーション | グラデーション（中間点・不透明度も反映） |
| 線（太さ・線端・角の形・破線） | 線 |
| 不透明度・描画モード16種類 | 不透明度・描画モード |
| クリッピングマスク | マスク |
| 埋め込み画像 | 画像の塗り |
| シンボル | 展開して配置 |
| ポイント文字・エリア内文字 | Figmaの文字（フォント・サイズ・色・字間・行送り・揃え） |
| ドロップシャドウ・ぼかしなどの効果 | Illustratorが保存した見た目 |
Illustratorがなくても読み込めます。
文字はIllustratorが組んだ行の位置に合わせて置くので、改行の位置がずれにくい作りです。
Figma → .ai
| Figma | Illustratorでの形 |
|---|---|
| フレーム | アートボードとレイヤー |
| グループ・コンテンツをクリップするフレーム | グループ・クリッピングマスク |
| 図形・ブーリアン | パス（ブーリアンは計算済みの形） |
| 単色・線形グラデーション | 塗り・グラデーション |
| 画像の塗り | 埋め込み画像 |
| テキスト | 編集できるポイント文字（Figmaの折り返し位置で改行） |
| 不透明度・描画モード | 不透明度・描画モード |
| 影・ぼかし | 画像（図形は編集できるまま残す） |
Illustratorにない表現（影・ぼかし・角度グラデーションなど）は見た目どおりの画像にします。
影は「影だけの画像」を図形の下に置くので、図形そのものはIllustratorで編集できます。
使い方
.aiをFigmaに読み込む
- Figmaのファイルを開き、プラグインからVector Porter for Figmaを実行する
- 「.ai → Figma」タブを選ぶ
- .aiファイルをドロップするか、クリックして選ぶ
- アートボードごとにフレームが作られ、変換レポートが表示される
リンクした画像（埋め込んでいない画像）は.aiの中にないため読み込めません。
Illustratorで画像を埋め込んでから保存してください。
Figmaのフレームを.aiにする
- 書き出したいフレームを選択して、プラグインを実行する
- 「Figma → .ai」タブで、選択中のフレームかページ全体かを選び、「変換」を押す
- .aiと変換レポートの入ったZIPを保存する
複数のフレームを選ぶと、1つの.aiに複数のアートボードとして並べます。
文字を正しく表示するには、Illustrator側に同じフォントが必要です。
変換の精度をIllustratorで確かめた
変換したデータを実際にIllustrator 2026で開き、元の表示と画像で比べました。
数値は色の差（ピクセルごとのRGBの差、0〜255）の平均で、0なら完全に一致、1.0以下なら並べてもほとんど見分けがつきません。
Figma → .ai：機能別の18フレーム
図形・ブーリアン・グラデーション・画像・線・影・ぼかし・マスク・描画モード・テキスト・コンポーネント・オートレイアウトなどを1フレームずつ入れたFigmaのファイルを.aiにし、Illustratorで開いた表示をFigmaの表示と比べました。
| フレーム | 色の差 | メモ |
|---|---|---|
| 図形・ブーリアン・画像・影・マスク・変形・描画モード・グループの合成・オートレイアウト・フレームの背景（11フレーム） | 0.19〜0.80 | ほぼ一致 |
| 複数の塗り・線・ぼかし・コンポーネント | 1.23〜1.72 | 線の端や文字の細部の差 |
| 日本語のテキスト | 3.11 | 文字の位置は一致。字形の描き方（なめらかさ）の差 |
| グラデーション | 5.35 | 円形グラデーションの中心と大きさがIllustratorの既定になる |
| 英語のテキスト | 5.43 | 文字の位置・改行・揃えは一致。字形の描き方の差 |
| 18フレームの平均 | 1.41 |
テキストは編集できる文字のまま、Figmaと同じ位置で改行されています。
差が残っているのは、同じフォントでもFigmaとIllustratorで文字の輪郭のなめらかさ（アンチエイリアス）が違うためです。
円形グラデーションは、.aiの中での中心と大きさの書き方がまだ解けていないため、Illustratorの既定の位置になります（変換レポートに表示します）。
.ai → Figma：機能別の83項目
Illustrator自身に、1つの機能を1つのアートボードに入れた.ai（83項目）を作らせました。
それをプラグインでFigmaに読み込み、Figmaの表示（PNGの書き出し）をIllustratorの表示と比べています。
| 分類 | 項目数 | 差1.0以下 | 平均 |
|---|---|---|---|
| シェイプ | 10 | 10 | 0.16 |
| 塗り・グラデーション | 10 | 10 | 0.28 |
| 線 | 8 | 6 | 1.19 |
| 透明（不透明度・グループの合成） | 5 | 4 | 0.34 |
| 描画モード | 15 | 14 | 0.41 |
| レイヤー・グループ・非表示 | 6 | 6 | 0.07 |
| マスク | 4 | 4 | 0.22 |
| 画像 | 4 | 4 | 0.10 |
| シンボル | 1 | 1 | 0.11 |
| 効果 | 6 | 6 | 0.11 |
| テキスト | 14 | 3 | 3.01 |
| 全体 | 83 | 68 | 0.80 |
線の2項目は破線で、Figmaが破線の始まりの位置を少しずらして描くための差です。
描画モードの1項目はソフトライトで、FigmaとIllustratorの計算式の違いです。
テキストは14項目のうち3項目が差1.0以下で、どれも編集できる文字のまま読み込まれています。
| テキストの項目 | 色の差 | 理由 |
|---|---|---|
| 回転 | 0.41 | ほぼ一致 |
| 和文 | 0.54 | ほぼ一致 |
| 複数行 | 1.16 | ほぼ一致 |
| 欧文のポイント文字 | 3.16 | 位置は合っている。字形の描き方の差 |
| パス上文字 | 5.82 | Figmaにない。パスの始まりに横書きで置く |
| 水平比率 | 6.13 | Figmaにない。反映されない |
| 縦書き | 10.08 | Figmaにない。横書きになる |
差が大きい3項目は、変換レポートに理由を表示します。
読み込んでから書き出す往復も確かめた
また、.aiを読み込んで、もう一度.aiに書き出してIllustratorで開く「往復」も確かめました。
83項目中80項目で差1.0以下（平均0.30）です。
読み込みと書き出しのどちらにも大きな取りこぼしがないことの確認になります。
うまくいかないときの原因と対処
変換で元どおりにならない部分は、変換レポートに理由と一緒に並びます。
よく出るものを、症状から引けるようにまとめました。
| 症状 | 原因 | 対処 |
|---|---|---|
| Figmaに読み込んだら画像が抜けている | リンクした画像は.aiの中に入っていない | Illustratorで画像を埋め込んでから保存し直す |
| 縦書き・パス上文字が横書きになった | Figmaに同じ機能がない | 変換レポートで該当の文字を確かめ、Figmaで組み直す |
| 文字の幅や高さが元と違う | 文字の水平・垂直比率は反映されない | 変換レポートで対象を確かめ、サイズや字間で合わせる |
| 効果の設定がFigmaに残っていない | Illustratorの効果（ライブエフェクト）は、保存された見た目で読み込む | 効果を変えたいときは、Illustratorで直してから読み込み直す |
| Illustratorで円形グラデーションの中心がずれる | 中心と大きさがIllustratorの既定になる | Illustratorのグラデーションツールで中心を合わせ直す |
| 影・ぼかし・角度やひし形のグラデーションが画像になった | Illustratorにない表現は見た目どおりの画像にする | 図形は編集できるまま残るので、必要なら影をIllustratorの効果で付け直す |
| 文字が別のフォントで表示される | 開いた側に同じフォントが入っていない | 同じフォントを入れてから開き直す（文字の内容は残っている） |
ファイルは外部に送信しない
変換はすべてプラグインの中で行い、通信は一切しません（プラグインの設定でネットワークへのアクセスを「なし」にしています）。
社外に出せないデザインデータでも使えます。
PSDの変換には PSD Porter for Figma
Photoshop（PSD）とFigmaの変換には、同じ考え方で作ったPSD Porter for Figmaがあります。
こちらも無料で、レイヤーを保ったまま双方向に変換するプラグインです。
使い方と精度はPSD Porter for Figmaの使い方、Photopeaとの比較はFigmaとPSDの変換精度をPhotopeaと比べたにまとめました。
フォルダ単位の一括変換や、Figmaなしで使えるWeb版の変換ツールは有料で提供しています。
ご相談はMOTOKI合同会社のお問い合わせページからどうぞ。
まとめ
- Vector Porter for Figmaは、.aiとFigmaをレイヤーと文字を編集できるまま相互に変換する無料のプラグインです。
- Illustratorがなくても.aiを読み込めます。
- 測った色の差は、Figmaから.aiで平均1.41、.aiからFigmaで平均0.80でした。
- 縦書き・パス上文字・効果の設定・一部のグラデーションは元どおりにならず、変換レポートに理由が出ます。
- PSDとの変換には、同じ考え方で作ったPSD Porter for Figmaが使えます。
※ Adobe、Illustrator、PhotoshopはAdobe Inc.の商標です。
Vector Porter for FigmaはAdobeとは関係ありません。