Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーを巻き込んだ Flutterのコンポーネント設計
Search
imajo
May 20, 2024
0
120
デザイナーを巻き込んだ Flutterのコンポーネント設計
imajo
May 20, 2024
Tweet
Share
More Decks by imajo
See All by imajo
Widgetbookを使った社内デザインパッケージの運用
imajo
0
72
グループにBOTを入れる
imajo
0
320
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
86
4.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLとの向き合い方2022年版
quramy
49
14k
The Language of Interfaces
destraynor
158
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Transcript
デザイナーを巻き込んだ Flutterのコンポーネント設計 SODA Flutter Talk #1
Figmaを使って発表してみます
今城 洸幸(Imajo Takeyuki) T 2019年 面白法人Kayacに新卒入6 T 2023年 株式会社SODAに転U T
趣味: サッカー、アニメ、料S T 風邪のなおりかけでたまに咳するの をお許しください @imasirooo @imajoriri
01 デザインをコードに落とし込む際の課題 02 デザイナーとコミュニケーション取るために行ったこと 03 FigmaとFlutterの命名を揃えるために行ったこと 04 FigmaとFlutterの抽象度を揃えるために行ったこと
SODAの開発とデザインの環境 1$ 実装はFlutte2 "$ デザインはFigma
デザインをコードに落とし込む際の課題 % 2つの課題3 % FigmaのComponentとFlutterのWidgetの.." % 命名の違 % 抽象度の違い
FigmaのComponentとは? r UI上再利用な要素をComponentと呼ぶY r 実装で言うところの「Class」的な存在Y r Componentからインスタンスを生成して使うY r Componentが変更されたらインスタンスも変更される。
FigmaのComponentとは?
FigmaのComponentとFlutterのWidgetの命名が違う 5 FigmaのComponent名とFlutterのWidgetが異なるE 5 Figmaを見ただけでは実装を見つけられない。 General Button Primary Button
FigmaのComponentとFlutterのWidgetの抽象度の違い x エンジニアは抽象化したいW x なるべく重複した実装は避けたいW x デザインは使いやすさのためになるべく具体化したいW x デザインと実装の抽象度が異なると変更の範囲も異なっ てしまうので、運用しずらい。
購入 Middle Button Buy 出品 Middle Button Sell Middle Button Title
命名や粒度を同じにする方が運用しやすそう
当初はFigmaに合わせて実装していたが、 実装的にはこうして欲しい!が出てくる
デザイナーとのコミュニケーションが足りていない!
02 デザイナーとコミュニケーション取るために行ったこと
デザイナーとコミュニケーション取るために行ったこと T エンジニアがFigmaを勉強す3 T エンジニアとデザイナーが定期的に話す時間を設ける
Figmaを勉強する デザイナーがコードを見るよりも、エンジニアがデザインを 見る方が多いq Figmaを勉強することで両者の落とし所を提案できるq 最近見つけた本が良かったq 個人開発で積極的にFigmaを使うq
社内で勉強会をしていきたい 毎週Flutterメンバーでモブプロや読書会をしている。 Figma for デザインシステム
コミュニケーションを増やす y 普段の開発フローではコンポーネントの粒度まで話す時間が取れないR y エンジニア、デザイナー独自のルールが出来上がってしまうR y 毎週1時間デザイナーとFluttterエンジニアが集まる時間をとるR y 命名や抽象度について議論していく。
03 FigmaとFlutterの命名を揃えるために行ったこと
FigmaとFlutterの命名を揃えるために行ったこと 6 TextStyl5 6 Colo' 6 Component
TextStyle 8 元々は一つ一つのコンポーネントに定義されてい たP 8 右写真のようなstatic constが無限にできてしまう 仕組みに。 ↓無限にできててしまう
TextStyle D FlutterはマテリアルデザインのTextTheme を使えるR D デザイナーにその旨を伝えて、Figmaでも TextThemeと一致する名前に。
TextStyle
TextStyle Japanese/Body/Large
TextStyle G bodyLargeより大きいBodyが欲しい..B G 一部はextensionすることでカスタマイズして いる
Color Y カラーはColorSchemeに揃えるのは難しい& Y すでに多くのカラーが定義されていた& Y AppColorクラスを独自で定義している& Y いずれくるかもしれないダークモードへの対応が大変そう...
ThemeExtensionを使ってみたい s 将来やりたいこととして、ThemeExtensionを使ってみたいR s ThemeExtensionとは、独自のTextThemeやColorThemeを作れる機能R s ダークモード対応できるし、切り替える時にふわっと切り替えられる。
ThemeExtensionの実装方法 ThemeExtensionのサブクラスを作成するp copyWithとlerpのOverrideが必 lerpはテーマが変更された時の線形補間に よって滑らかに変化するためのもC ダークモード変更時にふわっと変更させる
ことも可能
ThemeExtensionの実装方法 https://api.flutter.dev/flutter/material/ThemeExtension-class.html
コンポーネントの命名も揃える W FigmaのComponent名を見て揃え9 W スネークケースに揃える...とかはしな W Figmaを見てどこに実装されているか わかれば良い。 General Button
Widgetbook d 実装してあるWidgetを見つけやすくするため にWidgetbookを導入しているU d デザイナーがリリースされていないコンポー ネントを確認できるU d S3にホスティングしていて、社内なら誰でも 見れる。
Widgetbook % 詳しくは以前記事にしましたÉ % こちらから
04 FigmaとFlutterの抽象度を揃えるために行ったこと
Figmaと実装で抽象度が違う エンジニアは抽象化したい` なるべく重複した実装は避けたい` デザインは使いやすさのためになるべく具体化したい` Middle Buttonだと、どこでどう使われているのかわ
かりずらい` デザインと実装の抽象度が異なると運用しずらい。 購入 Middle Button Buy 出品 Middle Button Sell Middle Button Title
1 Component・1Widgetを目指す
1Component・1Widgetを目指す 1 component 1widgetを実現するためにFigma側 の抽象度を上げるY しかし、購入、出品で使えるボタンというのを Figmaでわかるようにしたいニーズを満たせてな いY
u Variant機能を使って定義 Middle Button Title
Variant機能とは複数の状態を1つのComponentで表すFigmaの機能 x よく使われるのはEnabled、Disabledの表現R x 紫色の点線で囲われているやつR x 2つのComponentに見えるが1つR x インスタンスで側でEnabledとDisabledを切り替えられるR x
複数の状態を1つのComponentとしてまとめてくれる機能。 バリアントなら、類似するコンポーネントを単一のコンテナにグループ化して整理すること ができます。 公式より
Variant機能とは複数の状態を1つのComponentで表すFigmaの機能
Variantを使って購入、出品を1つのコンポーネントに x Variantを使って購入、出品を1つのComponentにすi x Figma上では購入、出品という使い方があることが伝わる0 x 実装は1つのWidgetとして実装できる。 購入 出品
Variantを名前付きコンストラクタで実装 p Enabled、Disabledはユーザーのインタラクションに よって変化するものだが、購入・出品は違V p Widgetwo使う実装側で購入ボタンで毎回カラーを設定 するのは面倒9 p FlutterでVariantに似た機能ないかな... p
名前付きコンストラクターで定義。 購入 出品
Factoryを使うパターン v しかし、colorをTheme.ofから取得したい時 はcontextを使うため名前付きコンストラクタで v 一例としてFactoryコンストラクタでサブクラスを渡 す" v colorはサブクラスでOverrideして定義する" v
そういうときはFactoryを使ってサブクラスを定義し ている。
P エンジニアもFigmaを勉強しよう1 P デザイナーと積極的にコミュニケーション取ろう1 P 抽象度を意識して生産性の高いコンポーネントづくりをしよう まとめ
ありがとうございました @imasirooo