Figmaを活用したデザインコラボレーション

Transcript

1. Figma Design Teams Collaboration

2. Noriaki Kawanishi @norinity1103

3. None
4. None

5. Figma上で 喧嘩しないで！

6. Figmaを活用したデザインコラボレーション 1 チームプロトタイピング 2 健全なフィードバック文化を育てる 3 システムデザイン&ドキュメントの運用 戦術的/機能的な情報設計をFigma上のアウトプットを介して解像度を高めていく ビジネスや情報設計はnotion、開発ソースはwikiに 謙虚なリーダーシップをとながら建設的な議論を進めていく

   実装に対して完全な同期をとることが目的でなく、システムデザインをチームで協議しサービスの成長とともに学習を深めて いくこと

7. オンラインワーク × モブデザイン チーム全員が同じ距離感でデザインに触れる 職能を越えてグランドルールを育てる 不確実性 / 再現性 を行き来してシステムデザインを行なう 従来の会議室型のオフラインMTGより格段に可読性が上がり、UI/UXデザイン成果物の評価検討に複数のメンバーを巻き込

   みやすくなっため 短い時間でも制度が高く、早い意思決定ができるようになったからこそグランドルールを作りやすい、プロトタイピングにお ける検証 実装に対して完全な同期をとることが目的でなく、システムデザインをチームで協議しサービスの成長とともに学習を深めて いくこと

8. 管理用のコンポーネントを整備

9. プロジェクト運用での注意点 ファシリテーター/ドライバーが不在 基本的に散らかりがち 情報の寄りどころとしての期待値調整 ホワイトボードの代替としてグラフィックファシリテート、ストラクチャードコミュニケーションのように行う場合。各種 MTGやディスカッションの計画とゴール設定、プロジェクトドキュメント落とし込みの規則が決まっていないとダラダラする 定期的にふりかえりや主体的な関係者で棚卸しをしないと、情報の正確性、作業進捗、検証制度が著しく低下するため、 デザインシステム運用でありがちだが、学習コストと運用コスト対するチームの合意が前提となる 最新のデータ、コンテンツの精度などすべてを保つことは無理ゲー。チームの職能ごとに活用の仕方は違うので、どのように 活用するのかを明確にする。適した用途に適したツールは対話で決める

10. None
11. None
12. None
13. None

14. 困ったら notionとかにリンク

15. None
16. None
17. None

18. indexとpageの定義はプロジェクトの属性てパターン化 DMM VR Connect DMM WEB CAMP

19. Material Design / Material UI kit に学ぶアプローチ

20. 品質の高いUIの背景にある原理や基本法則にふれる

21. Variant に過不足がないかを議論

22. Variant に過不足がないかを議論

23. Micro / Macro space の提起

24. Micro / Macro space の提起

25. タイプグラフィーの基本ルールづくり / UX Writing

26. Screen sizeや ブレイクポイント提議 / Frontend

27. Starter Kitを提供してチームの学習にあわせて運用

28. リードデザイナーがシステム運用の品質をサポート

29. 散らかしながら 整理していきましょう

30. None