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
16k
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
880
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.8k
Introduce Atomic Design with small rework
kenshir0f
3
300
Basic css note for Komerco Team
kenshir0f
6
8.1k
Design for Behavior and Impact
kenshir0f
9
5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.7k
s-dev-talks#2-komerco-team-building
kenshir0f
4
910
Other Decks in Design
See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
220
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
370
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
140
maki setoguchi
maki_setoguchi
0
230
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.4k
デザイナー向けフライル説明資料
toshiblues
0
170
CursorでAI活用のナレッジベースを構築する
kanzaki
0
760
minpaku-community-scrum-patterns
norinity1103
1
460
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
580
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Six Lessons from altMBA
skipperchong
29
4k
Automating Front-end Workflow
addyosmani
1371
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fireside Chat
paigeccino
40
3.7k
How to Think Like a Performance Engineer
csswizardry
27
2k
Code Reviewing Like a Champion
maltzj
526
40k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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