ウェブサイトのデザインといえば、かつては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側でペーストすることで、レイヤー構造を保った状態で貼り付ける事が出来ます。
※2022年10月追記:通常のコピーだと一枚の画像でfigmaに貼り付けられてしまうようになっていましたので、説明を追記しました
XD側でアートボード名を右クリック
「SVGコードのコピー」をクリック
figma側でペースト
※少し時間がかかる場合、再度XDのコピーからやり直すと出来るようになります
IllustratorからPhotoshopにコピペするような感覚で、デスクトップアプリからブラウザアプリにコピペ出来るのがとても驚き。マスクやテキストの行間等の情報など、いくつかの情報は引き継がれなかったものの、十分な精度。
※2022年10月追記:一部画像が引き継がれないものの、テキストはアウトライン化されずに文字情報を保持してくれるので、一つずつ配置し直すよりは楽かな、という精度です
今後はブラウザ上で動作するアプリケーションが主流になっていくんだろうなと感じたと同時に、ChromeOSの可能性も感じた検証となりました。
以上、AdobeXDのデータをfigmaで編集できるように移管したい時の対応方法でした。