Slide 1

Slide 1 text

2022/07/27 Figma Japan Community Event 大規模サービスの UIデザインを 管理する工夫 2022 Figma Japan Community Event Figmaの活用策をシェアしよう! 玉井 雄一郎

Slide 2

Slide 2 text

2022/07/27 Figma Japan Community Event 玉井 雄一郎 i クックパッド株式会社 レシピサービス開発部 デザイナb i 2021年新卒入† i クックパッドアプリの体験設計・UIデザインに
 取り組んでいます5 i 自炊力向上に奮闘中。 自己紹介 @Tamaai2

Slide 3

Slide 3 text

2022/07/27 Figma Japan Community Event 毎日の料理を楽しみにする」 ことを 目標に料理に関する課題を解決できる プロダクトを開発 3部署、合計9人のデザイナー体制 クックパッド 「 レシピサービス開発部 デザイナー 買物事業部 デザイナー ユーザーコミュニケーション部 デザイナー

Slide 4

Slide 4 text

2022/07/27 Figma Japan Community Event 大規模サービスのUIデザインを 管理する工夫

Slide 5

Slide 5 text

2022/07/27 Figma Japan Community Event 課題1 施策/デザイナーが複数関係していて トンマナ管理・仕様の把握が大変...。

Slide 6

Slide 6 text

2022/07/27 Figma Japan Community Event 解決策 すべての情報が集まる場を作り、 代表者が管理する

Slide 7

Slide 7 text

2022/07/27 Figma Japan Community Event 代表者が企画に関することを 1つのファイルに集約させる ƒ スケジュールや資料、issueのリンクなどすべて掲T ƒ 「ここを見ればいい」 という安心感 すべての情報が集まる場を作り、代表者が管理する バレンタインキャンペーンの場合 ※すべての施策で担当者がバラバラ 実際のバレンタインキャンペーン管理データ 関連リンク集 施策1 施策2 施策3 施策5 施策9 施策11 施策7 施策4 施策6 施策8 施策10 施策12

Slide 8

Slide 8 text

2022/07/27 Figma Japan Community Event 仕様メモを横に残し、遷移先のリンクや 条件を書き残す v みんなで見るので仕様考慮漏れがなくなu v なぜこのデザインにしたのかのメモも残せu v エンジニア同士の会話コストも削減 工夫1 バレンタインキャンペーンの場合 リンクやメモのコンポーネント

Slide 9

Slide 9 text

2022/07/27 Figma Japan Community Event 実装が画像になる部分はマスターコン ポーネントをUIデザインから切り分け ‘ UIデザインをAuto layoutで組んでおけば、
 後からのデザイン変更にも柔軟に対応できq ‘ エンジニアが任意のタイミングで画像を書き出して
 すぐ実装に着手できる 工夫2 バレンタインキャンペーンの場合 対応

Slide 10

Slide 10 text

2022/07/27 Figma Japan Community Event 課題2 決済周りの仕様が複雑 & 関係者が多い...。

Slide 11

Slide 11 text

2022/07/27 Figma Japan Community Event 解決策 UIをコンポーネント化し 画面遷移図のページを作成

Slide 12

Slide 12 text

2022/07/27 Figma Japan Community Event 画面遷移図ページを用意し、 デザインマスターから画面データを参照 h 仕様とクリエイティブデザインを引き剥がし、
 それぞれ議論しつつシームレスに変更を反映 UIをコンポーネント化し画面遷移図のページを作成 とあるキャンペーンの場合

Slide 13

Slide 13 text

2022/07/27 Figma Japan Community Event FigJamのコンポーネントを用いて 仕様把握をしやすく エンジニアとの認識すり合わせはもちろん、 POやサポートチームとのコミュニケーションにも役立つ 工夫 とあるキャンペーンの場合 FigJamの矢印と図形が便利 ! !

Slide 14

Slide 14 text

2022/07/27 Figma Japan Community Event And more... コンポーネント化されたデザイン素材 社内プラグイン

Slide 15

Slide 15 text

2022/07/27 Figma Japan Community Event Y 施策/デザイナーが複数入り組んでいてトンマナ管理・仕様把握が大変...B Y 決済周りの仕様が複雑 & 関係者が多い...B 9 Y 他デザイナーとの施策の把握がしづらく、バッティングが心配...B 9 9 すべての情報が集まる場を作り、代表者が管理す‡ UIをコンポーネント化し、画面遷移図のページを作‘ 施策やデザインを共有する「デザイン横断会」 をFigJamで実施 参考になれば幸いです ご質問等あればDMまで! おわりに 資料を公開しました ! 大規模サービスのUIデザインを管理する 工夫 たまい 2022/07/27 @Tamaai2