【Figma】チームのコミュニケーションを促進するための toolkit を作りました【DL可】
こんにちは、株式会社アトラエのデザイナー、三上蒼太です。
この記事は、Atrae Advent Calendar 2020 の3日目の記事です。
Figmaを使ってチームのコミュニケーションをする際に使えそうなToolkitをいろいろ作ってみました。
特にリモート環境でのコラボレーションを促進する道具として使っていただけますと嬉しいです。
（ニーズがあれば）これからもツールの追加や更新をしていきたいと思っていますので、もしリクエスト等あればご連絡ください😊
↓DLはこちらからどうぞ
Team Communication Toolkit 中身の紹介
ファイル構成はこのようになっています。
現状、7つのツールを格納しています。一つ一つ簡単に紹介します。
01 / Stickey Note
いわゆるFigma上の付箋です。
Variantsを使っていろいろいじれます。
02 / Update Log
ファイルを更新した時のログってどのようにチームに共有していますか？
Figma玄人の方はVersionHistoryにログを残したり、あるいは直接ファイルにメモを残す, あるいはSlackにてテキスト共有などが選択肢としてあると思います。
個人的な意見ですが、
VersionHistoryは今の仕様だとなかなか確認しない（つまり運用が形骸化しがち）、
直接ファイルにメモを残す方法だとメモが乱雑に増えていく、
Slackでのテキスト共有は、受け手としてはありがたいものの実際のFigmaファイルとSlackと二つのツールを行き来するのが面倒。
という印象です。
ということでFigmaに書いて綺麗にメモとして残せるようにして、受け手のためにそれをスクショして共有すればいいんじゃないかと考え、このようなUpdate logという仕組みを作ってみました。
こんな感じで使えます。
03 / Margin & Padding Guideline
マージン/パディングを確認するのはFigmaの基本機能でもちろん可能です。ただしスクショで共有する時など、場合によってはこのように直接記載する方が都合が良い時があります。そんな時に使うtoolです。
04 / Link to Service Button
Figmaを使いこなしていくにつれ、Figmaがまるで仕様書のごとく情報のハブになることがよくあります。
するといろんな各クラウドツールへのリンクをFigmaに集約させることになります。そんな時に便利に使えるtoolです。
05 / Impact Effort Matrics
プロダクトがリリースされて運用フェーズに入ると、特定の課題に対して施策のアイデアをブレストし、評価し、チケットとして管理する。といったフローを踏むことがあります。
その施策の「評価」をするための方法は適材適所ありますが個人的に使う頻度が高いのは「インパクト」と「工数」でマッピングする方法です。
これはそのためのマトリクステンプレートです。
このようにマッピングし、「"インパクト大かつ工数小"のものからはじめよう」などとプランニングをしていきます。
06 / Kanban Board
アイデアのログはカンバンボードに可視化します。
おそらくほとんどのチームがTrelloやAsanaやClickupなどのタスク管理ツールあるいはJiraやZenHubのようなプロジェクト管理ツールを使っていることでしょう。
なのでそのようなツールを開きながらチームで議論を進めることももちろん問題はないのですが、このようにFigmaで簡易的にすることもできます。
やはりFigmaはコラボレーションツールなので、あれやこれや議論しながらそれを可視化するという意味ではFigmaの方が早いことが多いです。議論が終わって諸々が固まったのちに、各自が管理ツールに詳細と共に記録していく運用もアリなのかなと思います。
07 / Empathy Map
デザインプロセスにおいてときどき登場するこちら。
今作ろうとしているサービスあるいは機能が一体誰のためのものなのか、その認識をチームですり合わせる時に使えるツールの一つです。
---
よかったらお使いください🙌
↓DLはこちらから（再掲）
---
明日は同じチームでいつもお世話になっているエンジニアの rtoya さんです！お楽しみに！
読んでいただきありがとうございます！サポートは次回の執筆に役立てさせていただきます。 普段はTwitterでつぶやいています 👉https://twitter.com/sota_mikami