はじめに
皆さん、初めまして、こんにちは。
プロダクト事業本部ソリューションチーム所属、入社2年目のかわもとです。
主に受託開発したアプリの機能改修、新しいお客様向けの新規導入を行ってます。
今回が初投稿になりますが、アプリの機能改修におけるUI設計工程で使用したデザインツール『Figma』を紹介、また業務を通してFigmaを実際に使用した所感を書いていこうと思います。
よろしくお願いします🙌
『Figma』とは
まずFigmaとは何なのか…それをざっくりとご紹介します。
Figma は、ブラウザベースの コラボレーション・インターフェース・デザイン・ツール です。
つまり、ダウンロード・インストール不要の、ブラウザ上でリアルタイムで複数人による共同作業が可能なデザインプラットフォームですね。
アカウントを取得してログインすれば、Webブラウザ上で手軽に利用することができます。
有料プランも存在しますが、無料プランで十分なデザインが可能であり、ツールをダウンロードする必要がないため、お客様に確認していただくのも非常に簡単です。（※デスクトップアプリ版も存在します）
よかった点
それではさっそく、Figmaを使用してみて「いいかも！」と感じた書いていきます。
ただし、他のツールをそんなに長年使ってるわけではないので、"比較して"というよりは率直にいいなと思った部分のご紹介になります。
1. チームでリアルタイムにデザインできる！
これは冒頭でも述べた点ではありますが、やはりリアルタイムに同じものを触れるというのは大きなメリットだと思います。
皆さん触れたことがあるツールでいうと、フローチャートツールのMiro のような感じですね。
最近私はリモートでの仕事が大半を占めていますが、そんな中でも会話ツールと併用すれば、対面のように「あーだこーだ」いいながら作業できます。
実際、文面や言葉だけでは伝わりにくいようなパターンも、Figma上で「こんな感じに...」ってざっくりとしたものを作って見せてもらえるし、そのざっくりしたものを直接キレイにデザインし直すことも可能です。
非常に高効率だと感じました。
2. プラグイン『Autoflow』で画面遷移図を作成！
Autoflow というプラグインを利用することで、直感的に図形やフレームなどを矢印で繋ぐことができます。
使い方は非常に簡単で、
- 画面右側のデザインメニューのプラグインに表示されているOpen Autoflowをクリック（Autoflowのウィンドウが表示される）
- Shiftを押しながら 遷移元の画面／図形をクリック
- 同様に遷移先の画面／図形をクリック
たったこれだけです！
（※プラグインの導入手順は省いてますが、画面左上のメニューから簡単に検索・導入できます）
遷移の矢印が絡まってしまった場合も、画面／図形を動かすと矢印がいい感じについてきてくれるし、矢印の形・色などのデザインを変更することも可能です。
画面遷移図はUI設計でも基本中の基本だと思うので、それが簡単にできるのはとてもありがたいですね。
3. 他ユーザーが共有しているデザインを活用！
Figmaには、URLを教えるだけで作成したデザインを多くの人に共有できる機能が存在します。
今回業務でUI設計工程に使用した際には、他ユーザーさんが作った こちら のデザインを有効活用させていただきました。
ちょっとした仕様メモであったり、途中で変更が入った事項についての覚え書きであったり...序盤から終盤までフル活用でした。
また、他ユーザーが共有しているモノを利用できるということは、逆に言えばこちらからも共有できるということです。
私にはまだまだそんなモノを作ることはできませんが、もし良いモノができたら是非共有してみてはどうでしょうか？
会社を超えて業界に貢献できるチャンスかもしれません。
4. コメント機能でレビュー！
Figmaには、作業メンバーがコメントを残すことができる機能も存在します。
業務で使用した際には、レビュー指摘事項をコメントとして残していただいて、その後のやり取りをスレッドのような形で行っていました。
レビューを確認したらそのコメントにスタンプで反応、対応完了したら返信、レビュアーが確認完了したら「解決」…のように
レビューの一連の流れを、このコメント内で進行することができました。
Figmaのコメント機能の良いところは、コメントを残したい箇所にコメントのアイコンが表示され、どこに対する指摘なのがが視覚的に分かりやすい点です。
未読／既読の概念も存在し、未読の場合は強調表示されるため見逃しの心配もなさそうです。
さらに、「解決」状態になっているコメントは非表示になるため、すでに解決済みのコメントで溢れかえって見づらくなることもありません。
「解決済みコメントを表示」設定にしておけば表示することもできるので、不要な時は非表示、必要なときは表示といったように、都合にあわせて切り替えられるのも良い点ですね。
5. オートレイアウトのおかげで変更が簡単！
とある画面にラベル付きのボタンを配置してサイズ調節もして、いざお客様にお見せしたら、「やっぱりラベルの文言を変更してください。」ってパターン...結構あると思います。
そんなとき私は今まで、「文言変えて、ボタンのサイズ調節して…あれ？ボタンが上手く触れない…」みたいなことが多々ありました。
しかし、Figmaでオートレイアウト機能を活用すれば、変更した文言に合わせてボタンのサイズも自動で変更してくれるのです。
これもやり方は非常に簡単で、
- ラベルとボタンを選択
- Shift + A でオートレイアウト適用
これをするだけで、そのボタンの大きさはラベルを変えると自動で変わってくれます！
これはとってもありがたい機能…と言いつつ、私はUI設計工程終盤になってからこの機能を知ったので、ほぼ活用することができませんでした(´;ω;｀)
もし皆さんもFigmaを使う機会があれば、是非ガンガン活用して欲しいと思います！
いまいちだった点
次に、使用中に「うーん…もうちょっと…」と感じた書いていきます。
ただし、これについては基本的に私の知識が足りてないことが原因だったものばかりです。
"あとから「こんなのあったのか！」「こうしとけばよかった」となった部分"というニュアンスで捉えていただければと思います。
1. 自動保存なのでバージョン管理がしたい場合は手動で…
冒頭でも述べましたが、Figmaはブラウザ上で動作しています。そのため、常に変更内容を自動で保存してくれる機能が備わっています。
当然、常に自動保存されることによってファイルは常に最新の状態になります。安心感はありますよね。
しかし、お客様とのやり取りの中で、やっぱり前のデザイン・仕様に戻さないといけなくなること、あると思います。
私は、変更があるたびに「ローカルコピーの保存」によって、その時点での.figファイルをローカルに保存していたので対応できましたが、
正直かなり手間ですし、旧バージョンが増えてくると「あれ…いつのやつだ？」ってなることもあって大変でした。
でもこれはFigmaが悪いわけではなく、私の把握不足なだけでした…。
なんとFigmaには、バージョン履歴保存機能も備わっており、そのバージョンのタイトル・コメントとともにブラウザ上で保存することができるのです。
（通常の保存とは違い、基本的には手動で保存する運用になると思いますが、一定間隔でバージョン履歴保存も自動で行ってくれているようです）
もちろん、保存しているバージョン履歴から「このバージョンを復元」することによって、瞬時に当時の状態を復元することが可能です。
タイトルやコメントを付けられることによって、そのバージョンが何を変更したときのものであるかも一目瞭然です。
この機能は是非活用したかったです…。次使う機会には絶対活用します。
2. レイヤーをちゃんとしてないと、修正するときにワケわかんなくなる…
いろいろ配置されてる画面の一部を修正・変更したいときに、「あれ、あのパーツが掴めない…しかもレイヤー一覧でもどこにいるか分からない...」ってなることが多々ありました。
とくに、業務で担当していた画面ではモーダルによる表示のUI設計が多く、パーツの重なりが頻繁に起こっていました。
例で載せている画像は、この投稿のために適当に作ったものですが、これですら若干レイヤー一覧が正直ごちゃごちゃして見づらいと思います。
これももちろんFigmaが悪いというワケではなく、レイヤーやグループ化を適切に活用できれば対処できる問題だと思います。
むしろ、これらを適切に活用できれば変更にも効率よく対応できるのではないでしょうか？
ただ、ここをキレイに整理することにこだわりすぎると、それはそれで時間を浪費するような気もしますね。
あとから整理しようとすると大変になると思うので、レイヤーやグループ化を意識しつつパーツを配置していくのが良いのかなぁと思いました。
3. PDFで出力すると見づらかった…
「ブラウザ上で動作するため、お客様にも確認してもらいやすい」と冒頭で述べましたが、それでもFigmaで確認することができないパターンもあると思います。
実際、今回使用した際もPDF形式でお渡しすることがありました。PDF出力自体は標準で備わっています。
ここで、先ほどから例でお見せしてきた例画像のプロジェクト全体をPDF出力するとこんな風になってしまいます…。
Figma上ではデフォルトで作業スペースの背景が灰色になっているので、ただフレームを置いただけで画面の境界があるように思えるのですが、画面の周りの背景も白色になっているので、全体的に白い画面の境界は非常に分かりづらくなってしまいます。
しかも、プロジェクト全体がキッチリ収まる最小サイズになってしまうので、上下左右に余白が無くて窮屈な感じもします。
画面の境界については、左上の画面1のようにフレームに枠線を付けることによって対処はできますが、もしかしたらもっと良い方法があるかもしれません。
余白が無い件については、今のところ解決策を把握してないので、知っている方がいらっしゃったら是非教えて頂きたいです！
さいごに
いかがでしたでしょうか？
今回は、業務を通してFigmaを使用した際の所感を書いてみました。
ほとんど調べずに使っただけでも便利さを感じる部分が多かったので、きちんと調べてより便利な機能を知りたいとも感じました。
Figmaは近年非常に人気なようで、これからもユーザーが増えていく気がします。
ユーザーが増えることによって、便利なコンポーネントや良いデザインなどもたくさん公開・共有され、さらに活発になっていくと思います。
また新たな知識を得ることができたら、Figmaの記事Part2を書いてみるのもいいかなぁと思ったり…。
それでは、今回はこの辺りで失礼します。
参考にさせて頂いたサイト
chot.design - UI/UXデザインツール『Figma』入門