BLOG

私が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でしかやった経験がないため)。

  XD figma
軽さ
※写真容量が大きかったりページ数が多いと重い
※Photoshop、Illustratorを同時に開くと重い

※写真容量が大きいと少し重い(XDよりは軽い)
※Photoshop、Illustratorを同時に開いても重くならず軽いまま
形式 Adobeアプリ クラウドアプリ
金額 有料
※弊社はコンプリートプランなので含まれていました
無料
コーディングのしやすさ
ガイドのロック
写真の切り抜き
縦書き
※プラグイン必要、修正が入るとちょい手間

※プラグイン不要、修正がラク
円に沿って文字
※プラグイン必要
リアルタイム共有
※リンクを更新する必要がある

※リンクを更新しなくても自動で反映される
Photoshop、Illusrtatorとの連携
直接Psdを開いたり、Aiからコピペが可能
コメント
※アカウントなしでコメント可

※コメントするにはアカウント必要
PDF作成
文字詰め ○のはず…
※Windowsではできない?Macではできるっぽい
リピートグリッド
※要素をコピーするような機能はないが余白の調整などは可能
カラーの一括置換
コンポーネント
※少し癖あり

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

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

ですが、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点。

  1. figmaとXD、共有されるとしたらどちらの方が嬉しいですか?
  2. 上の質問について、理由もあれば教えてください!
  3. その他共有されるデザインデータについて、こんなだと困るぜ!っていうのがあれば教えてください

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

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

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

Figmaの方が良い 2人
XDの方が良い 1人(※)

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

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

figmaを選んだ理由

  • 単純にXDより使いなれているから
  • 直観的な操作がめっちゃしやすいから
  • 個人的な話ですがfigmaを触る機会がほぼないのでfigma体験を増やしていければ
  • プラグインが便利

(Psd、Aiと比べて)XDを選んだ理由

  • 情報(余白フォントやカラーect)見やすいところです!書き出しの際のフォーマットやオプション選択も他2つより簡単にできる気がします。

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

  • 意図なしでテキストによってletter-spacingとかline-heightの値がコロコロ変わるとか…?(意図があれば大丈夫です!)
  • 中心がめっちゃズレてるとか…(Chromeの拡張機能で見るときに「あれ?」ってなります(笑))
  • デフォルトやGoogle Font で扱ってないフォントの使用(そのフォントが、画像での書き出しでOKとか代替のフォントを使えるとかなら例外)
  • レイヤーのグループ化がない
  • 余白や幅に意図のない奇数
  • 横並びのコンテンツで余白が全部違うとき
  • 小数点がある(よしなにしていいなら気にしません!)
  • 不用意にカラーを多様(デザインのテイストによってはありやと思います)
  • 余白で16pxとか書かれてる場合は15pxにしたほうがいいの…?
  • 1920pxであれば問題ないけど、100pxくらい縮めたらいきなり崩れるようなデザインの処理。
    ※非表示にするのかテキストを小さくすればいいのかとかとか。
  • 値に統一性がない→似たようなパーツだけど、各々フォントが異なっていたり、幅・余白や文字間が微妙に違う場合
  • 画像リンク切れ

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

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

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

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

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

結論:適材適所です

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

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

  1. よいデザインがスピーディに完成できること
  2. 会社やチーム全体で使いやすいツールであること
  3. デザイナー、コーダーが問題なく使えること

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

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

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

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

Fujiwara Makiho
著者.
Webデザイナー 藤原
役職.
WEBデザイナー

入社3年目、ヒアリングからデザイン、コーディングまでオールインワン型でWeb制作を行う。グラフィックデザインも担当し、業種やデザインテイストを問わないデザインとユーザーが希望する機能の提案・実装まで担当できる本社勤務のエースWEBデザイナー。