Figma with Cookpad

Figma見せ合いっこ 2021/07/15 で登壇したクックパッドのFigmaの運用のスライド資料です。
https://show-figma-20210715.peatix.com/

Transcript

1. クックパッドのFigmaの運用 Figma見せ合いっこ / @kenshir0f 2021.07.15
2. 自己紹介 C 藤井 謙士朗(ふじけん# C デザイン戦略部 デザイン基盤グループ G@ C デザインシステムの整備などを担当 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
3. クックパッド @ 私たちは「毎日の料理を楽しみにする」会社で @ 料理に関する課題を解決するプロダクトを開発しています 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
4. 今日の内容 q クックパッドが Figma をどう活用しているA I 開発フローでの運用方法を中心に紹C q レシピサービス「クックパッドa q 大人数が絡む開発での運用ルー q デザイン共有の取り組み 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
5. クックパッド と Figma 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
6. クックパッドとFigmaの話 q 2018年頃から Figma を利V q 全社で Figma を活用していE q 大規模サービスから新規事業まd q 営業や人事なども利V q 契約プランは Organizations Pla# q 先月アップグレードしました 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
7. プロダクトごとにチームを管理 9 運用方法はチームごとに 任せていB 9 全体の整備をデザイン戦略 部がサポート 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
8. プロダクトごとにチームを管理 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
9. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
10. V 月間5,900万人以上が利用している大規模なレシピサービh V 複数の部署が連携して同時に開w ) iOS/Android/We  今回は iOS のデザインで Figma の活用方法を紹介 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
11. iOS の Figma のデータ F master データがあ9 F iOS アプリの全画面が入ってい9 F 施策は全て master から派 F 常に最新のデザインをコピー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
12. デザインフロー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f master 画面をコピー 必要な (仮) 検索画面の改善 (仮) ログイン画面の改善 #057 (仮) 検索画面の改善 施策B 施策A #177 (仮) ログイン画面の改善
13. 施策のフォーマットを統一 5 部署ごとに施策を管' 5 治安を守るためにサムネイルを揃えている 2021.07.15 Figma 見せ合いっこ/ @kenshir0f #057 (仮) ログイン画面の改善 (仮) ログイン画面の改善 タイトル GitHub の issue番号
15. 一覧性を重視
16. 施策のテンプレートファイル
18. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮) ログイン画面の改善 #177 (仮) ログイン画面の改善
19. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (完成したデザイン) エンジニアが実装時に見る場所
20. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f デザインを考える場所 プロトタイプがたくさんある
21. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f ミーティングなどの共有用 議事録やメモなど
22. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
23. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 仕様に関するメモを 必要に応じて貼る
24. メモで仕様を共有 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
25. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 関連するリンクも載せる
26. リンクのコンポーネント 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮)検索をいい感じに改善する #7011 書き出した画像はここ
27. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
28. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
29. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 時系列ごとにデザインをまとめて、 なぜ今のデザインになったか辿れる 時系列
30. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
31. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f インタビュー結果やレビューをまとめ、 なぜそのデザインになったかを辿れる
32. 施策リリース後  毎週のリリースタイミングで master を更E  何がいつリリースされるかはデザイン横断会で共有 2021.07.15 Figma 見せ合いっこ/ @kenshir0f #057 (仮) ログイン画面の改善 施策A master master へマージ (仮) ログイン画面の改善
33. デザイン横断会 h いろんな施策の状況を Figma で共C h リリースされる予定のものを全て貼2 h いつ・なぜやるのかも伝え2 h 全体の品質チェックとしても機 h デザインガイドライン警察の出動 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
34. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
35. おわりに u クックパッドのFigmaの活用事例を紹介しまし9 u 本当はもっとネタを用意してましたが割3 u cookpad mart の事Y u 社内用のプラグインの u 何か真似できるところがあればぜひ活用してください！ 2021.07.15 Figma 見せ合いっこ/ @kenshir0f