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