こんにちは、株式会社Pentagon CDO/Designerの水谷です。
Figmaでデザイン作業を行う中で、デザインに関してのメモを書き込む場面がよくあリますよね。そのような時に便利なメモを書き残すためのUIコンポーネント（デザインヘルパー）をご紹介します。
【こんな人に読んで欲しい】
- Figma上によくメモを書き込むデザイナー
- チームでのFigma運用に悩んでいる方
【この記事を読むメリット】
- Figma上のメモが整理されて見やすくなる
- チームでのFigma運用が快適になる
【結論】
この記事内でご紹介するデザインヘルパーを使用することで、快適なFigma内でのメモ運用が行えるようになります。
是非、参考にしてみてください！
デザインヘルパーって何？
「デザインヘルパー」とは、Pentagonのデザインチーム内でつくった言葉です。
デザインヘルパーの役割としては、Figma内でメモを残すときに、そのデザインが「いつ」「どのような目的」で記したのかを明確にするためのものになります。
Figmaに不明なメモを残したくない
Pentagonでは、デザイナーチームがFigmaでデザインを行い、仕様に関するメモを残しています。
エンジニアチームはそのデザインと仕様メモを確認しながら実装を行うという運用の仕方です。Figma上に不明なメモを残してしまうと、混乱を招いてしまいます。
・「このメモに記してる仕様と今の仕様って違うんじゃない？」
・「どの部分を修正すればいいのかわからない」
・「これは確定したデザインなの？検討中なの？」
上記のようなやりとりが過去何度もあり、これだととても非効率ですよね。
役割別にメモのコンポーネントを用意しよう
Pentagonでは、目的別でデザインを説明するためのメモを用意しています。
・画面全体に対してどのような画面なのかを説明するためのメモ
・仕様について補足するためのメモ
・お客様からのフィードバックを書いておくためのメモ
上記のような誰が見てもわかりやすいメモを残せるように配慮しています。
Figmaのコンポーネント機能を使って、目的別にメモするためのテンプレートを用意しておくと便利です。
実際にPentagonで実施しているメモ運用をご紹介します。
【メモ①】画面全体に対してのメモ
画面に対して、「画面名」「フェーズ」「ステータス」のメモを残します。
画面名
画面名を記載します。
「Login」や「Home」など。
フェーズ
プロジェクトを進めていくにあたりフェーズを分けている場合が多いので、ここではフェーズ番号とそのフェーズ名を記載します。
「ワイヤーフレーム（仕様決め）」や「デザイン」など。
ステータス
このデザインが未確定状態なのか、確定状態なのかを記載します。また、そのステータスをいつ更新したのか、日付を記載します。
【メモ②】仕様に関してのメモ
仕様に関してメモを残します。どの箇所に対してのメモなのか、わかりやすくするために吹き出し風デザインを使いました。
【メモ③】フィードバックに関するメモ
主にお客様からいただいたフィードバックをメモに残します。SlackやChatwork、打ち合わせ中にいただいたコメントなど、どんなフィードバックがあったのかをFigmaに残しておきましょう。どのような経緯があって修正が必要なのかがわかりやすくなります。
【メモ④】変更点に関するメモ
一度確定したデザインだけど、変更が生じた場合にメモを残します。
いつ変更が生じたのか日付を残しておくと後々混乱しにくくなります。
【メモ⑤】検討中に関するメモ
仕様がまだ決まってない、デザインをどうするか検討状態の際にメモで残します。
【メモ⑥】デザインタスクに関するメモ
必要なデザインタスクをメモに残します。他のデザイナーにタスクを共有するときにも便利です。
【メモ⑦】履歴に関するメモ
そこまで重要ではないけど、アーカイブとしてメモを残しておきたい場合に使用します。
必要ないメモは削除しよう
Figma上にメモを残すことはとても有意義です。しかし、一度記載したメモをずっと放置しているのは、後々混乱を招く可能があります。必要のないメモはこまめに削除し、必要なメモだけを残すようにします。
【ちなみに】Figmaには便利なコメント機能がある
Figmaには便利なコメント機能があります。
チーム内や先方と、Figma上でチャットのようなやりとりが可能です。
ただあくまでやりとりをするための機能であり、メモを残すという観点では、今回ご紹介した方法が最適だと思っています。
まとめ
今回、Figmaをチームで運用していくためにとても便利な「デザインヘルパー」をご紹介しました。Figmaは機能がたくさんあり、やれることも無限にあります。
ただ運用ルールを設けずに好き勝手デザインをしていると、すぐさま煩雑なデザインファイルができてしまいます。
Figmaをチームで運用されている方は、今回ご紹介した「デザインヘルパー」を活用して、ぜひ快適なFigma運用をしましょう。
