違いは？使いやすい？AdobeXD利用者がFigmaを使った感想｜ワイヤーフレーム作成版

こんにちは！千葉県船橋市にあるWeb・ホームページ制作会社ノベルティのマーケターの石田です。

これまでワイヤーフレーム制作はAdobeXDをメインで使用してきましたが、この度Figmaデビューを果たしました。

AdobeXDとFigmaの使用感はどう違うのか、AdobeXDを使えれば果たしてFigmaもスムーズに使えるのか、、、今回はAdobeXDをメインで利用してきた私がFigmaを使った感想を中心にまとめていこうと思います。

AdobeXDからFigmaの移行を考えている人の参考になれば幸いです。

Figmaを使ってみようと思ったきっかけ

Figmaが使いやすいという噂はちらほらと耳に入ってきていましたが、AdobeXDに慣れていたし、特に不便も感じていなかったので、「時間がある時に触ってみるかー」程度で考えていました。

しかし、事件は突然起こります。

2022年11月にAdobe社がFigmaの買収を発表。そして、2023年1月にAdobeXDの単体プランの発売が終了、、、（CreativeCloudの一部として2023年9月時点でAdobeXDの利用は可能です）

この一連の流れから「いよいよ、AdobeXDの提供が終わるのでは…？」とAdobeXD利用者たちをざわつかせました。

恐らくAdobeXD→Figmaの移行を考えている人のきっかけの多くは上記だと思います。いつかくるかもしれないAdobeXD終了という爆弾をかかえながら、AdobeXDを使い続けるのは危険…ということでFigmaを使ってみようと私も動き出しました。

AdobeXDとFigmaについて簡単におさらい

どちらもWebサイトやモバイルアプリ作成時に使用できるツールで、機能やレイアウトの表現に適しています。ワイヤーフレームを作成するという目的に関してはどちらも問題なく利用できます。

Adobe XDとは？

• Adobe社が2016年にリリース
• 現在はCreativeCloudの一部としてのみ利用が可能
• Adobe製品（illustratorやPhotoshopなど）との連携がしやすい

Figmaとは？

• Figma社が2015年にリリース
• 無料プラン、有料プランが存在し、無料プランでもすべての機能の利用可能
• 有料プランではプロジェクト数やファイル数が無制限で利用可能

ここが違った！AdobeXDユーザーがFigmaを使った感想

ここからが本題ですね。Figmaの良かったところ、イマイチだったところにわけて紹介していきます！

Figmaの良かったところ

データ共有のしやすさ

まず紹介したいのがデータ共有のしやすさです。チームで作業する上で必ず発生する共有作業。Figmaは作業内容が共有しているデータに即座に反映されるため、共有作業がとても楽です。

AdobeXDでもデータ共有は可能で、共有リンクを発行し、そのリンクを共有すれば誰でもデータの確認が可能です。しかし、データを更新した際は必ず下記の「リンクを更新」ボタンを押さないと、データが更新されない仕様です。

ページごとにリンクを発行していると、例えば共通パーツの修正が入った場合、1箇所修正しても、ページごとに更新ボタンを押す必要がありました。これがすごく面倒だったんですよね…。

Figmeの場合、作業内容が共有リンク含めて、即座にデータ反映されるため、共有のしやすさを感じました。

オートレイアウトが使いやすい

Figmaにはオートレイアウトという機能が備わっています。AdobeXDにも同様な機能はあるのですが、より機能が豊富です。

例えば、ラッパー内に均等に配列したい時。

AdobeXDのスタック機能だと入力した数字でしか余白の調整ができないため、自身で数字を調整して対応する必要があります。また、リピートグリッドを使えばもう少し感覚的な調整が可能ですが、ピッタリと調整するのが難しいです。

Figmaのオートレイアウトの場合、範囲（Figmaではフレームと呼ばれています）が定められていて、その範囲内で均等配列の設定ができるのでストレスなくラッパー内に均等配列が可能です。

私自身、度々ラッパー内に図形を均等配列したい場面があったので、オートレイアウトを初めて使った時は感動しました…！AdobeXDのスタックやリピートグリッドと比較しても、オートレイアウトはAdobeXD＋αの機能が備わっているので何かと便利です。

構成修正がしやすい

例えば、余白を調整したい時、1つ前で紹介した通り、AdobeXDのスタック機能で構成をしていると余白間の調整は数字を入力して行います。

Figmaでも数字を入力して余白の調整が可能ですが、直接クリックして調整することも可能なので、より感覚的に調整が可能です。

AdobeXDでもやれないことはないのですが、より調整がしやすかったです。

Figmaのイマイチだったところ

直感的な操作はできなかった

AdobeXDはillustratorやPhotoshopなどの使用経験があったこともあり、直感的な操作が可能でした。

Figmaもそのノリで始めたのですが、うーんわからない。Adobe製品に慣れていることもあり、ボタンの位置やショートカットなどが異なり、「こういう操作したいんだけどな」が直感的にわからなかったです。

AdobeXDが使えるならFigmaも使えるということはなく、慣れるまでは色々といじる時間はどうしても必要だと思います。

リアルタイムで作業状況が見られてしまう

Figmaの良かったところでリアルタイム更新をあげましたが、逆を言えば作業状況が丸見えということになります。

社内の人ならまだしも、社外の方に共有した後に修正が入った場合、何も対策をしていないと修正作業が丸見えとなります。

検討段階など、あまりオープンにしたくないこともありますよね。作業状況を見られたくないとなると、別途共有データを作成するなど新たな手間が発生します。

共有のしやすさは個人的にもFigmaの良さだと思うので、何か上手いことできればよいなと感じるポイントです。

chromeと相性が悪い

メインで使っているブラウザはchromeなのですが、Figmaファイルをchromeで開くとめちゃくちゃ重たい、、画面が真っ暗になる時もあります。

応急処置として、現在Figmaで作業する時はFirefoxを使用しています。Firefoxでも、たまに重い時がありますが、chromeより全然ましです。

通常業務はchromeを使っているのでブラウザの行き来が面倒なのが正直な感想…相性なのかなんなのか、社内メンバーでもchromeだと重たい人が何人かいるので今後改善できると嬉しいなと思っています。

慣れればFigmaは使いやすい！

今回はAdobeXDを利用していた私がFigmaを使った感想をまとめてみました。

イマイチだった面もありますが、それ以上に良かったところの方が大きかったです！Figmeは使い始めて日も浅いため、まだまだ便利と思える機能が隠れているかもしれません。

使い慣れたツールを使い続ける方が作業スピードが安定しますが、やはり便利なのに知らないままでいることはもったいないなとFigmaに触れて思いました。

新しいことに挑戦し、より効率化を図っていくことも大切ですね！