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
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
BBQ
matthewcrist
89
9.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Bash Introduction
62gerente
614
210k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building an army of robots
kneath
306
45k
RailsConf 2023
tenderlove
30
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Typedesign – Prime Four
hannesfritz
42
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Rails Girls Zürich Keynote
gr2m
94
14k
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