💁‍♂️

Figma vs. XD: 比較したらFigmaが最強だと判明した

2023/03/22に公開

Figma

デザイン

tech

はじめに

本記事では、UIデザインツールであるXDとFigmaを個人的に比較する機会があったので、その違いをお伝えしていきます。

XDとFigmaの最近の動向

2022年9月にAdobeがFigmaを買収することを発表しました。

Figmaはブラウザベースで動くUIデザインツールで有名です。
一方でXDは、数多くのグラフィックデザインツールをリリースしているAdobeの一製品です。

XDとFigmaで比較するとFigmaは圧倒的な成長を遂げています。

Figmaを利用しているユーザ数も圧倒的ですね。

このグラフを見るからに、今後はFigmaがUIデザインツールを牽引していく勢いかと。

AdobeがFigmaを買収したことで、XDとFigmaのブランドの位置付けがどうなるか。
また、XDとFigmaのどちらを今後使っていけばいいか気になるところです。

私も社内のアプリ事業でプロトタイピングをする際にXDをよく利用しています。

Figmaの存在は知っていましたが、具体的に使用したことがなかったので、今一度、技術選定という意味で、Adobe XDがいいのかFigmaがいいのか比較検討していこうと思います🙆‍♂️

XD vs. Figma

結論: XDとFigmaの大きな違い

表形式で、FigmaとXDの大きな違いをまとめてみました。

	XD	Figma
プラン形態	Adobeの単体プランを契約しなければならない	スタータープランから無料で契約できる
コンポーネント管理	1つのメインコンポーネントをステート機能で状態管理	複数のメインコンポーネントをVariants・Property機能で状態管理
レイアウト	スタック機能とパディング機能	フレーム機能とオートレイアウト機能

徹底比較

比較①: 料金プラン

XDは有料の単体プラン / コンプリートプランを購入しないと使えません。
（トライアルで最初の7日間だけ無料期間があります。）

一方で、Figmaはスタータープランから使えます。

比較②: コンポーネント機能

メインコンポーネントを示すインジケータの違い

状態管理: Figmaは複数のメインコンポーネントで状態管理するため保守しやすい

XDは1つのメインコンポーネントを作って、ステート機能で状態管理するイメージです。

一方で、Figmaは複数のメインコンポーネントで各状態を作って、それらをVariantsとProperty機能でグルーピングするイメージです。

FigmaのVariantsとPropertyは2つ組み合わせると、状態管理できそうです。

比較③: レイアウト機能

レスポンシブ: Figmaのフレームとオートレイアウトで保守性があがりそう

XDは、レスポンシブにしたいオブジェクトをまとめてグループ化→右ペインからパディングとレスポンシブの設定

Figmaは、フレーム化→オートレイアウト→右ペインからレスポンシブにしたい方向（垂直・水平）にハグする。

整列: Figmaのオートレイアウト機能が強すぎる

XDはグループと整列基準のオブジェクトを選択して、垂直方向と水平方向の整列を組み合わせることでレイアウトが可能です。

Figmaは、整列したいオブジェクトをフレーム化してオートレイアウトするだけです。
簡単ですね。

比較④: プロトタイプ機能

高度なアニメーション: Figmaの方が細かい設定ができる

ここでいう高度なアニメーションというのは、２画面を遷移するときに同一同名のアセットに対して途中のアニメーションを補完してくれる機能です。
実際のプロダクトに近いアニメーションを忠実に再現する場合、XDに比べて、Figmaの方がメンテナンス性がいいです。
なぜかというと、以下2つのアニメーションを２画面間で同時に実現するときに、余計なオブジェクトを入れる必要がないからです。

画面遷移アニメーション（プッシュ・スライド・ディゾルブとか）
高度なアニメーション

例えば、こんなアニメーションを実現したいとしましょう。

このアニメーションは２画面間で同時に以下を実現しています。

画面遷移アニメーション → プッシュ
高度なアニメーション → ナビゲーションの下線

XDの場合、これができないのです。
というのは、2つを同時に設定できないからです。
すべて高度なアニメーションで行う必要があり、遷移元と遷移先に余計なオブジェクトを入れる必要があります。
（以下では、Screen1に遷移先のScreen2の文字を入れてます。またScreen2にも遷移元のScreen1の文字を入れています。）

Figmaの場合、画面遷移アニメーションと高度なアニメーションを併用できます。

プロトタイプを設定するときに画面遷移アニメーションをつけるだけでなく、「マッチングレイヤーにスマートアニメートを適用する」にチェックを入れれば実現できます。

また、Figmaの場合は状態管理は複数のメインコンポーネントで行っているがゆえに、コンポーネント間のアニメーションを視覚的に設定することができるのもいいところだなと思いました。

比較⑤: 共同編集

フォーカス機能: Figmaは画面共有と同じように、自分から共有できてしまう

XDもFigmaもリモート先の編集者のカーソルをみれることはご存知かと思います。
リモート先のカーソル位置を追跡できるライブカーソル機能もどちらにも存在します。

Figmaだけすごいんです。
自分から画面共有みたいなことができてしまうんですね。
それがスポットライト機能です。

他にも、Figmaはプレビューでも共同作業ができてしまいます。
（有料プランにすると、音声通話もできるようなのでそのままミーティングができてしまいますね。）

ツール上のどこでもシームレスに共同作業ができるのは本当にすごいです。

Figma強い

XDの機能はほとんどFigmaで実現されていて、UIデザインツールに特化しているだけあってXD以上に機能が充実していると感じました。
XDが強いと感じるところは、他のAdobe製品とアセットを共有できるところでしょうか。

XDしか知らなかった私ですが、Figmaは以下の点で優秀だと感じました。

ハイレベルなコラボレーション機能
デザインの保守性・管理のしやすさ

ハイレベルなコラボレーション機能

デザインチーム・ビジネスサイド・エンジニアの３者がデザインの領域に大きく踏み込んで、設計に携われる部分が強いです。

プロトタイピングの段階では、要求からシステムへ実装される中間点です。
課題の質を上げていくためにブラッシュアップが必要な段階でデザインチームが非常に重要な役割を果たします。

Figmaは、課題→プロトタイプ→評価のPDCAを素早く回して課題の質を高めていけるところがいいなと思いました。

デザインの保守性

コンポーネントの状態管理のしやすさは本当に感動しました。
XDは1つのメインコンポーネントにすべての状態を詰め込まなければならなくて、メインコンポーネントを編集するときに破壊的な操作が行われやすいです。
その破壊的な操作も他の状態に影響してしまうということがよくありました。
Figmaの場合は、複数のメインコンポーネント＝「1つの状態」と管理することができるあたりがいいです。
Variants機能とProperty機能は管理できるスコープが違いますが、それらを組み合わせると非常に強力なツールになることは間違い無いと確信しました😂

結局Figmaを使うことによって何が便利になるのか

コンポーネントデザインは宣言的UIフレームワークであるFlutterやSwiftUIなどと非常に相性がいいというところですね。
Atomic Designにも通じるところがありますが、再利用されるパーツを共通化して保守管理するシステムをUIデザインツールでも持っておくと、コードとの間で不整合が起きないです。
そのコンポーネントデザインの保守管理がしやすいFigmaは、開発者思いだと感じました。