Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figma with Cookpad

kenshir0f
July 15, 2021
Design
13
8k

Figma with Cookpad

Figma見せ合いっこ 2021/07/15 で登壇したクックパッドのFigmaの運用のスライド資料です。
https://show-figma-20210715.peatix.com/

kenshir0f

July 15, 2021
Tweet

More Decks by kenshir0f

See All by kenshir0f
How Cookpad use Figma
kenshir0f
3
640
Easy Semantic HTML Structure for Komerco Team
kenshir0f
6
5.3k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
900
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
8.4k
Introduce Atomic Design with small rework
kenshir0f
3
210
Basic css note for Komerco Team
kenshir0f
6
7k
Design for Behavior and Impact
kenshir0f
9
4.6k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.2k
s-dev-talks#2-komerco-team-building
kenshir0f
4
700

Other Decks in Design

See All in Design
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
630
MIXI スポーツ領域とライフスタイル領域のデザイン
mixil
0
470
【総合案内資料】180 Inc. Company Introduction 2022.11改定
shogouenaka
1
210
デザインシステムを使ってプロダクトのデザイン負債を解消する / TechConf2022
kchil
0
3.1k
ARコンテンツの考え方 - クリエイターでなくても「おもしろい」ARコンテンツを制作したい！
1901drama
0
330
BuriKaigi2023 みんなのヨガ部 開発エピソード
yd_niku
1
240
Grub
rottentwinkies
1
350
ペイディのUXライティングで気をつけている３つのこと
naoto_miyazaki
7
2.5k
Research Process of MusicTongue
mxair95000
0
170
デジタルプロダクトデザイナーしくじりあるある 〜失敗を糧にデザイナーとして2ランクアップ！〜
mobilitytechnologies
2
660
[UX/UI design] Target users and developmental psychology
shira0000000
1
240
後悔しないデザインシステムの始め方
takanorip
4
2.3k

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Clear Off the Table
cherdarchuk
79
290k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
A Tale of Four Properties
chriscoyier
149
21k
The Cult of Friendly URLs
andyhume
68
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Faster Mobile Websites
deanohume
295
29k
Three Pipe Problems
jasonvnalue
89
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k

Transcript

  1. クックパッドのFigmaの運用 Figma見せ合いっこ / @kenshir0f 2021.07.15

  2. 自己紹介 C 藤井 謙士朗(ふじけん# C デザイン戦略部 デザイン基盤グループ [email protected] C デザインシステムの整備などを担当

    2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  3. クックパッド @ 私たちは「毎日の料理を楽しみにする」会社で @ 料理に関する課題を解決するプロダクトを開発しています 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  4. 今日の内容 q クックパッドが Figma をどう活用しているA I 開発フローでの運用方法を中心に紹C q レシピサービス「クックパッドa q

    大人数が絡む開発での運用ルー q デザイン共有の取り組み 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  5. クックパッド と Figma 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  6. クックパッドとFigmaの話 q 2018年頃から Figma を利V q 全社で Figma を活用していE q

    大規模サービスから新規事業まd q 営業や人事なども利V q 契約プランは Organizations Pla# q 先月アップグレードしました 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  7. プロダクトごとにチームを管理 9 運用方法はチームごとに 任せていB 9 全体の整備をデザイン戦略 部がサポート 2021.07.15 Figma 見せ合いっこ/

    @kenshir0f

  8. プロダクトごとにチームを管理 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  9. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  10. V 月間5,900万人以上が利用している大規模なレシピサービh V 複数の部署が連携して同時に開w ) iOS/Android/We  今回は iOS のデザインで

    Figma の活用方法を紹介 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  11. iOS の Figma のデータ F master データがあ9 F iOS アプリの全画面が入ってい9

    F 施策は全て master から派 F 常に最新のデザインをコピー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  12. デザインフロー 2021.07.15 Figma 見せ合いっこ/ @kenshir0f master 画面をコピー 必要な (仮) 検索画面の改善

    (仮) ログイン画面の改善 #057 (仮) 検索画面の改善 施策B 施策A #177 (仮) ログイン画面の改善

  13. 施策のフォーマットを統一 5 部署ごとに施策を管' 5 治安を守るためにサムネイルを揃えている 2021.07.15 Figma 見せ合いっこ/ @kenshir0f #057

    (仮) ログイン画面の改善 (仮) ログイン画面の改善 タイトル GitHub の issue番号
  14. None

  15. 一覧性を重視

  16. 施策のテンプレートファイル

  17. None

  18. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮) ログイン画面の改善 #177 (仮) ログイン画面の改善

  19. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (完成したデザイン) エンジニアが実装時に見る場所

  20. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f デザインを考える場所 プロトタイプがたくさんある

  21. 施策ファイルの中身 2021.07.15 Figma 見せ合いっこ/ @kenshir0f ミーティングなどの共有用 議事録やメモなど

  22. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  23. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 仕様に関するメモを 必要に応じて貼る

  24. メモで仕様を共有 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  25. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 関連するリンクも載せる

  26. リンクのコンポーネント 2021.07.15 Figma 見せ合いっこ/ @kenshir0f (仮)検索をいい感じに改善する #7011 書き出した画像はここ

  27. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  28. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  29. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f 時系列ごとにデザインをまとめて、 なぜ今のデザインになったか辿れる 時系列

  30. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  31. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f インタビュー結果やレビューをまとめ、 なぜそのデザインになったかを辿れる

  32. 施策リリース後  毎週のリリースタイミングで master を更E  何がいつリリースされるかはデザイン横断会で共有 2021.07.15 Figma 見せ合いっこ/

    @kenshir0f #057 (仮) ログイン画面の改善 施策A master master へマージ (仮) ログイン画面の改善

  33. デザイン横断会 h いろんな施策の状況を Figma で共C h リリースされる予定のものを全て貼2 h いつ・なぜやるのかも伝え2 h

    全体の品質チェックとしても機 h デザインガイドライン警察の出動 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  34. 2021.07.15 Figma 見せ合いっこ/ @kenshir0f

  35. おわりに u クックパッドのFigmaの活用事例を紹介しまし9 u 本当はもっとネタを用意してましたが割3 u cookpad mart の事Y u

    社内用のプラグインの u 何か真似できるところがあればぜひ活用してください！ 2021.07.15 Figma 見せ合いっこ/ @kenshir0f