🎄

Figmaでプロダクトデザインのプロセスを通じて「メンバー間の共通認識」を高める🙆‍♀️

2022/12/22に公開

こちらはFigma 開発アドベントカレンダー22日目の記事です。
初のアドベントカレンダー投稿になります、よろしくお願いします☕️

はじめに

直近、高官庁系の大きくて古いシステムのリプレイスの案件にジョインしました。
「特殊なドメイン」　「入力項目の多さ（素材や数量、予実差異）」　「ユーザーのロールの多さ」　などが目立っていました。現行システムが古くてUIに機能が散在しており、機能の見直しも多かったので参考にし難い状況でした。

その状況下でメンバー間の共通認識をもてていない事に課題を感じていたのでその対応策として実行した取り組みを紹介しようと思います。デザイナー不在の中で、手探りで作っていたのでこんなやり方もあるんだって感じで読んでもらえれば幸いです。

１.UIを作る段階を踏む(HTMLからFigmaへとりこんで骨格を素早く組む)
２.作ったUIを公開して意見をもらう（Figmaのコメント機能を使う、ウィジェットの付箋Sticky noteを使う）
３.チームにあったFigmaの運用方針を模索して取り込んでいく

「プロダクトデザインのどのプロセスにいるのか」という現在地を意識しておくことが大切です

私はプロトタイプはSTGの環境に上がっているものを想定して画面を組んでいってしまうので、Figmaの中でホバーアクションとかを組み込んだりはあんまり実装せずにいます。

これに関しては開発メンバー間のリソース次第だとは思いますが、個人的にはFigma上でイベントへの反応を組み込むよりかはもっと違う部分に時間をかけたほうがいいかなと思います。

スケッチ‥現在手元にある情報を整理したドキュメント各種から作るラフ
ワイヤーフレーム‥UIの骨格＋機能＋概要のコンテンツを具備
モックアップ‥状態や制御、正しいコンテンツを具備
プロトタイプ‥開発環境のソース

UIprogress

上記の画像のようにプロセスのどの部分で何を話すかを書いておくとブレないかなぁと思います。

適時、チームごとにどのタイミングで画面遷移図、画面要素項目、状態、制御をドキュメントに落とすかは話あうといいと思います。

サイトからHTMLをFigmaに取り込むこともできるので、そこからモックアップを作ることもできます。下記のプラグインを使ってマイナポータルからワイヤーフレームを作った例です。

HTMLTOFiGmasample

現在地を意識しておくことで以下のようなメリットがあります

Figma上で共有されたデザインを確認してもらって。色んな設計の配慮が出来るように各分野のメンバーにレビューしてもらう

下記のような感じで
付箋‥仕様や制御、状態に関して情報を盛り込む（付箋の色で使い分ける）
コメント‥ 質問・提案・確認　についての情報。　解決したものは解決済みへ。　解決した事項を付箋や画面に取り込む

FigmawithComment

デジタル庁さんがデザインシステム利用の手引きを公開しています！
他にも企業さんがデザインシステムをいくつも公開しているので参考にしてみてください。

kore

最後は駆け足になってしまいましたが、読んでいただきありがとうございます！😅

他にも色々書きたいことがたくさんあるのですが、飛び込みでアドベントカレンダーに登録してしまったので書き上げることを目的にしました！