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

Figma with Cookpad

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
July 15, 2021
Design
11
5.8k

Figma with Cookpad

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

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

July 15, 2021
Tweet

More Decks by kenshir0f

See All by kenshir0f
How Cookpad use Figma
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
530
Easy Semantic HTML Structure for Komerco Team
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
5k
Cookpad Spring Internship 2019 Service Development Course
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
2
850
Cookpad TechConf 2019 Komerco Service Dev
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
14
8.1k
Introduce Atomic Design with small rework
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
3
200
Basic css note for Komerco Team
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
6
6.7k
Design for Behavior and Impact
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
9
4.5k
tech-kitchen-#16-komerco-design
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
5.1k
s-dev-talks#2-komerco-team-building
6d74b5edd1571a5cf7ecfec9c694f26b?s=48 kenshir0f
4
640

Other Decks in Design

See All in Design
Cat Seance
E07eafb41f4c23afbf5ca3fe1aa83b75?s=48 emmamsketches
0
110
Illustration journey @Yahoo
Dc9d3d8370a9655046689bfb5a8c086d?s=48 xuechunwu
0
570
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
Ed946da673ee07c8b3b41b7aa8268e13?s=48 bookslope
0
420
アンドパッドのデザインシステムの今までとこれから
98616aa6b83a1cd3f1c7d22e2e1ad526?s=48 sizucca
2
1.2k
NCDC_UXSession_20220120
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
0
710
FULLPAGEJUNGLECHASE.pdf
8b7fb938172b8a20d480306981f68eae?s=48 anran99
2
440
Nel: A Limbo Odessy
2e1491e2d31d39a7daaf76c62a5305ec?s=48 educe_art
0
150
Alma's Ticket To Life
49242d21840cf877de57fb44d752e4fa?s=48 yzhang0425
0
150
A Designer’s Guide to Documenting Accessibility & User Interactions
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
0
8.2k
The Triangle
936338cf2e2eb7fbaadc60850935d0fb?s=48 wallabites
0
120
u1w_未知のゲームを制作する時に考えたこと
05301e1170c62df84521684c17f96278?s=48 tobusaoi
0
120
Fairest of Them All
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
1
630

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
8.3k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
900
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k

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