皆さん、こんにちは！webデザイナーのまきです。
2023年Adobe公式からXDの開発終了が発表されてから、
「なんだかんだとXDを使い続けているけれど、そろそろツールを変えた方がいいのか。。？」
と悩んでいるデザイナーも多いのではないでしょうか？
XDとFigmaで操作性に大きな違いは無い。といった事も良く耳にするので、
「じゃあXDのままでもいいのでは？」と思う方も多いはず。
なので今回は具体的にどういった違いがあるのかを、いくつかご紹介させていただきます！
まずは表で比較
まずはざっくりと、FigmaとXDの機能と特長を比較表で見てみましょう。
| 機能/特長 | Figma | Adobe XD |
| クラウドベース | あり | 部分的にあり |
| オフライン使用 | 制限あり | 可能 |
| リアルタイム共同編集 | 可能 | 可能 |
| バージョン管理 | 自動で管理、無制限の履歴アクセス | 手動で管理 |
| コメント機能 | あり | あり |
| プロトタイプ機能 | あり | あり |
| プラグインとウィジェット | 豊富 | 豊富 |
| リピートグリッド | 特定の機能はなし（類似操作可能） | あり |
| Adobe Creative Cloud連携 | 制限あり | 強力な連携 |
| 価格 | 無料プランあり、有料プランもあり | 無料プランあり、有料プランもあり |
| 対応OS | ブラウザベース、Windows、Mac | Windows、Mac |
この表を見ている限り、基本的な機能としてはXDとFigmaの違いはさほど大きくないように感じますね。
ではここからさらに細かく機能性を比較してみましょう！
ブラウザベースでのアクセスが可能
Figma はデスクトップアプリとブラウザ版があるので、
インストールが不要で、アプリが入っていないデバイスでもインターネット経由でアクセスが可能です。
インストール不要だけでなく、ブラウザからのアクセスが可能なので、デバイスを問わずWindows、Mac、Linux、Chromebookなど、さまざまなOSを使用しているユーザーが、同じデザインファイルにアクセスし、作業を続けることもできます！
例えば、オフィスではWindowsのPCを使用し、自宅ではMacBookを使うという状況でも、デザイン作業に支障がありません。
リモートワークが増えてきた時代、環境を選ばず作業ができるのは助かりますね！
無制限のファイル履歴とバージョン管理
デザインをしていると「1つ前の色に戻したい」といった要望をもらう事も少なくないと思います。
さらに「気づかないうちに変な箇所を触っていた」、「修正前との違いを確認したい」など、旧データを確認したい場面って思っているよりも多いです。
それらの要望を叶えてくれるファイル履歴について、もちろんXDにもバージョン管理機能はあります。
ただXDでは、30日～60日で自動的に履歴データは削除されてしまうようです。
また、手動での保存が主となるため、過去のバージョンへの戻りが限定的です。
対してFigmaはクラウドベースでのデータ管理になるので、自動で全ての変更を保存し、無期限・無制限に過去のバージョンに戻ることができます。
さらに任意の時点でバージョンに名前を付けて保存することもFigmaなら可能！
たとえば、「TOＰ初稿」や「最終版」など、特定のバージョンに意味を持たせることで、後から簡単に見つけることができます。
他にも、チームメンバー全員が同じバージョン履歴にアクセスできるため、誰がどのタイミングでどのような変更を行ったかが確認しやすいです！
チーム内のコミュニケーションや同時作業も円滑になります◎
複数のチームでの同時作業
チームでの同時作業はXDにもありますが、
複数のユーザーが同時に編集できるのがクラウドドキュメントを使用した場合のみであり、変更内容がリアルタイムで同期されるのには少し遅延が生じることがあります。
それに対してFigmaは完全なリアルタイム共同編集機能を備えており、各メンバーのカーソルや変更内容が瞬時に他のメンバーに表示され、スムーズな作業が可能です！
さらにFigmaではチームやプロジェクトごとに権限を1人ずつ設定できるため、デザインに対する編集権限を持つメンバーと、閲覧やコメントのみを行うメンバーで分けるといった事もできちゃいます！
リアルタイム性や柔軟性を考えると、大規模なプロジェクトやチームでのリモートワーク対応においてはFigmaの方が相性がよさそうですね。
コメントのスレッド機能
XDにもコメント機能がありますが、コメントは単発で追加され、返信はできるものの、スレッドとして会話をまとめて表示することはできません。
それに対してFigmaではコメントに対してスレッド形式で返信が可能です。
さらにXDと違うところはわざわざ共有URLを発行しなくても、作業画面上にあるアイコンリンクから簡単にコメントの確認・追加・編集ができるというところ。
解決済みにチェックをするとコメントが消えたり、作業中アイコンが邪魔の場合はアイコン非表示にする事もできます。
プラグインのリアルタイム同期
XDにもプラグインはありますが、プラグインによる変更が自動的にリアルタイムで反映される仕組みはありません。なので複数のユーザーが同ファイルを触る場合、プラグインによる変更は制限されてしまいます。。
Figmaはその点プラグインの変更がリアルタイムで全ユーザーに反映されるため、プラグインを積極的に使用する事が可能！
公開プラグイン数にしても、XDが大体300～400に対してFigmaは1000以上あるとされているので、プラグイン数・リアルタイム同期を考えるとFigmaがより活用しやすい環境にある事が分かりますね！
CSSコードの自動生成
あるとより便利なCSSコード自動生成。
XD自体にはデフォルトでCSSコード生成機能がないため、サードパーティのプラグインを使用することでCSSコード生成が可能となります。
ただ、プラグインを使ってコードを生成するため、デザインの変更が自動的にコードに反映されるわけではなく、都度プラグインを通してコードを取得する必要があります。
対してFigmaではデフォルトでCSSコード生成機能が備わっており、「Inspect」パネルを使用することで、選択した要素のCSS、iOS、Androidコードを簡単に確認できます！
また、リアルタイムで更新されるため、デザインへの変更があっても即座にコードが更新される点も優秀です。
さらに、デフォルトの機能以外にもFigmaにはCSSコード生成を強化するためのプラグインも多数あり、コードのフォーマットや詳細なカスタマイズが可能なプラグインもあるようです。
作業効率化に繋がる機能がデフォルトで使用できるのは、とても助かりますね！
まとめ
いかがでしたでしょうか？
表だけで見ると似たような機能ばかりに感じますが、細かく比較してみると結構違いがありましたね！
まだまだ他にも沢山違いはあるので、
個人的に感動したさらに細かい機能部分については別の記事で紹介しますね！
無料版でもお試しで触る分には充分なので、是非Figmaを試してみてください♪