複数人でfigmaを利用してみて良かった点・気をつけたい点
こんにちは。サービスデザイン部の烏丸です。
今回はデザイン部でおこなっているグループミッション（以下ぐるみ）のスキルアップグループで若手たちがUIツール「figma」を利用してみてよかった点・気をつけたい点を共有します。
ぐるみについてはこちらから→社内横断のデザイン活動を始めるまで
figmaとは
SketchやAdobe XDと同じように、 インターフェースデザインのために作られたデザインツールです。
特徴は、webブラウザベースのツールで、複数人でリアルタイムに閲覧・編集・コメントをすることが可能であることです。
（デスクトップアプリもあります）
figmaの公式動画はこちらから視聴できます。
figmaの料金体系
無料でも使う事ができますが、有料版もあります。
今回ははじめてなので、無料版を使用しました。
無料版でも十分作業は行えますが、困った場面もいくつか出てきたので、あとに記載しています。
figmaを利用して採用ページをリニューアル
弊社のデザイナーはIllustratorやPhotoshop、Sketchを主に利用しているのですが、
最近よくfigmaという名前を巷で聞いたりしている中で「使ってみたい！」という声が複数人から上がりました。
奇しくも同じタイミングで弊社のコーポレートサイトの採用ページをリニューアルして欲しい、という声が……！
ということで、スキルアップグループと題して、自分たちのスキルアップも狙いながらfigmaを利用しコーポレートサイトのリニューアルをしました。
複数人で利用するfigmaの良いところ
書き出しが必要なく、URLで簡単にデザインが共有できる
IllustratorやPhotoshopなどでデザインを作成して誰かに確認してもらうときには、基本的にjpgやpngで書き出しすると思うのですが
修正が何度か入ると何が最新ファイルかわからなくなったり、先祖返りしてしまうこともしばしばあるかと思います。
しかしfigmaではプロジェクトにURLが発行されるので、いつでも最新のデザインが共有できます。書き出す手間もいりません。
また、「イラレ持ってないから見れない！」などもありません。
もちろん書き出しもできるので、必要に応じて使い分けていけば良いと思います。
ショートカットがSketchなどと似ているため学習コストが低い
新しいツールを導入するとき一番気になるのは「どれぐらいの期間で使い勝手がよくなるか」という学習コストです。
figmaは他のツールと操作がほぼ似ているので、1,2時間あれば余裕で基本操作は可能だと思います。
ブラウザで操作するわりにさくさく動き、意外とストレスフリー
アートボードを増やしても、複数人で同じ箇所を触っていてももっさりした感じはありません。むしろAdobeより早い気さえします。
コメントツールが素敵
Zeplinなどのプロトタイピングツールにはコメント機能が付いていますが、デザインツールにはあまりコメント機能がついていないことが多いと思います。
figmaは複数人で同時編集できるためか、なんとコメント機能が実装されています。
デザイン作成時に備忘録として、また他の人が自分の触ったデザインを修正するときの注意点として、はたまた修正点をチェックするときなどにコメント機能がとても役に立ちました。
（それから「ここ素敵！」など相手のデザインを絶賛するときにも便利です、テンションが上がりますね！）
複数人で利用するfigmaの気をつけたいところ
チームルールをつくる
何にでも当てはまるのかもしれませんが、figmaを複数人のデザイナーで同じプロジェクトをルールなく触ると「それまだ途中だった！」「それ古いデザイン！」などの小さなトラブルが多々発生しました。
なので、「複数人で同じプロジェクトを触るときのルール」をチームで定めてみました。すると、複数人でのデザインがスムーズにできるように！
今回は、その定めたルールをご紹介します。
触っているアートボードのステータスを明示する
「このデザインはこれで完成なのか？」「このデータ、触ってもいいのかな？」などがわかりづらいとの声が上がりました。
改善策として、アートボードの近くにテキストで「いま作業中です」「これで完成！」などのテキストを置くルールを決めました。
これで他の人がそのデザインを参考に違うページのデザインに入るときに、どれを参考にするべきかがわかりやすくなりました。
コメント機能は備忘録にしか使わない（無料版のみ）
コメントが投稿された時の通知は登録したメールアドレスにしか来ないようで、コメントに気がつくのが遅くなることがありました。
Slack連携機能もあるのですが、それを利用するには有料版にするしかありません。
今回は無料版でトライしたので、緊急性を伴う連絡には利用できませんでした。
（なので備忘録として今回は利用）
基本的には「自分以外」のデザイナーが触ることを意識する
結局はこれに尽きます！
複数人でデザイン画を触ることがfigmaで可能になり、いつでもどのタイミングでも閲覧・編集が可能になりました。他の人がいつみても大丈夫なように意識して作業することが肝になりそうです。
その他、実際に利用していたデザイナーから出た感想
- いつでも編集でき、URLを共有すればいつでもみられるので、逆に編集している最中などにみられるとちょっと恥ずかしい
- レイヤーの煩雑さとか、力技を駆使してしまったりするシーンを目撃されると気まずい
- でも時間が解決してくれました！
- ⌘Sの保存を忘れる
- figmaは自動保存なので、figmaを触ったあとに他のデザインツールを触るとこまめに保存するくせが消える
- これはちょっと怖い（イラレやフォトショの復元機能に何回かお世話になりました）
- 複数人で同じデザインを編集するなんて今までなかったので新鮮だった
- 人のカーソルが動いているところを見るのがとても楽しかった。やる気出る。
今後、figmaを複数人のチームで業務利用する場合の参考になれば幸いです。