あやね
WEBデザイナーやUI/UXデザイナーの方で、FigmaからAdobe XDへ切り替えたり、あるいはその逆をしたりする方は一定数いらっしゃいます。両方とも高性能なデザインツールではありますが、得意とするところや特徴が異なることは事実あります。そのため、切り替えが必要となるのです。
ところで、FigmaあるいはAdobe XDで作成したファイルは、それぞれもう一方のデザインツールへインポートして使えるのでしょうか。このようなことを“互換性”と言いますが、つまりFigmaとAdobe XDは互換性があるのでしょうか。
この記事では、FigmaとAdobe XDの互換性やインポート方法について、さらにこれらの代替品となるデザインツールについて解説してまいります。
1.FigmaとXDの互換性について
冒頭でも触れましたが、FigmaとAdobe XDには、互換性はあるのでしょうか。互換性とは、2つのデザインツール間でファイルを共通して使えることですが、結論から言えば互換性はほぼないと言えるでしょう。
厳密には、変換ツールを使えばファイルをインポートできる場合があるのですが、しかしそのような方法でインポートしても見た目や設定が異なる部分があり、互換性があるとは言い難いのです。
とは言え、インポート後に工数をかけて同じデザインに持っていくことは可能なため、もし切り替えが必要な場合には工数をかけて変換するしかありません。
2.Figmaで作成したファイルをXDにインポートする方法
このパートでは、Figmaで作成したファイルをAdobe XDにインポートする方法を紹介してまいります。
2.1 FigmaをXDにインポートする際のポイント
FigmaからAdobe XDへファイルをインポートする方法としては、主に2つ考えられます。
- SGVに変換
- コンバーターを利用
このうち、SVGに変換する方法は、インポート後に編集できなくなってしまいます。そのため、Adobe XDへのインポート後も編集することを考えると、コンバーターを利用すると良いでしょう。
2.2 FigmaをXDにインポートする際の注意点
FigmaからAdobe XDへのコンバーターはいくつか存在しますが、100%の変換は難しいというのが現状です。例えば、次のようなことが発生したりします。
- テキストなどのpx単位のズレ
- 角丸の設定が0pxになる
- コンポーネントの設定が反映されない
完全には変換できないことをふまえて利用するようにしましょう。
2.3 FigmaをXDにインポートする手順
ここで、FigmaをAdobe XDにインポートする方法を、手順を追って説明します。なお、一般的な手順であり、個別のコンバーターによって操作が変わります。
①画面上部のメニューの「リソース」アイコンをクリック。
②コンバーターの名称で検索して、プラグインをインストールまたは実行する。
③画面の指示に沿って、FigmaをAdobe XDにインポートするためのファイルをダウンロードする。
④Adobe XD上で、ダウンロードしたファイルを開くと、インポート完了。適宜調整し保存する。
3.XDで作成したファイルをFigmaにインポートする方法
続いてのパートでは、反対にAdobe XDで作成したファイルをFigmaにインポートする方法を紹介いたします。
3.1 XDをFigmaにインポートする際のポイント
Adobe XDからFigmaへファイルをインポートする方法としては、主に2つ考えられます。
- SVGに変換
- コンバーターを利用
お気づきの通り、実はFigma→Adobe XDと同じ手法があるだけです。ただし、先ほどと同様に、一部のデータの引き継ぎができないため、コンバーターを利用するのが得策です。
なお、「アートボード単位でのコピー&ペースト」という地道な移行方法も存在します。この場合も、ごく一部が引き継がれない点に注意が必要です。
3.2 XDをFigmaにインポートする際の注意点
Adobe XDをFigmaにインポートできるコンバーターもいくつか存在しますが、やはり完全な移行は困難で、インポート後に調整が発生するので注意が必要です。例えば次のような点に注意が必要な場合があります。
- テキストが崩れる
- レイヤー名、画像データが引き継がれない
- プロトタイプの設定が反映されない。
十分注意してインポートするようにしましょう。
3.3 XDをFigmaにインポートする手順
Adobe XDをFigmaにインポートする方法を、手順に沿って説明していきます。
今回はXD2Sketch.comというコンバーターサービスの場合を紹介します。こちらは有料サービスですが、少額なため使いやすいかと思います。
①XD2Sketch.comにアクセスし、課金してサービス利用できるようにする。
②変換後の形式を「Figma」に変更する。
③Adobe XDのファイルをXD2Sketch.comへドラッグ&ドロップする。
④Figmaのファイルに変換される。
⑤変換されたファイルをFigmaに取り込む。
4.FigmaとXDの最高の代替品-Pixso
最後に、FigmaやAdobe XDに代わるデザインツールの「Pixso」を紹介いたします。たくさんあるデザインツールの中で、今まさに最もおすすめしたいツールとなります。
4.1 Pixsoとは？
Pixsoは、2021年にリリースされた大変注目されているデザインツールです。便利な機能が多く搭載されており、最新ツールなだけあって大変高性能です。ワイヤーフレームの制作や、その後のデザイン制作やプロトタイプ制作など幅広い用途に対応しています。
さらに、デザイン制作のそれぞれのフェーズ間をそのままシームレスに移行できるので、デザイン制作をトータルしてカバーしている点も大変優秀と言えるでしょう。
4.2 Pixsoの特徴やメリット
Pixsoは他にも様々な特徴やメリットを備えています。例えば、次のようなものがあります。
- 無料で利用できる
- WEB上で利用できるので、ソフトのインストールをしなくてもよい
- リアルタイムで複数人が共同編集できる
- WindowsやmacOSなど、様々なOSに対応している
- FigmaやAdobe XDなど、他のデザインツールとの互換性がある
特に、最後の互換性については、FigmaやAdobe XDから他のデザインツールへ変えたいと思っている方には朗報かと思います。
Pixsoは、他のデザインツールに負けない機能を備えている上、互換性あってインポートがスムーズにできるため、移行先のデザインツールとして最適ではないでしょうか。
5.まとめ
この記事では、FigmaからAdobe XDへのインポート、あるいはその逆について解説してまいりました。また、それら2つのデザインツールの最高の代替品としてPixsoを紹介いたしました。人気のデザインツールでも万能ではないのが現実です。そうであるならば、移行先には互換性のあるデザインツールを選択し、移行コストを最小化するのは賢い選択になると思いませんか。
