Figmaを通したエンジニアとデザイナーの連携について

"クラスメソッドのデザイン・体験づくり事情大公開スペシャル" にて登壇した内容です。
デザイナーとエンジニアが協業する上で大事な3つについて詳しく発表しています。

https://classmethod.connpass.com/event/305278/

Transcript

1. Figmaを通したエンジニアとデザイナーの連携に ついて
 
 in クラスメソッドのデザイン・体験づくり事情大公開スペシャル
 
 　　　　　　　　　　　　　　　　CX事業本部 morimorikochan
 
 
 1
2. 2 自己紹介 morimorikochan • @marooon88 • CX事業本部 ◦ バックエンドがメイン • Switchのゲームが好きです ◦ 最近だと「デイヴ・ザ・ダイバー」が面白 かったです • Figmaと自分 ◦ 前職でよく触ってた ◦ 最近の機能はあまり詳しくない... • デザイナーの方多い中、ダサいスライドを見 せるのが忍びない気持ち😩
3. 3 Figma使ってる人🙋
4. 4 日頃からエンジニアと協業してる人🙋
5. デザイナーとエンジニアが協業する上で大事な3つ 1. UIを可変なサイズで作りましょう 2. 再利用性を高めましょう 3. タスクを明確にしましょう + Figmaでは何を気をつければええんや🤨？ 5 話したいこと
6. UIを可変なサイズで作りましょう 6
7. もし画面の横幅が大きくor小さくなる場 合、ユーザー名と日付はどのように表 示されると思いますか？ • 大きくなる時、日付は左寄せ？右寄 せ？ • 小さくなる時、ユーザー名と日付は 二行になる？ （実演） エンジニアのあなたにこういうデザインが渡されました 7 UIを可変なサイズで作りましょう
8. Figmaで高さや幅を変更してみても、デザインが一切変化しない 横幅や縦幅が可変である環境ではどのように表現すれば良いかがわから ない🤦 エンジニアから質問攻めが起きて忙しくなったり...😩 エンジニアから確認がなく意図しないままリリースされたり...😩 こうならないようにUIを可変なサイズで作ることがとても大切 Figmaに要素をドラッグ&ドロップで配置しただけだと 8 UIを可変なサイズで作りましょう
9. • 要素を選択して Shift+A を押すことでAutoLayoutが適用されます • Resizingが大変便利です ◦ CSSでいうdisplay=”flex”と同じようなことができます （実例） 先ほどの例をAutoLayoutに対応させましょう。 Auto Layout 9 UIを可変なサイズで作りましょう
10. Q: AutoLayoutを使わなくてもConstraintsでも同じようなことできるんじゃない？ • おおよそはできます。ただし、要素同士が衝突した際の表現ができません • 例えば、要素同士が衝突したら、片方の要素を折り返し表現させる Q: 難しそう...😱 • 操作の難しさ→仕方ない...CSSに比べるととても簡単✨ • 概念の難しさ→エンジニアが実装時に悩ませているかもしれませんので、一緒 に考えたり相談したりしてみましょう💪 AutoLayoutに対する疑問 10 UIを可変なサイズで作りましょう
11. 再利用性を高めましょう 11
12. アプリケーションのベースとなるボタンや入力フォームのUIに仕様変更 すでにFigmaには100箇所以上存在している 全て修正するのは大変💦 修正せず、エンジニアがよしなに実装→Figmaがメンテされなくなる☠ 修正したが修正漏れがあった→そのままリリース☠ 根本的な原因は「再利用を前提に作成されていない」から 大量の仕様変更... 12 再利用性を高めましょう
13. 「システム・ソフトウェア品質標準 SQuaRE シリーズの歴史と概要 , SEC journal, Vol.10, No.5 （2015）, 早稲田大学 名誉教授 東基衛氏」 https://www.ipa.go.jp/archive/files/000065855.pdf 再利用性はソフトウェアの世界でとても大事✍ 13 再利用性を高めましょう
14. Figmaには再利用性に着目した “コンポーネント” という概念がある いわばUIのテンプレートのようなもの Figmaではコンポーネントからコピーした物を “インスタンス” と呼びます コンポーネントが変更されるとインスタンスに自動で反映されます （実例） 先ほどの例でコンポーネントを利用した場合を見てみましょう コンポーネント 14 再利用性を高めましょう
15. 複雑なUIを持つアプリケーションをエンジニアが作成する場合、 “コンポーネント” と同じこと（再利用の単位）を考えているはずです（再利用性を 高めるため） コンポーネントがあることで エンジニアが考える再利用の単位 = デザイナーが考える再利用の単位 • 実装の難易度イメージが比較的一致しやすい • エンジニアがコンポーネントの設計を考えやすい エンジニアにとって何が嬉しい？🤨 15 再利用性を高めましょう
16. タスクを明確にしよう 16
17. 画面数が多い複雑なアプリケーションのUIをデザインする場合、できた画面に対し てPMから五月雨にコメントが来る 気づいたらコメントが100とか200とか行く Figmaでコメントを探すためにひたすら画面をスクロールする日々 返信を追えず、エンジニアとデザイナーのどちらがボール持っているかわからなく なってしまう😵 コメントが多すぎて管理できひん！🤯 17 タスクを明確にしよう
18. コメントをExcelに書き出してくれるFigmaのプラグイン • 返信が折りたたまれている🚀 • 解決済みかどうか一目でわかる👀 Export Comments 18 タスクを明確にしよう • コメントへのリンクがある
19. 開発準備が完了したものに マークがつく Dev Mode 19 タスクを明確にしよう 変更履歴が見れる
20. まとめ 20
21. 1. UIを可変なサイズで作りましょう ◦ AutoLayoutを使いこなす 2. 再利用性を高めましょう ◦ コンポーネントを定義しましょう 3. タスクを明確にしよう ◦ Export Commentsでコメントを見やすく管理しよう ◦ Dev Modeを使いこなそう デザイナーとエンジニアが協業する上で大事なこと 21 まとめ