デザイナーを巻き込んだ Flutterのコンポーネント設計

Transcript

1. デザイナーを巻き込んだ Flutterのコンポーネント設計 SODA Flutter Talk #1
2. Figmaを使って発表してみます
3. 今城 洸幸(Imajo Takeyuki) T 2019年 面白法人Kayacに新卒入6 T 2023年 株式会社SODAに転U T 趣味: サッカー、アニメ、料S T 風邪のなおりかけでたまに咳するの をお許しください @imasirooo @imajoriri
4. 01 デザインをコードに落とし込む際の課題 02 デザイナーとコミュニケーション取るために行ったこと 03 FigmaとFlutterの命名を揃えるために行ったこと 04 FigmaとFlutterの抽象度を揃えるために行ったこと
5. SODAの開発とデザインの環境 1$ 実装はFlutte2 "$ デザインはFigma
6. デザインをコードに落とし込む際の課題 % 2つの課題3 % FigmaのComponentとFlutterのWidgetの.." % 命名の違 % 抽象度の違い
7. FigmaのComponentとは? r UI上再利用な要素をComponentと呼ぶY r 実装で言うところの「Class」的な存在Y r Componentからインスタンスを生成して使うY r Componentが変更されたらインスタンスも変更される。
8. FigmaのComponentとは?
9. FigmaのComponentとFlutterのWidgetの命名が違う 5 FigmaのComponent名とFlutterのWidgetが異なるE 5 Figmaを見ただけでは実装を見つけられない。 General Button Primary Button
10. FigmaのComponentとFlutterのWidgetの抽象度の違い x エンジニアは抽象化したいW x なるべく重複した実装は避けたいW x デザインは使いやすさのためになるべく具体化したいW x デザインと実装の抽象度が異なると変更の範囲も異なっ てしまうので、運用しずらい。 購入 Middle Button Buy 出品 Middle Button Sell Middle Button Title
11. 命名や粒度を同じにする方が運用しやすそう
12. 当初はFigmaに合わせて実装していたが、 実装的にはこうして欲しい！が出てくる
13. デザイナーとのコミュニケーションが足りていない！
14. 02 デザイナーとコミュニケーション取るために行ったこと
15. デザイナーとコミュニケーション取るために行ったこと T エンジニアがFigmaを勉強す3 T エンジニアとデザイナーが定期的に話す時間を設ける
16. Figmaを勉強する ‘ デザイナーがコードを見るよりも、エンジニアがデザインを 見る方が多いq ‘ Figmaを勉強することで両者の落とし所を提案できるq ‘ 最近見つけた本が良かったq ‘ 個人開発で積極的にFigmaを使うq ‘ 社内で勉強会をしていきたい ‘ 毎週Flutterメンバーでモブプロや読書会をしている。 Figma for デザインシステム
17. コミュニケーションを増やす y 普段の開発フローではコンポーネントの粒度まで話す時間が取れないR y エンジニア、デザイナー独自のルールが出来上がってしまうR y 毎週1時間デザイナーとFluttterエンジニアが集まる時間をとるR y 命名や抽象度について議論していく。
18. 03 FigmaとFlutterの命名を揃えるために行ったこと
19. FigmaとFlutterの命名を揃えるために行ったこと 6 TextStyl5 6 Colo' 6 Component
20. TextStyle 8 元々は一つ一つのコンポーネントに定義されてい たP 8 右写真のようなstatic constが無限にできてしまう 仕組みに。 ↓無限にできててしまう
21. TextStyle D FlutterはマテリアルデザインのTextTheme を使えるR D デザイナーにその旨を伝えて、Figmaでも TextThemeと一致する名前に。
22. TextStyle
23. TextStyle Japanese/Body/Large
24. TextStyle G bodyLargeより大きいBodyが欲しい..B G 一部はextensionすることでカスタマイズして いる
25. Color Y カラーはColorSchemeに揃えるのは難しい& Y すでに多くのカラーが定義されていた& Y AppColorクラスを独自で定義している& Y いずれくるかもしれないダークモードへの対応が大変そう...
26. ThemeExtensionを使ってみたい s 将来やりたいこととして、ThemeExtensionを使ってみたいR s ThemeExtensionとは、独自のTextThemeやColorThemeを作れる機能R s ダークモード対応できるし、切り替える時にふわっと切り替えられる。
27. ThemeExtensionの実装方法 „ ThemeExtensionのサブクラスを作成するp „ copyWithとlerpのOverrideが必ƒ „ lerpはテーマが変更された時の線形補間に よって滑らかに変化するためのもC „ ダークモード変更時にふわっと変更させる ことも可能
28. ThemeExtensionの実装方法 https://api.flutter.dev/flutter/material/ThemeExtension-class.html
29. コンポーネントの命名も揃える W FigmaのComponent名を見て揃え9 W スネークケースに揃える...とかはしな W Figmaを見てどこに実装されているか わかれば良い。 General Button
30. Widgetbook d 実装してあるWidgetを見つけやすくするため にWidgetbookを導入しているU d デザイナーがリリースされていないコンポー ネントを確認できるU d S3にホスティングしていて、社内なら誰でも 見れる。
31. Widgetbook % 詳しくは以前記事にしましたÉ % こちらから
32. 04 FigmaとFlutterの抽象度を揃えるために行ったこと
33. Figmaと実装で抽象度が違う  エンジニアは抽象化したい`  なるべく重複した実装は避けたい`  デザインは使いやすさのためになるべく具体化したい`  Middle Buttonだと、どこでどう使われているのかわ かりずらい`  デザインと実装の抽象度が異なると運用しずらい。 購入 Middle Button Buy 出品 Middle Button Sell Middle Button Title
34. 1 Component・1Widgetを目指す
35. 1Component・1Widgetを目指す „ 1 component 1widgetを実現するためにFigma側 の抽象度を上げるY „ しかし、購入、出品で使えるボタンというのを Figmaでわかるようにしたいニーズを満たせてな いY u Variant機能を使って定義 Middle Button Title
36. Variant機能とは複数の状態を1つのComponentで表すFigmaの機能 x よく使われるのはEnabled、Disabledの表現R x 紫色の点線で囲われているやつR x 2つのComponentに見えるが1つR x インスタンスで側でEnabledとDisabledを切り替えられるR x 複数の状態を1つのComponentとしてまとめてくれる機能。 バリアントなら、類似するコンポーネントを単一のコンテナにグループ化して整理すること ができます。 公式より
37. Variant機能とは複数の状態を1つのComponentで表すFigmaの機能
38. Variantを使って購入、出品を1つのコンポーネントに x Variantを使って購入、出品を１つのComponentにすi x Figma上では購入、出品という使い方があることが伝わる0 x 実装は1つのWidgetとして実装できる。 購入 出品
39. Variantを名前付きコンストラクタで実装 p Enabled、Disabledはユーザーのインタラクションに よって変化するものだが、購入・出品は違V p Widgetwo使う実装側で購入ボタンで毎回カラーを設定 するのは面倒9 p FlutterでVariantに似た機能ないかな...“ p 名前付きコンストラクターで定義。 購入 出品
40. Factoryを使うパターン v しかし、colorをTheme.ofから取得したい時
 はcontextを使うため名前付きコンストラクタで v 一例としてFactoryコンストラクタでサブクラスを渡 す" v colorはサブクラスでOverrideして定義する" v そういうときはFactoryを使ってサブクラスを定義し ている。
41. P エンジニアもFigmaを勉強しよう1 P デザイナーと積極的にコミュニケーション取ろう1 P 抽象度を意識して生産性の高いコンポーネントづくりをしよう まとめ
42. ありがとうございました @imasirooo