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

Figma with Cookpad

Avatar for kenshir0f kenshir0f
July 15, 2021
Design
16
16k

Figma with Cookpad

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

Avatar for kenshir0f

kenshir0f

July 15, 2021
Tweet

More Decks by kenshir0f

See All by kenshir0f
How Cookpad use Figma
Avatar for kenshir0f kenshir0f
3
900
Easy Semantic HTML Structure for Komerco Team
Avatar for kenshir0f kenshir0f
5
6.2k
Cookpad Spring Internship 2019 Service Development Course
Avatar for kenshir0f kenshir0f
2
1.3k
Cookpad TechConf 2019 Komerco Service Dev
Avatar for kenshir0f kenshir0f
14
9.9k
Introduce Atomic Design with small rework
Avatar for kenshir0f kenshir0f
3
310
Basic css note for Komerco Team
Avatar for kenshir0f kenshir0f
6
8.1k
Design for Behavior and Impact
Avatar for kenshir0f kenshir0f
9
5.1k
tech-kitchen-#16-komerco-design
Avatar for kenshir0f kenshir0f
4
5.8k
s-dev-talks#2-komerco-team-building
Avatar for kenshir0f kenshir0f
4
930

Other Decks in Design

See All in Design
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
700
mount_company_profile
Avatar for mount inc. mount_inc
0
5.2k
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
260
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
110
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
210
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
110
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
200
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
1
330
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
290
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
690
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
940
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.7k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
340
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
220
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
290
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
140
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
200

Transcript

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

  2. 自己紹介 C 藤井 謙士朗(ふじけん# C デザイン戦略部 デザイン基盤グループ G@ 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