愛猫を膝にのせて暖をとっているAtsushiです。
最近はデザインをFigma一本でやっている現場も多いようですが、
「昔XDで作られたワイヤーが出てきた」
「クライアントからXDデータだけ渡された」
みたいな場面、意外とありますよね。
そのたびに
「これ、どうやってFigmaに持ってくるのが正解なんだっけ…？」
となるわけです。
Adobe XDのデータをFigmaで直接開ける？
まず結論から。
XDの.xdファイルは、Figmaで直接開けません。
これはもう仕様なので、諦めるしかありません。
なので、一度書き出してからFigmaに持ち込む
というステップが必要になります。
1番おすすめの方法はこちら↓
「SVGで書き出してFigmaに読み込む」
いろいろ試した中で、
調整が一番少なく済む方法がこれです。
手順
1.Adobe XDでアートボード（または全体）を選択
2.「書き出し」→「SVG」
3.Figmaにドラッグ＆ドロップ
これだけです。
なぜSVGがいいのか？
・レイアウトがほぼ崩れない
・テキストがテキストのまま残る
・図形も編集可能
・Figma側でオートレイアウト化しやすい
特にワイヤーフレーム用途なら、
ほぼそのまま使えるケースが多いです。
次によくやられるのが
PDF書き出し → Figmaに読み込み。
見た目は再現されますが、
・テキストがアウトライン化される
・レイヤー構造がほぼ消える
・編集し直しが地味に大変
ということで、
「調整が少なく済む」という条件ではSVGに負けます。
確認用・資料用ならアリ、という感じですね。
PNG／JPGは最終手段
これはもう
「画像として貼るだけ」になるので、
デザインを作り直す前提です。
ワイヤー移行目的ではおすすめしません。
事前にやっておくと楽なポイント
XD側でやると吉なこと
・グループを整理しておく
・不要なエフェクト（影・ぼかし）を減らす
・フォントはできるだけ一般的なものを使う
Figmaでやること
・フォント差し替え
・コンポーネント化
・オートレイアウトの再設定
この辺を押さえておくと、
「思ったよりすんなり移行できたな」
という感じになります。
XDのデータをFigmaで開く機会がありましたら是非、お試しください！
それでは、よいお年を！
