2020年5月21日

AdobeXDのデータをfigmaで編集できるように移管したい時の対応方法

ウェブサイトのデザインといえば、かつてはPhotoshop、自分はFireworksを使っていたりしましたが、近年少しずつトレンドも変わってきました。「Sketch」にはじまり、「AdobeXD」などUI設計に便利な使い勝手の良いソフトが使われるようになり、「figma」も、ブラウザで操作するアプリケーションとは思えないほど多機能で且つ使いやすいソフトです。

そんな中、AdobeXDで作成したファイルをエクスポートしてfigmaにインポート出来ないか、という相談があり、対応した時の覚え書きです。

AdobeXDの.xdからfigmaの.figに変換する

いろいろ便利になってきているこのご時世、最初は簡単に出来ると思っていました。しかし、XDからfigmaへの移行は簡単には出来ません。いろいろ調べてみたつもりですが、2020年5月時点では.xdファイルから.figファイルに変換出来そうなのは以下のサービスのみのようでした。

XD2Sketch
https://xd2sketch.com/

こちらは有料サービスで、いくつか料金プランはありますが、1ファイルのみであれば17ドル(≒1,800円くらい)。高いか安いかはプロジェクト次第かもですが、中小規模であればちょっと躊躇する金額にも感じます。
※試していないため、変換後の精度はわかりません

無料で変換できるサービスも探してみましたが、見つかりませんでした。

エクスポートやインポートの機能を応用して移行できないか

これも難しいようです。難しい原因はAdobeXDのエクスポート機能にあり、以下のような状態でした。

sketch→figma=OK
figamは「.sketch」ファイルをドラッグ&ドロップでインポート可能

sketch→XD=OK
XDは「.sketch」ファイルをインポートする機能があります

XD→sketch=NG
XDにレイヤー構造等を保持した状態でのエクスポートの機能が無い(svgに変換することで移行できるという記事を見かけましたが、未検証)

XD→figma=NG
上記同様

sketchはXDにもfigmaにも変換できて一番柔軟ですね、という事は分かったのですが、本件の解決には至らず。どうしようかと模索していたところ、今回は次の方法で解決としました。

XDからfigmaにコピペ

手作業やん、と思われるかと思いますが、コピペするのはアートボード単位。以下のようにXD側でアートボードを選択してコピー、figma側でペーストすることで、レイヤー構造を保った状態で貼り付ける事が出来ます。

XD側でアートボード名をクリックしてコピー

figma側でペースト

IllustratorからPhotoshopにコピペするような感覚で、デスクトップアプリからブラウザアプリにコピペ出来るのがとても驚き。マスクやテキストの行間等の情報など、いくつかの情報は引き継がれなかったものの、十分な精度。

今後はブラウザ上で動作するアプリケーションが主流になっていくんだろうなと感じたと同時に、ChromeOSの可能性も感じた検証となりました。
以上、AdobeXDのデータをfigmaで編集できるように移管したい時の対応方法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です