Reimagining designer-developer handoff: Introducing Relay
URL:https://www.youtube.com/watch?v=6PgzGXZt5Fg
一言で表すと
Figmaで作成されたUIデザインをJetpack Composeコードに変換する
概要
目的
デザイナーと開発者のコラボレーションを改善する
今ままでの課題
pixel-perfectなUIを提供するのは大変。デザイナーと開発者との間で大量のコミュニケーションが必要。
typefaces, color, ふるまい(behavior)といったデザインの意図は、コミュニケーションの中で誤解されたり失われたりする
アルファバージョン
FigmaとAndroid Studioそれぞれにpluginがある
Relay for Figma
UIパッケージを作成する
テキスト・画像・動的な要素やジェスチャーなどを指定
Relay for Android Studio
https://scrapbox.io/files/63874de50e168b0023a2a184.png
Mori Atsushi.icon Modifierの位置が気になる
Go.icon プリミティブな型 or Composeのパッケージに型しか使えなそうだけど、まあ良いか
Go.icon ThemeやStyleがfigmaと同期する感じだけでも、それがあれば神な気がする
saku.icon たしかに
FigmaのURLを指定して、RelayのUIパッケージをインポートする
saku.icon インポートするとres/ui-packages の中に色々生成されるっぽい
JSONとかを生成してる
インポートされた内容からComposableが自動生成される
画像やフォントなどはそれぞれ適切なresourceフォルダに配置される
Figma側で作成したテーマをCompose Themeに変換できる
Figma側を更新するとどうなるか?
Android Studio側で対象のUIパッケージでUpdate UI Packageすることで更新が適用される
chigichan24.icon はぇ〜便利
Figmaで表現するのが難しい動作を含むUIはどうするのか?
Figmaのデザインとそれに対応する実装のマッピングを定義できる
この時、Relay for Android Studioはコードを自動生成せず、代わりにカスタム実装を使用する
https://scrapbox.io/files/6387504fa060c200200618e2.png
saku.icon Android Developerにドキュメントあったからこれも読むと良さそう
気になるポイント
メモ
コメント