Adobe XDとFigmaどっちがいいの？機能や料金を比較してみた

デザイナーのみやです。

デザイナーのみなさまはいろんなツールを使ってデザインをしていると思いますが、メインで使っているデザインツールはだいたい決まっていると思います。

一昔前はPhotoshopやIllustratorといったAdobe製品がほぼシェアを占めてましたが、現在ではAdobe XD（以下：XD）の登場やSketch、Figmaの登場によってつくるものに合わてツールを選べるようになりました。

そこで今回はXDとFigmaを比べてみました。どちらを使おうか悩んでいる方はぜひ参考にしてください。

XDとFigmaを比べてみました

LIGではXDをベースに、用途や制作物に応じて様々なツールを各デザイナーが選択しています。

僕自身も5年ぐらいPhotoshopユーザーでしたが、今は写真のレタッチやゴリゴリ作り込むグラフィック以外でPhotoshopを開くことがなくなりました。

多様化している中で、これからデザインを始める人や長年同じツールを使っている人にとって、結局何をつかえばいいの？ というのは必ず出てくる疑問だと思います。

今回はよく比較されているXDとFigmaの特徴の違いをまとめてみましたので、ツールを選ぶときの参考としてご覧ください。

忙しい人は黄色いマーカーが引かれているまとめを読んでいくだけでも比較できます。

アプリの種別

ネイティブアプリというのは手元の端末（PCやスマホ）にインストールして動作するアプリケーションのことで、対してWebアプリというのはインストールが不要で、ブラウザ上で動作するアプリケーションのことをいいます。

FigmaはWebアプリ

インターネット環境があればどこでも誰でも利用することができます。そのため、制作メンバーだけでなく、クライアントも編集画面にアクセスでき、フィードバックを書き込むことも、文言の修正をすることもできます。Googleのドキュメントやスプレッドシートと同じというとわかりやすいかと思います。

利用しやすい反面、当然ネット環境がない場所では利用することができません。インストールして使用するデスクトップアプリ版もありますが、データ自体がクラウドにあるため、同様にネット環境が必要です。

XDはネイティブアプリ

インストールしてしまえばネット環境に左右されずに利用することができます。移動中などのネット環境がない状態でも編集することができるので、場所を選ばずに利用することができます。

ただ後述してますが、共同編集を利用している場合、オフラインでそれぞれが作業してしまうとコンフリクト（競合）が起こります。

アプリの種別まとめ

• Figmaはネット環境があればインストール不要で利用可能。ネット環境がないと利用不可。
• XDはインストールすればネット環境がなくても利用可能。

共同編集機能

共同編集機能はどちらも利用可能

共同編集は一つのプロジェクトを共有し同時に複数人で編集できる機能ですが、こちらはどちらのアプリも利用することができます。

感覚値ですが、Figmaのほうが共同編集に関しては強い印象です。編集がリアルタイムで反映され、常に最新のものが共同編集者に共有されます。プレビュー画面もリアルタイムで変更されていくため、編集内容を即時に確認することができて、とても便利です。

議論をしながら内容やデザインを決めていく場合に強く、クライアントの前で検証しながらFIXさせていくことがとてもスムーズにおこなえます。

対して、XDも共同編集者にはリアルタイムで変更が共有されるのですが、プレビュー画面に関しては管理者の更新をもって反映されます。そのため、即時性はなく、少しタイムラグがあることと再読み込みが必要になります。

また、オフラインでの作業が可能なため、オフラインで作業していた間に誰かが変更を加える、またはお互いにオフライン作業をしていた場合、競合が起こります。どちらかが別ファイルに保存してマージするということを手動でしないといけないため、スムーズな制作がおこなえない場合もあります。

共同編集機能まとめ

• Figmaは編集がリアルタイムに反映。議論しながらの制作に強い。
• XDは管理者が更新後に反映。編集タイミングによっては競合が起こる。

プロトタイピング

プロトタイピングもどちらも利用可能

WebデザインでもアプリデザインでもUIの使用感や動作の確認は必須になります。プロトタイピングで画面を触ってみて初めて気づくことも多いので、この機能はもはやどのデザインでも必須かなと思います。

Figmaは細かなアニメーションの設定も可能

ホバーの動作や出現のアニメーションなど必要最低限のものはXDにも用意されていますが、マイクロインタラクションまでとなると機能的には用意されていません。

Figmaはホバー時の細かな動きや遷移のアニメーション、クリック後のアニメーションなどを細かく設定することができ、本番に近いプロトタイピングを行うことが可能です。そのため、実際に組み込みを開始する前にユーザーテストができたりと、開発のリスクをコントロールしながら進めていくことができます。

ただ、XDもアップデートによって機能がすこしずつ増えているので、今後のリリースによっては追加されるかもしれません。

プロトタイピングまとめ

• Figmaはマイクロインタラクションを含めたプロトタイピングが可能。
• XDは必要最低限（ホバー、モーダル、出現など）のプロトタイピングが可能。

価格

価格まとめ

• プランによる違いはありますが、だいたい同じです。個人利用であればFigmaは無料で利用できるので試しに使ってみやすいです

さいごに

FigmaとXDはよく比較されるアプリですが、どちらを使えと言えるほどの違いはなく、制作の進め方や制作物によって選択ができるのが良いかなと思います。

今回まとめてみて思いましたが、考え方自体は同じで、特化している部分が違うという印象でした。一方じゃないとできないという部分も少ないため案件によって使い分けられるようになっておくのがデザイナーとしては強いのかなと思います。

制作するツールによって、デザイン自体のクオリティが変わることはほぼないですが、進め方がスムーズになることでデザインに向き合う時間が増えたり、早く終わってディテールを詰められたりということがありますので、いろいろ試してみることをおすすめします。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。