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
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
150
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
870
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
780
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2.9k
mount_company_profile
Avatar for mount inc. mount_inc
0
1.8k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
PRO
0
210
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
310
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
310
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
520
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
210
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
450
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
130

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k

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