「Adobe Illustrator（.ai）形式のファイルを受け取ったけれどFigmaで開きたい…」
Figmaは無料で使えるデザインツールで、工夫すればAIファイルを編集できます。クラウドベースで動作するUI/UXデザインツールとしても有名で、PCの環境に依存せずどこからでもアクセスできることで広がりました。
本記事では、FigmaでAIファイルを開く方法から、編集可能な形式に変換する手順までをわかりやすく解説します。
FigmaはAIファイルを直接開ける？
結論からお伝えすると、FigmaでAIファイル（Adobe Illustrator形式）を直接開くことはできません。
AIファイルは基本的にAdobe製品向けの独自フォーマットであり、FigmaはAIファイルをサポートしていません。そのため、AIファイルをクリックするだけでFigmaが起動したり、Figma上でAIファイルを指定して開くことができないので注意しましょう。
ただし、AIファイルをFigmaの対応形式に変換することで、開けるようになります。一切開けないわけではないため、ひとまずの利用法として活用する分には十分です。
FigmaでAIファイルを開く方法
AIファイルをFigmaで扱うためには、SVGやPDFなど互換性のある形式に変換してインポートする必要があります。ここでは、FigmaでAIファイルを開く方法を解説します。
方法①：SVG形式に変換してインポート
SVGとは、画像を点・線・図形などの数値情報で表現するベクター形式の画像ファイルです。拡張子は「.svg」で表記され、どれだけ拡大してもギザギザにならずロゴやアイコンなどの制作でよく使われます。
- IllustratorでAIファイルを開く
- メニューから [ファイル] → [書き出し] → [書き出し形式] を選択
- ファイル形式でSVGを選ぶ
- 必要に応じて「テキストをアウトライン化」などの設定を行い保存
- 保存したSVGファイルを Figmaにドラッグ＆ドロップ
ただし、この方法はIllustratorがインストールされているPCがあることが条件です。第1ステップで「IllustratorでAIファイルを開く」ことが必要なので注意しましょう。
方法②：PDF経由で読み込む
IllustratorがインストールされているPCがないときは、AIファイルをPDFに変換して読み込みます。
- AIファイルの拡張子を「.ai」→「.pdf」に変更
- PDFを開いて、オンライン変換ツールで SVGに変換
- 出力したSVGをFigmaにインポート
オンライン変換ツールの例として、CloudConvertやConvertioが挙げられます。
いずれもオンラインのファイル変換サービス（Webツール）であり、インストール不要でブラウザ上から使えます。無料枠が解放されているので、コストをかけずに使えるのもメリットです。
また、読み込まれたPDFはベクター情報を保持しているので、パスや図形として編集できます。
FigmaでAIファイルを開くときの注意点
FigmaでAIファイルを開くときは、事前にSVGやPDFなどFigmaが対応する形式に変換する必要があります。しかし、フォントの文字化けやレイヤー構造の崩れ、画像リンクの未表示など、変換時に起こりやすいトラブルにも注意が必要です。
ここでは、AIファイルをFigmaで扱う際に押さえておきたいポイントを解説します。
フォントが埋め込まれていないと文字化けが起きる
Illustrator側でフォントが埋め込まれていない場合、Figmaで開いたときに文字化けが起きる可能性があります。
特に、AIファイル内で使用されているフォントがFigma環境に存在しないときは、文字が正しく表示されません。文字化けや別のフォントへの自動置き換えが発生し、想定していたデザインが乱れてしまうので注意しましょう。
文字化けを防ぐ方法は、以下の通りです。
【Illustratorでアウトライン化（埋め込み）する方法】
- メニューから [文字] → [アウトラインを作成] を選択
- 文字を図形化することで、フォント情報がなくても正しく表示される
【フォントをFigmaにインストールする方法】
- 使用したフォントをFigmaに同期させる
- ライセンスによってはインストールできない場合もある
ただし、アウトライン化して埋め込むと、文字として編集できなくなります。文字を編集する必要があるときはフォントの同期を、文字を編集する必要がないときはアウトライン化して図形として扱うことを意識しましょう。
レイヤー構造が崩れる場合がある
AIファイルにはIllustrator特有のレイヤーやグループ構造がありますが、FigmaはAI形式に対応していないため、変換時にレイヤーが統合されたり順序が変わる可能性があります。特に、複雑なグラデーションやエフェクトを使っている場合に崩れやすいので注意しましょう。
レイヤー構造の崩れを防ぐ方法は、以下の通りです。
- 不要なレイヤーやオブジェクトを整理してから書き出す
- グループ構造をシンプルにする
- 重要な要素はアウトライン化してベクター化する
- 変換後にFigma上で再調整を想定しておく
編集性を保つには、事前の整理・簡略化・アウトライン化が有効です。
外部リンク画像が表示されない場合がある
AIファイル内で使用されている画像が「外部リンク（リンク配置） 」である場合、Figmaに移すとリンク先の画像データが存在しないため表示されません。
つまり、「Illustratorではリンクがあって見えていた画像がFigmaでは読み込めない」という現象が起こります。
対策は、以下の通りです。
- 画像を埋め込みに変換してから書き出す
Illustratorで [リンク] パネル → リンク画像を選択 → 埋め込み
- 複雑な画像は事前にラスタライズ（ビットマップ化）する
編集の必要がなければラスタライズしても安全です
ラスタライズとは、ベクター形式のデータをピクセル（ドット）の集合に変換する処理のことです。IllustratorやPhotoshopでよく使われる操作で、他環境で正しく表示できない効果をピクセル化して保持する効果があります。
まとめ
Figma上でAIファイルを直接開くことはできませんが、SVGやPDFなど互換性のある形式に変換することで編集できます。
Illustratorから直接SVGやPDFとして書き出す方法が最も安定していますが、オンライン変換サービスを利用してAIファイルをSVGやPDFに変換して使ってもよいでしょう。フォントの埋め込みや画像のラスタライズなどに配慮しつつ進めれば、大きなデザイン崩れも防げます。
FigmaAIファイルに関する重要用語
| 用語 | 説明 |
| Figma | 無料で使えるデザインツール。クラウドベースで動作するUI/UXデザインツールとしても有名。 |
| AIファイル | Adobe Illustratorが作成する ベクター形式のデザインファイル。拡張子は「.ai」で表記され、ロゴやアイコンなどを高解像度で保存・編集できる。 |
| SVGファイル | 画像を点・線・図形などの数値情報で表現するベクター形式の画像ファイル。拡張子は「.svg」で表記される。 |
| PDFファイル | 文書・画像の表示形式。環境やソフトに依存せず同じ見た目で閲覧できるのが特徴で、拡張子は「.pdf」で表記される。 |
| CloudConvert | ブラウザ上で動作するオンラインのファイル変換サービス。1日あたり25回まで無料で変換可能。 |
| Convertio | ブラウザ上で動作するオンラインのファイル変換サービス。最大100MBまでのファイルを無料で変換可能。 |
| ラスタライズ | ベクター形式のデータをピクセル（ドット）の集合に変換する処理。 |
