プラグインを使用せず、XDで作成したデザインデータをFigmaで使いたい
デザイナーのemiです。
Adobe XDが単体購入を終了し（コンプリートプランでは提供されています）、Figmaへの移行が進むのでは。ということでXDで作成したデザインをFigmaで開くことができる方法はないだろうか。と思い、まずはプラグインを探してみました。
Convertify Sketch/Adobe/Google
有料のプラグインだったので無料で使える期間に試しました。
（お見せできないデザインデータで試したので画像を添付できません。ご了承ください…）
カラースタイルやコンポーネントなども移行できました。ホバーステートを設定している箇所は重なったレイヤーが非表示になっていました。
line-heightの扱い方がXDとFigmaでは違うようで、ボタンの部分など上下の中心がずれてしまっているのが気になりましたが、レイヤーの構造などそのまま移行できていました。
プラグインを使用せずにXDのデザインデータをFigmaに移行してみます
本題です。
プラグインを使用せずにXDのデザインデータをFIgmaで使用する方法です。
今回はXDで作成していたサムネイルのデザインデータをFigmaで使用できるようにします。サムネイルのデザインなので、新たにPhotoshopやillustratorで作成し直してもいいのですが、そのままデータを使えそうなFigmaを選択しました。
XDを起動してSVGコードのコピー
今回はここにあるデザインデータを全てFigmaで使えるようにしたいので、すべてのアートボードを選択します。
［右クリック］＞［SVGコードのコピー］をクリックします。
Figmaを起動してペースト
Figmaを起動し、新規でデザインファイルを作成して、右クリックでペーストします。
一部画像が表示されていない箇所があります。
画像が表示されていない箇所は、マスクを使用していた部分が多かったのですが、同じようにマスクを使用していても表示されている画像もあり、原因はよくわかりませんでしたが、表示されていない箇所の画像をXDでコピー、Figmaでペーストをすると無事に反映されました。
ちなみに…アートボードを選択した状態でコピーするとFigmaでペーストした時はただの画像になってしまいます。
SVGデータを使った移行方法を試してみて
一部表示されなかった画像はありましたが、このくらいのシンプルなデータであればXDからFigmaに移行するのも簡単でした。
データを移行できたことで、Figmaで最初から文字を入力したりする手間が省けてよかったです。
Webデザインのデータの場合はコンポーネントやカラースタイルなども移行できるので、プラグインを使った方がよさそうです。
おまけ
SVGデータでコピーするということはSVGを読み込めるIllustratorでもいけるのでは。と思い試してみたところ、いけました。こちらはマスクした部分がずれていますが、画像は表示されていました。
気軽にクリエイターの支援と、記事のオススメができます！