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
880
Easy Semantic HTML Structure for Komerco Team
Avatar for kenshir0f kenshir0f
5
6.1k
Cookpad Spring Internship 2019 Service Development Course
Avatar for kenshir0f kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
Avatar for kenshir0f kenshir0f
14
9.8k
Introduce Atomic Design with small rework
Avatar for kenshir0f kenshir0f
3
300
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.7k
s-dev-talks#2-komerco-team-building
Avatar for kenshir0f kenshir0f
4
910

Other Decks in Design

See All in Design
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
7
3.1k
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
220
kintone_aroma
Avatar for kintone kintone
0
600
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.5k
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
320
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
270
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
210
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
170
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
260
mount_company_profile
Avatar for mount inc. mount_inc
0
2.8k
Liquid GlassとApp Intents
Avatar for touyou touyou
0
480
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
200

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
660
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k

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