Amazonで商品を見るセール会場へ

Adobe XD・IllustratorをFigmaへ移す方法|対応形式・SVG・画像になる原因

Figmaの標準インポートに.xdと.aiは含まれていません。Illustratorから編集可能なベクターを移す場合はSVG、見た目を1枚の画像として残す場合はPNG・JPGを使います。PDFは、Figmaの標準インポートでそのまま編集できる形式として案内しません。

この記事は2026年10月3日に確認した公式資料に基づき、形式の選び方と貼り付けの問題を説明します。XD・Illustratorからの変換やプラグインの実操作は未検証です。Figmaが読み込める形式

目次

どの形式で移すか

元データ・目的移行方法移らないもの・確認点
Illustratorのパスを編集したいSVGを書き出して読み込む、またはSVGコードを含めてコピーテキスト、効果、マスク、SVGの未対応要素
XDの画面を見た目として参照したいPNG・JPGを書き出す編集可能なレイヤー、コンポーネント、画面遷移
XDのベクター素材を移したいSVGを書き出して読み込むXD側のコンポーネント参照やプロトタイプ
レイヤーを保った一括変換が必要第三者の変換プラグインを少量で試す対応範囲・料金・データ処理条件を提供元で確認
Sketchファイルがある標準の.sketchインポートスタイルとライブラリ接続は別途確認

.pptxはファイルブラウザーの対応形式ですが、スライドの読み込みであり、XDの画面をDesignファイルへ変換する方法ではありません。.figはFigma Designのローカルファイルです。各拡張子がどの製品へ読み込まれるかも確認してください。

Illustratorから貼ると画像になる原因

Figma公式は、Illustrator 29.7.1以降、ベクターのコピー時にSVGコードが初期設定で含まれなくなったと案内しています。その状態でFigmaへ貼り付けると、静止画像になります。

Illustratorの環境設定のClipboard HandlingでInclude SVG Codeを有効にし、対象をコピーし直してFigmaへ貼り付けます。貼り付け後はレイヤーを選び、Vectorなどの編集可能な要素か、画像を持つRectangleかを確認してください。Figma公式のIllustrator対処

貼り付けに失敗するときはSVGを経由する

同じ公式記事ではIllustrator 29.8.1のコピー&ペースト不具合と、SVGで書き出してから読み込む回避策も案内しています。すべてのバージョンが同じ状態だと断定せず、使っている版を確認して対処します。

  1. Illustratorで移したい範囲をSVGとして書き出します。
  2. Figma DesignファイルへSVGを読み込みます。
  3. パス、グループ、マスク、文字の状態を確認します。
  4. 元のアートワークと表示を比較し、色・文字・余白を調整します。

SVGであってもすべての要素がそのまま移るわけではありません。Figma公式はmarker・pattern要素がインポートに含まれないと案内しています。また、文字をアウトラインにすると見た目の維持には使えますが、テキストとしての編集はできなくなります。ツール間のSVGコピー、SVG書き出しの注意

Adobe XDから移す場合

Figmaの標準対応形式に.xdは含まれていません。XDで画面を画像として書き出す方法と、個別素材をSVGとして移す方法を、必要な編集範囲に応じて選びます。

画像として配置すれば見た目の参照はできますが、Figmaのテキスト・オートレイアウト・コンポーネントになるわけではありません。UIを今後も編集する場合は、必要な画面からFigmaで再構成する範囲を決めます。オートレイアウト、プロトタイプの作成

第三者の変換プラグインを使う場合は、同じ素材を少量で試し、レイヤー名・編集可能な文字・参照・遷移の保持を確認します。現在の料金やファイルの送信先は提供元の条件を確認してください。「変換できる」と「全機能が同じまま移る」は区別します。

移行後に確認する項目

  • フォント名・ウェイト・改行・行間は一致しているか。
  • 文字がアウトラインや画像になっていないか。
  • 画像の解像度、マスク、描画効果は意図どおりか。
  • コンポーネント、スタイル、VariablesをFigmaで再設定する必要があるか。
  • 元ファイルを残したまま、必要な編集と書き出しができるか。

Sketchを移す場合は.sketchインポート、PSDの過去の変換例はpsd.to.designの読み込み記録を参照してください。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Figmaのおすすめ書籍

Figma用PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次