XDからFigmaへ、変換プラグイン「XD to Figma Converter」を作りました

Adobe XDからFigmaへの移行作業は、2026年現在でもプロジェクトによって発生することがあります。 私たちもこれまで、XDからFigmaへ変換できるConvertify（新しいタブで開く）を利用していました。ただ、無料プランには利用回数の制限もあり、社内で自由に継続的に使うには扱いづらい面もありました。

そこで、XDからFigmaへの移行に特化したプラグインを、自分でつくることにしました。

▼作成したプラグインはこちら

Adobe XDの.xdファイルを、編集可能なFigmaレイヤーへ変換するプラグイン『XD to Figma Converter』

www.figma.com/community/plugin/1666633599692938706/xd-to-figma-converter

（新しいタブで開く）

最初に決めたこと

プラグイン開発の最終目標は、Convertifyを完全に再現することではありません。 XDのデータを完全に同じ見た目へ変換することには限界がありますが、できる限り元のデータを維持したまま、「社内で自由に使える代替手段をつくること」を重視しました。

変換機能の要件

まずは、変換処理に必要な機能を整理しました。

XDファイルをドラッグ＆ドロップできること、Figma上に新しいページを作成すること、アートボードやグループ構造をできるだけ保持することを基本としました。

また、次の要素にも対応できるようにしました。

• テキスト、図形、画像、ベジェ曲線の変換
• 画像のトリミングや円形マスク
• シャドウ、ぼかし、グラデーション、ブレンドモード
• 複数アートボードの一括変換

UIの細かな調整は後からでも対応できるため、まずは見た目よりも変換処理そのものを動かすことを優先しました。

試作と検証を重ねる｜座標ずれ・シャドウ・SVGパス

Figmaプラグインの雛形を用意し、XDファイルから何を読み取り、Figma上でどのようなレイヤーを作るのかを整理しました。

最初の試作では、XDファイルの読み込みからFigmaへの変換まで、思っていたより早く動かすことができました。変換中のプログレスバーも、早い段階で実装できました。 一方で、実際のデータを変換してみると、さまざまな課題が見つかりました。

• 座標がずれる
• ドロップシャドウ、角丸が再現されない
• 画像やマスクの見え方が異なる
• SVGパスが正しく表示されない

検証用XDファイルを作成

参照するXDファイルに含まれていない機能は、そもそも検証できないため、上記の要素を含めた検証用XDファイルを用意しました。

角丸、ドロップシャドウ、インナーシャドウ、ぼかし、グラデーション、ブレンドモード、SVGパス、画像マスクなどを全て配置し、ひとつずつ変換結果を確認し、問題が見つかるたびに、XDファイルの構造とFigma側の仕様を照らし合わせながら、変換処理を調整していきました。

XDとFigmaの仕様を公式ドキュメントから確認

XDファイルの構造を確認しながら、Adobe XDとFigmaの公式ドキュメントも参照しました。 特に確認したのは、次のような仕様です。

• XD
  • Scenegraph
  • 座標系とローカル座標
• Figma
  • VectorPath
  • BlendMode

XDとFigmaでは、SVGパスの対応命令や座標の扱いが異なります。そのため、単純にデータをコピーするのではなく、Figma側の仕様に合わせて変換する必要がありました。

• Figma Plugin API / VectorPath（新しいタブで開く）
• Figma Plugin API / Effect（新しいタブで開く）
• Figma Plugin API / BlendMode（新しいタブで開く）
• Adobe XD Plugin API / Scenegraph（新しいタブで開く）
• Adobe XD Coordinate spaces & units（新しいタブで開く）

SVGパスの変換例

SVGパスは、XDとFigmaの双方で利用できます。ただし、すべての命令や座標の扱いが同じではないため、変換作業がうまくいくまで苦労しました。

例えば、XD側のパスに相対座標や水平・垂直線の命令が含まれている場合、そのままコピーするとFigma上で正しく表示されないことがあります。 そこで、変換時にパスを解析し、Figmaで扱いやすい形式に整えてから配置するようにしました。

type VectorPath = {
  windingRule: 'NONZERO' | 'EVENODD';
  data: string;
};
 
function createVectorPath(pathData: string): VectorNode {
  const vector = figma.createVector();
 
  // SVGパスをFigma側で利用できるデータとして設定
  vector.vectorPaths = [{
    windingRule: 'NONZERO',
    data: normalizeSvgPath(pathData),
  }];
 
  return vector;
}
 
function normalizeSvgPath(pathData: string): string {
  return pathData
    // 水平線・垂直線を通常の線分へ変換
    .replace(/H\s*([-\d.]+)/g, 'L $1 0')
    .replace(/V\s*([-\d.]+)/g, 'L 0 $1')
    // 相対座標を絶対座標へ変換
    .replace(/([mlc])/g, (command) => command.toUpperCase());
}

この処理によって、XDのベジェ曲線や図形を、Figma上でも編集可能なベクターレイヤーとして再現できるようにしました。

変換結果を見ながら改善｜文字・画像・マスクの調整

実装では、XDのデータを読み取ってFigma上に変換し、その結果を元のデザインと見比べながら調整を重ねました。 見た目が近くても、座標の基準やテキストの配置、画像のマスク方法が異なると、細かなずれが生まれます。そこで、変換前後の状態を確認しながら、どの部分に違いがあるのかを一つずつ整理していきました。

SVGパス以外にも、検証を重ねることで、次のような表現を再現できるようになりました。

AIにも実装や調査の補助をしてもらいましたが、最終的な判断は、公式ドキュメントと実際の変換結果をもとに行いました。

迷わず操作できるためのUI設計

変換処理がある程度安定した後、プラグインのUIを整えました。

Convertifyは複数のアプリケーションや変換方向に対応しているため、利用できる機能が多い一方で、実行までの選択項目も増えます。 このプラグインはXDからFigmaへの変換に特化しているため、操作の流れをできるだけ短くしました。

1. XDファイルをドラッグ＆ドロップ
2. ファイル名を確認
3. 「変換を開始」をクリック
4. 完了後にFigmaページを確認

変換中はプログレスバーを表示し、処理が終わると完了画面を表示するようにしています。また、スタジオスプーンのキャラクター「スプーンさん」、「白ゴマ」、「黒ゴマ」を用いた遊び心のあるデザインも心がけました。

変換にかかる時間はファイルサイズによって異なりますが、目安として約30秒で完了します。

対応できること、苦手なこと

このプラグインは、XDのデータをできるだけ編集可能なFigmaレイヤーとして変換することを目指しています。

このように、変換対象を明確にしたうえで、実際の変換結果と照らし合わせながら改善を重ねました。特に、テキストや図形といった基本要素だけでなく、角丸やぼかし、ベジェ曲線、マスクといった「見た目が複雑になる要素」は、単純なコピーでは再現が難しく、Figma側の仕様に合わせて変換ロジックを調整する必要がありました。

Figma Communityへの公開

当初は社内で使うことを目的に開発していましたが、折角なら公開まで経験してみようと考え、Figma Community（新しいタブで開く）への申請にも挑戦しました。

プラグイン名やアイコン、サムネイル、説明文を整え、カテゴリーやタグ、データセキュリティに関する項目を設定。その後、審査へ提出しました。 プラグイン名は、用途が伝わりやすいように『XD to Figma Converter』としました。

実際に公開されたページを確認したときは、制作物が形になったことを実感でき、とても嬉しかったです。

開発を通して得たこと

今回の開発を通して、複雑に見える課題でも、必要な情報を整理し、検証しながら進めることで、少しずつ形にできることを実感しました。 AIに助けを借りながら特に重要だったのは、「最初からすべてを完成させようとせず、小さく動かしてから改善する」という進め方です。

AIは、調査や実装を進めるうえで便利な相談相手になりました。一方で、どの機能を必要とするのか、結果が正しいのか、どこまで対応するのかは、自分で確認しながら判断する必要があります。

この経験を活かして、今後はFigmaプラグインに限らず、ルーティンタスクの自動化やクリエイティブ制作ワークフローの改善にも取り組んでいきたいと思っています。 また、アイデアを整理したり、別の視点を得たりするための壁打ち相手としても、さまざまなツールを活用していきたいです。

今回つくった『XD to Figma Converter（新しいタブで開く）』が、XDからFigmaへ移行する必要のある方にとって、少しでも役立つものになれば嬉しく思います。