私がXDよりfigmaを選ぶ理由｜現役WEBデザイナーの答え

あややのCM懐かしいですよね！

曲も大好きです。同世代ならカラオケで『よく盛り上がる曲ベスト10』には入る気がします。

今回の記事を書くにあたって、デザインをそれっぽくしてみました。

XDとfigma、どちらがいいのか問題

さて、今回のテーマは、XDとfigmaについてです！

最近Webデザインツールとして様々な人が推しているイメージですが、「結局どっちがいいの？」となったので、実際に色々と検証してみました。

ちなみに、私自身Webデザイナーとして、実案件でPhotoshop、Illustrator、XD、figmaを使った経験があり、ある程度デザイナーの気持ちもコーダーの気持ちもわかる…はず！という前提で、両方のツールを試してみました。

参考になれば嬉しいです！

XD、figmaの良いところ

まず、Webサイトの制作で両方使ってみて、PhotoshopとIllustratorと比べてよいところはこの3つです。正直言うともっとあるのですが、今回は絞りました。

ただ、写真の加工はPhotoshop、アイコンやイラスト、図形の作成はIllustratorというように使い分けています。

すべてXDとfigmaで完結している訳ではありません。

XD、figmaの機能を比較してみたよ

個人的な所感をまとめた比較表

なお、一旦プロトタイプ機能は比較には入れていません（XDでしかやった経験がないため）。

これ以外にも機能は盛り沢山なのですが、ペラのデザインで作る中で○✕と個人的な感想を付けてみたものになります。

個人的には、それぞれ良いところとちょっと使い辛いところがありますね。

ですが、Photoshop、Illustrarと比べると、やはり段違いでXD、figmaの方がデザイン＆コーディング共にしやすいです。

あとは、お客さまからデータを指定されることは基本的にないのですが、1度だけXDをご希望されたことがありました。XDも使えるようにしててよかった～！と思った経験です。

個人的にはfigmaが好き

結論ですが、個人的には今のところ、

figma≧XD＞＞＞超えられない壁＞＞＞Photoshop＞Illustrator

です。

以前までXD派でしたが、今は66％くらいfigma派です。なぜなら軽いから。

XDも軽いんですが、写真容量が大きかったりページ数が多いと重くなりがちなんですね。（Adobeに確認したところ、アートボードを分けるしかないと言われました）

アートボードは全部一つのデータで並べて見たいし、写真も確定してから加工したいから一旦はめ込みたい。よって『軽さ』重視、効率一択です。ただ、好みなので人によると思います。

figmaへの不満は、ガイドが引けない所、なぜかWindowsでは文字詰めできないところ、コンポーネントの変更がすっといかないところ…などでしょうか。Photoshop、Illustratorと互換性がないのはまあ会社が違うし仕方ないんですが…。

全部に満足している訳ではないので、もっといいツールが出たら貪欲に覚えたいし乗り換えると思います。が、それまではfigmaを使っていくことになりそうです。

一方で、アイコンや作字、グラフのイラストを作成するときはIllustrator、写真加工や効果の多いMVを作るときはPhotoshopも使います。Adobeさんにはまだまだお世話になる所存です、はい。

コーダーの意見を聞いてきたよ

そうは言っても主観だけだと検証にならないので、弊社のコーダーさん3人にアンケートを取ってきました！

質問内容はこちらの3点。

必ずしもfigmaとXDじゃないとダメ！ということはなく、どのコーダーさんもIllustrator、Photoshopでも実装対応していただけます。

したがって、強いて言えばどれがやりやすいですか？という質問になります。

①figmaとXD、デザインデータを共有されるとしたらどちらの方が嬉しいですか？

※XD派の方には、まだfigmaで依頼したことがないので、代わりにAdobeのツールと比べてもらいました。

②理由もあれば教えてください！

figmaを選んだ理由

（Psd、Aiと比べて）XDを選んだ理由

③その他共有されるデザインデータについて、こんなのだと困る！っていうのがあれば教えてください

お忙しい中、みなさま快くご回答いただきありがとうございました！

ちなみに、赤字は複数回答があった内容＝頻繁にコーダーさん困っていることという認識です。

こうして見ると、自分もやらかしていないだろうかと不安になりますね…。心の底から気をつけようと思いました。

アンケートの中で、『デザイナーもコーダーも、お互い歩み寄れる姿勢が大事やなと思ってます』というコメントをいただいたのですが、本当にその通りだと思います！

割とどのデザインデータでも『よしなに』対応してくださる、スペシャリストかつ仏のような優しいコーダーさんが多い弊社ですが、デザインをお渡しするときはお互いスムーズに良い仕事ができるように意識したいですね。

結論：適材適所です

『XDとfigma、どちらにもよい所はあるので選べない』ということで、冒頭のアイキャッチに戻ります。

今回自分で検証したり、コーダーさんの意見を聞いてみた結果をまとめると、この3つが重要だと感じました。

弊社では、渡されるデザインデータとして考えたときに、現段階ではfigma派が多いという結果になりましたが、会社によって求められるツールが違うと思うので、それに従うのがいいのかなと思います。

また、PhotoshopとIllustratorもスポットでは使いますし、悪い訳ではないのですが、前者に比べて動作が遅くて実装情報を共有しにくいという印象です。

社内の工程として『どのツールを使ってデザインするのか？』を考えたときに、制作チームの人（ディレクター・デザイナー・コーダー・エンジニア…etc）のみんながトータルで一番ハッピーに仕事ができるツールを使いたいと思います。

最後まで読んでいただきありがとうございました！それでは！