良いコミュニケーションのために、Figma/FigJamで工夫していること—―4つの課題とその改善策を解説

  • X
  • Facebook
  • note
  • hatena
  • Pocket

課題2:Figma上で仕様やデザインの根拠が迷子になる

 とくに開発期間が長いプロダクトでは、なぜそのようなデザイン・仕様になったかが途中からわからなくなることがありました。また、Figmaに仕様を残したはずなのに見つからないといった事態も発生し、仕様を確認するためのコストが増加。すると、仕様や意思決定の背景を掘り返すこと自体に労力がかかりますし、その所在がわからないという問題も発生していました。

 このようなことが起こった原因のひとつが、「仕様をコメントに書きこんでしまっている」ことでした。

コメント
コメント機能

 Figmaのコメント機能はとても便利ではあります。しかし、本来コミュニケーションするためのコメント機能がメモと混同されてしまい、仕様に関する伝達事項も“メモ代わり”にそのコメント機能に記載された結果、どこに仕様が書いてあるかがわからなくなっていたのです。そこで次の対策を講じました。

対策:コメントと大事な仕様のメモとで運用ルールを設ける

 あるチームでは、以下のように「Figmaでのコメント」と「仕様の書きかた」について、運用のルールを設けました。

  • コメントは会話のみに使用し、仕様メモとして利用しない
  • コメントの会話が完了していれば、コメントを解決する
  • 仕様はコメントに記載せず、仕様メモに記載する
  • 仕様メモには、誰が、いつ、どのような理由で意思決定したか根拠を残す

 もちろん、システムの複雑な仕様は別のドキュメントに記載もしていますが、デザインを伝えるうえで必要な内容は、次のような仕様メモに記載することにしました。

仕様メモのコンポーネント
仕様メモのコンポーネント

 仕様メモのコンポーネントを自前で用意することには、「自由に作れる」というメリットがある反面、「作るのがめんどくさい」というデメリットもあるため、作成のハードルは上がります。しかし、自作するモチベーションが沸かないときには自前で用意しなくても、メモ用のライブラリやプラグインが公開されているため、Figmaコミュニティから自分に合ったライブラリやプラグインを探すのもオススメです。

Figmaコミュニティにはさまざまな付箋が公開されています
Figmaコミュニティにはさまざまな付箋が公開されています

 開発(Dev)モードを使用できるチームであれば、開発モードのアノテーションを使うのも有効です。開発モードを使えば、「アノテーション(下図:上部)」で仕様メモを残したり、「測定値(下図:下部)」で要素間の間隔を具体的な数値で簡単に伝えることが可能です。

開発モードでアノテーションと測定値を表示
開発モードでアノテーションと測定値を表示