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

はたらく仲間たち

2023.02.072023.05.01

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

Figmaとは？
Figma とXDの違い
1. 使用環境
2. 価格
  1. Figma
  2. Adobe XD
Figmaの使用感
結論　結局どっちが良いの？
さいごに

Figmaとは？

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

Figma とXDの違い

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

使用環境

価格

Figma

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

Adobe XD

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

Figmaの使用感

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

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

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

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

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

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

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

さいごに

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

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

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

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