デザインツールをXd→Figmaへした話 / プロトタイプ作るようになった話

こんにちは、デザイナーの本田です。こちらは Enigmo Advent Calendar 2020 の2日目の記事です。

今年でエニグモへ入社して3年目。昨年末からUXデザイングループへ異動し、BUYMAのアプリケーション UIデザインがメインになったので、考えることややることが大きく変わった1年だったと感じています。 業務の幅も広がって何を書こうか迷うのですが、今年を振り返ると今までで1番デザインツールと向き合っていたし、学んだことも多かったので

  1. デザインツールをXd→Figmaへした話
  2. プロトタイプ作るようになった話

の2つについて書こうと思います。

1. デザインツールをXd→Figmaへした話

デザインデータ引き継ぎの関係上、Adobe Xdをメインで使っていたのですが、今年の7月頃からFigmaへ移行しました。 Xdも使いやすいですし、何よりAdobe Creative Cloud ライブラリが使えるので既に登録しているUIパーツはそのまま引っ張ってこれるのでよかったのですが 半年ほどXdを使ってみて、オンラインでの共有がやっぱり使いづらかったのと、社内でFigmaを使っている方が何人かいて、使いやすいよ!と言っていただけたのが移行するきっかけになりました。

使いづらかった点を軽くまとめると以下の3つになります。

  • プロジェクトメンバーで無料プランの方がいるときに共有の仕方を気をつけなければならない
  • クラウドドキュメントとオフラインドキュメントのファイル管理がどこに置いたかごちゃごちゃになる
  • チーム全体のクラウドドキュメントが見づらい

頑張れば全然使える範囲ではあったのですが、Figmaに移行してこの3つの課題はすべて解消されたので、移行してよかったなと思っています。

秋頃から有料プランのProfessional Teamにしていただいたので、アプリのUIどうなってたかな?と思ったときにすぐ確認できるようになったし、 Figma上でコメントしたらプロジェクトごとにslackへ通知がいくように設定したので、エンジニアやPMの方にもFigmaの機能使っていただいています。(使いこなしていただいてありがとうございます!)

今後もリモートワーク が続くことを考えると、私個人はFigmaをメインにしていくことになりそうです。 Xdのデザインデータが残っているプロジェクトのときはXdを使う、など今後も臨機応変に対応できたらなと思っております。

※でも2年前はSketch使ってたし、1年前はXdでいくぞ!!と思っていたので1年ごとに変わる説はあります。またFigmaに代わるサービスが出たときは時代の流れに合わせていきます。 ※SketchとZeplinは解約していただきました。

2. プロトタイプ作るようになった話

昨年までは簡単なLPやUIを作ることが多かったので、プロトタイプをあまり作っていなかったのですが、 プロジェクトメンバーが多いときや長期のプロジェクトになると、認識合わせや動きの確認がイメージしづらいので、プロジェクトによってはプロトタイプをつくるようになりました。

とりあえずすべてプロトタイプまで作ることにすると時間がもったいないなと感じたので、以下の4つに当てはまるときはプロトタイプを作成するようにしています。

  1. モーダルやトーストが表示されるとき
  2. ステータスごとにボタンの色やエラー文が変わるとき
  3. 3画面以上 遷移するとき
  4. スクロールしても画面上部や下部で固定するエリアがあるとき
  5. アプリでもWebViewで表示するとき

1.2.3. はチームメンバーとの認識合わせがしやすくなるのと、実機で確認したときにユーザーのことをイメージしやすくなる気がしてます。 4.5. はスマホのスクロールエリアが確保できているかだったり、不具合がないか確認するためにやっています。

基本的にツールはFigmaで作りますが、細かな動きも考慮してデザインしたいときはProtoPieを使っています。 今年はスマホハンバーガーメニュー内の動きを作ったのと、トーストの表示タイミングの認識すり合わせをしたいときの計2回ほど作成しました。

f:id:enigmo7:20201201225832p:plain 10月にリリースしたスマホハンバーガーメニューのProtoPie制作画面

Figmaだと細かい動きはできないことがあるので、ProtoPieも併用していけたらなと思っています。

最後に

今思えば異動してすぐにデザインツールをFigmaにしてもよかったし、すべてのプロジェクトでとりあえずプロトタイプ作ってもよかったな〜というのが正直な感想です。 ただ、リモートワーク 下においても半年ほど現状のツールでなんとかできないか試行錯誤した上で、どうしても譲れないポイントを自分の中で見つけられたのは大きな収穫だったかなと思っています。

あとはFigmaもProtoPieもアプリデザイナーの先輩方が勉強会を開いてくださって、わからないことがあったらいつでも質問していいよ〜とやさしく声をかけていただいたのもうれしかったです。ありがとうございます! 来年も今年学んだことをベースにさらにいろんなことに挑戦できたらいいな。

最後まで読んでいただきありがとうございました。

明日の記事の担当は、エンジニアの竹本さんです。お楽しみに。


株式会社エニグモ 正社員の求人一覧

hrmos.co