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
15
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
820
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.4k
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
860
Other Decks in Design
See All in Design
Design System for training program
mct
0
260
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
360
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
200
Emil Storyboards (2024)
abbsant
0
160
Dreamia
elsh
0
140
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
260
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
310
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
810
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
210
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.4k
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
130
Yahoo Newsletter Clicker Template
xuechunwu
0
280
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
8
400
The Language of Interfaces
destraynor
154
24k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
RailsConf 2023
tenderlove
28
840
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Robots, Beer and Maslow
schacon
PRO
157
8.2k
KATA
mclloyd
27
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Designing the Hi-DPI Web
ddemaree
279
34k
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