Figmaを使ってみた。FigmaとAdobe XDどっちが使いやすい?

こんにちは。ワーママデザイナーのYUKIです。
STRIXではwebデザイン制作のメインツールとしてAdobe XDを使用しています。
しかし最近、web制作において Figma(フィグマ)が非常に使いやすいという話を聞く機会が多くあったので、実際に使ってみました。

Figmaとは?

Figmaとは、ブラウザ上で簡単に使用できるUI/UXに特化したデザインツールです。
ツールのインストールをする必要がなくネット環境さえあればブラウザで手軽に使用でき、機能面でも充実していることから、近年、初心者からプロのデザイナーまで幅広く人気を集めています。

Figma とXDの違い

ツール名   Figma AdobeXD
種類  webアプリ ネイティブアプリ
価格   ・ 無料プラン(※期間制限なし)
・¥1,800 / 月(※年払いの場合)
・¥5,774 / 月 ( ※年払いの場合)
・¥9,622 / 月 ( ※年払いの場 )
¥1,298/月 (税込み)
共同編集機能 あり あり
プロトタイプ機能 あり あり
CSSコードの出力   あり プラグイン使用
学習機能 あり あり

(※2023年1月調べ)

大きな違いとしては、アプリの種類価格でしょうか。

使用環境

Figmawebアプリです。   

メリット ブラウザ上で使用できるのでネットワーク環境さえあれば、利用可能
デメリット ネットワーク環境がないオフラインでは利用不可
(※デスクトップアプリも存在しますが、オフラインでの利用はできません。)

Adobe XD はネイティブアプリです。

メリット ネット環境が無くても利用可能
デメリット パソコンにソフトをインストールする必要があり

価格

Figma

Figmaには無料プランがあります。
チーム内のファイル数やページ数に制限があるものの、ツールの制限などはありません。無料でここまでのことができるのかと驚いてしまうほどです。
個人利用であれば無料版で全く問題ありませんし、無料版の使用日数の制限もないため、webデザインを勉強してみたいという方が試しに使ってみるツールとしてとても良いと思います。

引用元Figma公式ホームページより)

Adobe XD

現在は有料プランのみ。

XD 単体
¥1,298円/月 (税込み)
Creative Cloudコンプリートプラン
(※adobeの20以上のアプリが使えるプラン)
¥ 6,480 /月 (税込)

※XD 単体 、Creative Cloud コンプリートプラン いずれも7日間の無料体験は可能です。

引用元Adobe公式ホームページより)

Figmaの使用感

基本的な使用感やレイアウトは、Adobe XDと大きな違いはなく、XDを使ったことがある人は、あまり違和感なく使い始めることができます。

細かい差は、こんな感じです。

  • コンポーネントに持たせられる要素が多い
  • 要素に使用するエフェクトに、複数のエフェクトを掛け合わせて使うことが可能
  • テキストのline-heightを200%など、%で指定が可能
  • テキストをアウトラインしなくてもグラデーション色にすることが可能
  • オブジェクトのサイズがサイドバーだけでなくオブジェクトの下にも表示
  • Figma上で画像の色補正や塗りのレイヤーを入れることが可能
  • キャンバスサイズが大きい

など…etc。
XDよりも痒い所により手が届く使用感になっていました。

結論 結局どっちが良いの?

数日間触ってみただけですが、今までXDで不便に思っていた部分が改善されているアプリという印象で、すっかりFigmaのファンになってしまいました。Figma は非常にオススメです!

しかし、仕事で使用する上でXDから直ぐに乗り換えられるかというとそう単純ではなく、クライアントや関係各社での使用環境なども重要になってきます。

さらに、2021年8月にFigmaがAdobeに買収されてしまいました。その影響がこれからどのように出てくるのかまだまだ不明ですが、XDがよりFigmaの使用感に近づいていく可能性もあるのではないでしょうか。

結論として、両者のアプリに細かい差はあるものの大きな差はなく、自分の置かれている環境や案件によって使い分けられるのがベストだと感じました。

さいごに

ずっと気になていたアプりFigmaを触ってみて、その良さを実感することができました。
今回は共同編集機能について深掘りする時間が無かったのですが、Figmaは共同編集機能に関しては 定評があるようです。
Figmaの今後の動向を見守りつつ、 引き続き今回記事にできなかった部分についても更に調査を続けていきたいと思います。