デザインファイルで絵文字を効果的に使う

デザイナー、エンジニア、プランナー・企画者などが同じデザインのデータを同時並行で見る場合、デザインの状況など作業者以外でも情報をデザインの画面上でわかるようにしておくことが大事です。
Figma の場合はとくにそうですが、デザインを作成する編集者以外もデザインの途上にあるものも閲覧できるため、ステータスを明確にしておくとデザインを見るメンバー間での混乱を減らすことができます。

開発するエンジニアが見るものとして意識してわかりやすくする工夫については以前も書きましたが、今回は絵文字だけに限って書いてみたいと思います。

Figma のデザインで進行していくのに使用しているステータスや状態の絵文字についてまとめてみます。

デザインの状態を伝える絵文字

現在の Figma のデザインプロジェクトで使用している、各ページの状態を伝えるの絵文字です。

ページ名でステータスを表現する絵文字

• 🚧 作業中・編集中
• 🔴 レビュー中
• ❌ 破棄・ボツ
• 🗄 アーカイブ・ペンディング
• 🚀 実装OK（レビュー済み・確定）
• ✅ 実装済み

確定されたデザインはわかりやすいように 🚀 を使っています。「実装 GO!」的なイメージです。

ステータスを絵文字で表現することの利点のひとつは、その絵文字1字で状態がなんとなく伝わることです。
🚧 がわかりやすいですが、絵で表現されるコンテクストによって状態が伝わります。 ステータスを絵文字1字にしてしまうことで、ページ名のテキストの文字をその他の名称に使うことができます。
機能名などのフィーチャーになるものに文字数を使い、ステータスをサクッと伝えるのに絵文字は適していると思います。

ちなみに、ファイル名は下記のような絵文字を使っています。
デザインのバージョンをファイルで分けるようにしていたりするので、現行バージョンに 🚩 を使って現在地がわかるようにしています。

ファイル名で使う絵文字

• 🚧 作業中・編集中
• 🛠 新機能・新フィーチャー
• 🚩 最新版
• ✅ 実装済み

Figma の機能でファイル名の頭にある絵文字はウィンドウのタイトルにファイルアイコンとして表示がされるので、ファイルの扱いを表現するのに絵文字を使用できます。

伝える工夫をすること

絵文字を使って効率的にデザインの状況を伝えることができます。 とはいえ、絵文字は絵文字であって伝えられる情報量は限られています。デザインのステータスを絵文字だけで残しておくことはなく、画面上にアノテーションとなる要素をちゃんと残しておくのも必要です。

アノテーションとなる要素でステータスや説明をデザインの画面上に置いておくと、エンジニアもちゃんと見てくれており、伝わります。タイミングとしても非同期のコミュニケーションになりがちな箇所ではありますが、きちんとデザインについての記録や説明を残すことは開発現場では必要なやり取りだと思います。