Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Figma with Cookpad
kenshir0f
July 15, 2021
Design
11
5.8k
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
2
530
Easy Semantic HTML Structure for Komerco Team
kenshir0f
6
5k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
850
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
8.1k
Introduce Atomic Design with small rework
kenshir0f
3
200
Basic css note for Komerco Team
kenshir0f
6
6.7k
Design for Behavior and Impact
kenshir0f
9
4.5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.1k
s-dev-talks#2-komerco-team-building
kenshir0f
4
640
Other Decks in Design
See All in Design
Cat Seance
emmamsketches
0
110
Illustration journey @Yahoo
xuechunwu
0
570
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
bookslope
0
420
アンドパッドのデザインシステムの今までとこれから
sizucca
2
1.2k
NCDC_UXSession_20220120
ncdc
0
710
FULLPAGEJUNGLECHASE.pdf
anran99
2
440
Nel: A Limbo Odessy
educe_art
0
150
Alma's Ticket To Life
yzhang0425
0
150
A Designer’s Guide to Documenting Accessibility & User Interactions
stephaniewalter
0
8.2k
The Triangle
wallabites
0
120
u1w_未知のゲームを制作する時に考えたこと
tobusaoi
0
120
Fairest of Them All
pandemonay
1
630
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Infographics Made Easy
chrislema
233
17k
Code Reviewing Like a Champion
maltzj
506
37k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
The Cult of Friendly URLs
andyhume
68
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
900
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Support Driven Design
roundedbygravity
86
8.5k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Three Pipe Problems
jasonvnalue
89
8.6k
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