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
15k
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
840
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.6k
Introduce Atomic Design with small rework
kenshir0f
3
260
Basic css note for Komerco Team
kenshir0f
6
7.9k
Design for Behavior and Impact
kenshir0f
9
5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
880
Other Decks in Design
See All in Design
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
RailsConf 2023
tenderlove
29
1k
Building Applications with DynamoDB
mza
93
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
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