Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figma with Cookpad
Search
kenshir0f
July 15, 2021
Design
16
14k
Figma with Cookpad
Figma見せ合いっこ 2021/07/15 で登壇したクックパッドのFigmaの運用のスライド資料です。
https://show-figma-20210715.peatix.com/
kenshir0f
July 15, 2021
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
How Cookpad use Figma
kenshir0f
3
830
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
5.9k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.5k
Introduce Atomic Design with small rework
kenshir0f
3
250
Basic css note for Komerco Team
kenshir0f
6
7.8k
Design for Behavior and Impact
kenshir0f
9
4.9k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
870
Other Decks in Design
See All in Design
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.8k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
200
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.6k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
160
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
230
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
170
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Minuto de Aventura
olgastoryboard
0
170
Night Shift (beginning sequence)
cpineda57
0
870
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
440
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
Happy Clients
brianwarren
97
6.7k
Music & Morning Musume
bryan
46
6.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Practical Orchestrator
shlominoach
186
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Speed Design
sergeychernyshev
24
570
Transcript
クックパッドのFigmaの運用 Figma見せ合いっこ / @kenshir0f 2021.07.15
自己紹介 C 藤井 謙士朗(ふじけん# C デザイン戦略部 デザイン基盤グループ G@ C デザインシステムの整備などを担当
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
クックパッド @ 私たちは「毎日の料理を楽しみにする」会社で @ 料理に関する課題を解決するプロダクトを開発しています 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
今日の内容 q クックパッドが Figma をどう活用しているA I 開発フローでの運用方法を中心に紹C q レシピサービス「クックパッドa q
大人数が絡む開発での運用ルー q デザイン共有の取り組み 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
クックパッド と Figma 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
クックパッドとFigmaの話 q 2018年頃から Figma を利V q 全社で Figma を活用していE q
大規模サービスから新規事業まd q 営業や人事なども利V q 契約プランは Organizations Pla# q 先月アップグレードしました 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
プロダクトごとにチームを管理 9 運用方法はチームごとに 任せていB 9 全体の整備をデザイン戦略 部がサポート 2021.07.15 Figma 見せ合いっこ/
@kenshir0f
プロダクトごとにチームを管理 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
V 月間5,900万人以上が利用している大規模なレシピサービh V 複数の部署が連携して同時に開w ) iOS/Android/We 今回は iOS のデザインで
Figma の活用方法を紹介 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
iOS の Figma のデータ F master データがあ9 F iOS アプリの全画面が入ってい9
F 施策は全て master から派 F 常に最新のデザインをコピー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
デザインフロー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f master 画面をコピー 必要な (仮) 検索画面の改善
(仮) ログイン画面の改善 #057 (仮) 検索画面の改善 施策B 施策A #177 (仮) ログイン画面の改善
施策のフォーマットを統一 5 部署ごとに施策を管' 5 治安を守るためにサムネイルを揃えている 2021.07.15 Figma 見せ合いっこ/ @kenshir0f #057
(仮) ログイン画面の改善 (仮) ログイン画面の改善 タイトル GitHub の issue番号
None
一覧性を重視
施策のテンプレートファイル
None
施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮) ログイン画面の改善 #177 (仮) ログイン画面の改善
施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (完成したデザイン) エンジニアが実装時に見る場所
施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f デザインを考える場所 プロトタイプがたくさんある
施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f ミーティングなどの共有用 議事録やメモなど
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f 仕様に関するメモを 必要に応じて貼る
メモで仕様を共有 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f 関連するリンクも載せる
リンクのコンポーネント 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮)検索をいい感じに改善する #7011 書き出した画像はここ
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f 時系列ごとにデザインをまとめて、 なぜ今のデザインになったか辿れる 時系列
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f インタビュー結果やレビューをまとめ、 なぜそのデザインになったかを辿れる
施策リリース後 毎週のリリースタイミングで master を更E 何がいつリリースされるかはデザイン横断会で共有 2021.07.15 Figma 見せ合いっこ/
@kenshir0f #057 (仮) ログイン画面の改善 施策A master master へマージ (仮) ログイン画面の改善
デザイン横断会 h いろんな施策の状況を Figma で共C h リリースされる予定のものを全て貼2 h いつ・なぜやるのかも伝え2 h
全体の品質チェックとしても機 h デザインガイドライン警察の出動 2021.07.15 Figma 見せ合いっこ/ @kenshir0f
2021.07.15 Figma 見せ合いっこ/ @kenshir0f
おわりに u クックパッドのFigmaの活用事例を紹介しまし9 u 本当はもっとネタを用意してましたが割3 u cookpad mart の事Y u
社内用のプラグインの u 何か真似できるところがあればぜひ活用してください! 2021.07.15 Figma 見せ合いっこ/ @kenshir0f