デザインツールとしてよく比較されるAdobe XDとFigma。両者ともワイヤーフレーム等によく用いられますが、違いがいまいちわからないという方も多いのではないかと思います。今回は実際に二つのツールを使ってみて分かった、使い心地や機能の違いなどをご紹介します。
Adobe XD（以下XD）とは2017年にリリースされたUI/UXデザインツールです。illustratorやPhotoshopなどのAdobe製品と比べ、操作が早く挙動もスムーズなため多くのAdobeユーザーに支持されています。
対してFigmaとは2016年にリリースされたUI/UXデザインツールです。FigmaのHPにて「共同作業でデザインすることに関しては、Figmaは数年先を行っています。」という文言が掲げられているだけあって、共同編集が簡単にできることが特徴です。
では、いくつかの側面から両者を比較してみましょう。
XDもFigmaも中央にアートボード、左側にレイヤー情報、右側に選択レイヤーの詳細パネルが配置されており、ほぼ同じ見た目になります。違いとしてはXDの場合、ツールバーが左のサイドバーに固定されているのに対しFigmaは左上部に固定されています。配置が違うからといって操作に支障が出ることは特にないと思います。
どちらも共同編集はできますが最も適しているのはFigmaといえそうです。その理由としてはXDの場合、URLを発行し共有した後に共有画面を再度更新する手間ができてしまうのに対し、FigmaであればURLの発行のみ行えば同じ画面が共有され、そのまま編集すればその内容がリアルタイムで反映されるからです。編集中は矢印のアイコンと編集者の名前が表示されるため、実際に今誰がどこを編集しているかというのも共有することができます。
XD…URLを発行し、更新した人が再度更新をする必要がある
Figma…URLの発行のみ
Figmaの場合は無料で利用できるプランがありますが、XDには無料のプランというのがなく、無料トライアル期間が終われば月額費用を支払う必要があります。
Figmaでは4つのプランが用意されており、使う機能によって選択できるのが特徴です。それぞれの料金と主な機能は以下になります。
◆スターター（無料）
・プロジェクトの作成数に制限があるがデザイン機能やクラウドストレージには制限がない
・3つのプロジェクト作成が可能
・無制限のクラウドストレージ
・無制限のレビュアー/エディター招待
◆Figmaプロフェッショナル（1,800円/月）
・プロトタイプの共有権限が追加
・チームライブラリの機能が追加され、チームでUIコンポーネントが共有できる
◆Figmaビジネス（5,930円/月）
・チーム数が無制限に
・管理やセキュリティ部分の機能が追加
◆エンタープライズ（9,883円/月）
・使える機能はビジネスとほとんど変わらない
・上記に加え管理やセキュリティ部分の機能が増える
その他詳しい機能についてはFigmaの公式サイトでご確認ください。
XDでは2つのプランが用意されています。料金と機能は以下になります。
◆XD単体プラン（1,298円/月）
・Adobe製品の中でXDのみ利用が可能
・XDのみ使用したい人におすすめ
◆コンプリートプラン（6,248円/月）
・XDのほかにも20種類以上のAdobeソフトを利用可能
・XD以外にもAdobeのソフトを多く使いたい人におすすめ
・アプリの種別
XDはネイティブアプリのためアプリをインストールすればネット環境に左右されることなく利用することができます。そのため移動中等ネット環境がない場合でも編集ができるのがメリットといえます。ただしオフラインでの作業が可能であるゆえ、同じタイミングで共同編集をしている場合に競合が起こり、どちらかの変更しか反映されていなかったということにもなりかねません。
対してFigmaはwebアプリになります。そのためXDとは違いネット環境に左右される点がデメリットといえるでしょう。しかし制作メンバーだけではなくクライアントも編集画面にアクセスすることができ、リアルタイムでフィードバックとしてコメントを残したり編集したりすることが可能なため、共同編集がしやすい点がメリットといえます。
・アニメーション
XDもFigmaも簡単な動作を確認することができます。特にFigmaではホバー時の細かな動きや遷移のアニメーション、クリック後のアニメーションなどを細かく設定することができ、本番に近いプロトタイピングを行うことが可能です。
・CSSコードの出力
XDでは作成した画面をCSSコードで出力する機能はデフォルトではありません。CSSコードを出力したい場合は外部のプラグインをダウンロードする必要があります。その点Figmaではデフォルトの機能でCSSコードが確認できるので大変便利です。
XDとFigma、使用感としてはほとんど変わらないものの、やはり共有機能が優れているFigmaでは対面での打ち合わせが困難な状況において、とても使いやすいと感じました。「XDでできることはFigmaでもできる」といった印象で、よりFigma の方がプランによってはできることが多いでしょう。また無料で多くの機能を利用することができるので迷っている方はまずはFigmaから試してみるのも良いかもしれません。
2022年9月にAdobeがFigma を買収したこともあり、両者の機能が 今後 どのように変わっていくのか楽しみです。
エイ・エヌ・エスではUIUXの観点から使いやすさに特化した業務システムの構築を行っています。システムやデザインに関してのお悩みはぜひ一度ご相談ください。
☆YouTubeはじめました☆
基幹システムをはじめとするIT関連情報を発信するチャンネルです。
チャンネル登録はこちらから⇓
https://www.youtube.com/channel/UC41Fu8lCawwGuNDXWy3PhSQ?sub_confirmation=1
・あわせて読みたい
使いやすさにフォーカスしたマイクロインタラクションとは？
足し算よりも引き算を意識したデザインを！
・IT-Trustコラム（オーダーメイドのシステム導入で企業のDX推進を支援）
https://www.ans-net.co.jp/column/
・勤怠trustコラム（カスタマイズ可能な勤怠管理システムを構築）
https://www.kintai-trust.com/column/
