🎽

FigmaのComponentをJetpack Composeのコードへ変換するRelayというツールについて

2022/11/08に公開

Android

Figma

tech

Relayとは

Relayとは、デザイナーとエンジニア間でのAndroid UIコンポーネントの円滑な共有を可能にするツールです。
2022年のAndroid Dev Summitにて発表され、GoogleとFigmaが共同で開発を進めています。

Relayを使用することで、Figmaで管理するComponentをJetpack Composeのコードへ変換して使用することができます。

具体的なワークフロー

Relayの使い方について、具体的なワークフローと共に説明していきます。

1. UI Packageの作成

まずは、RelayのFigma pluginを用いて、UI Packageを作成します。

UI Packageとは、Figmaのレイアウト情報を表現するjsonや、画像などのリソースファイル群をパッケージ化したものです。
このUI Packageという抽象化された中間表現をもとにJetpack Composeのコードが生成されることになります。

UI Packageの作成手順は以下の通りです。

パッケージ化したいFigmaのComponentを選択
Create UI Packageをクリック

https://developer.android.com/jetpack/compose/tooling/relay/create-ui-packages

2. パラメータの追加

作成したUI Packageの中に動的に変更可能な要素やタップ可能な領域がある場合、パラメータとして設定していきます。

https://developer.android.com/jetpack/compose/tooling/relay

設定手順は以下の通りです。

パラメータを追加したいFigmaのComponentを選択
+をクリックして追加したいパラメータを選択

https://developer.android.com/jetpack/compose/tooling/relay/add-parameters

3. UI Packageの共有

完成したUI Packageをエンジニアへ共有します。
共有手順は以下の通りです。

Figma右上のShareをクリック
表示されたダイアログ左下にあるCopy linkをクリック
Copyしたリンクをエンジニアへ共有

https://developer.android.com/jetpack/compose/tooling/relay/convert-designs-android-studio

4. Android StudioでUI Packageをインポート

エンジニアはデザイナーから共有されたUI PackageをAndroid Studioでインポートします。
インポートの手順は以下の通りです。

File > New > Import UI Packages… を選択

https://developer.android.com/jetpack/compose/tooling/relay/android-studio-workflow
共有されたFigmaのURLを入力

https://developer.android.com/jetpack/compose/tooling/relay/android-studio-workflow
Nextをクリック
インポートするUI Packageを選択

https://developer.android.com/jetpack/compose/tooling/relay/android-studio-workflow
Finishをクリック

ui-packages フォルダ以下にインポートされたUI Packageが展開されます。

https://developer.android.com/jetpack/compose/tooling/relay/convert-designs-android-studio

5. Android Projectをビルド

UI PackageをインポートしたAndroid Projectをビルドします。

https://developer.android.com/jetpack/compose/tooling/relay/design-updates

すると、RelayのGradle pluginがUI PackageをもとにJetpack Composeのコードを生成します。
追加したパラメータはComposable methodの引数として渡せるようになっています。

UI Packageの更新

追加したUI Packageはもちろん更新することが可能です。
更新の手順は以下の通りです。

デザイナーはFigma Componentを更新して新しいバージョンとして保存
エンジニアへUI Packageの更新を依頼
エンジニアは ui-packages フォルダを右クリックしてUpdate UI Packagesをクリック

https://developer.android.com/jetpack/compose/tooling/relay/android-studio-workflow

新しいバージョンのUI Packageがインポートされ、Android Projectをビルドするとコードへの更新の反映が確認できます。

Styleのマッピング

Relayでは、FigmaのStyleをComposeのThemeへマッピングすることが可能です。

https://www.youtube.com/watch?v=6PgzGXZt5Fg

例えば、以下のFigmaでは、GoogleのMaterial 3 Design KitのStyleを使用してデザインが組まれており、Primary - Title large というテキストに対して、Typographyに M3/title/large 、Colorに M3/sys/light/primary のStyleを指定しています。

https://developer.android.com/jetpack/compose/tooling/relay/mapping-styles-to-compose-theme

このUI PackageをAndroid Studioからインポートする際に、 Material 3 Design Kit configuration をチェックしてあげます。

https://developer.android.com/jetpack/compose/tooling/relay/mapping-styles-to-compose-theme

すると、Material 3のFigmaのStyleとComposeのTheme間のマッピングを指定するConfigurationファイルが用意され、Composeのコードを生成する際にこのマッピングが適用されます。

Componentのマッピング

RelayではFigmaのComponentをComposeのComposableへマッピングすることが可能です。

例えば、Figmaで Play Bar Componentのインスタンスを内包する Card のComponentを作成するとします。

どちらもUI Package化し、Android Studioにてインポートすると ui-packages 以下に card と play_bar という2つのディレクトリが作成されます。
Projectをビルドすると、 Card と PlayBar という２つのComposable関数が生成されます。

しかし、 Play Bar はアニメーションをさせたいため、生成された PlayBar の代わりに MyExistingPlayBar という既存のComposable関数を使用したいと考えます。

https://developer.android.com/jetpack/compose/tooling/relay/mapping-components-to-existing-code

その場合、 play_bar.map というMappingファイルを用意して、 play_bar のUI Packageを MyExistingPlayBar のComposable関数へマッピングさせます。

これで、プロジェクトをビルドすると、 Card は PlayBar の代わりに MyExistingPlaybar を呼び出すようになります。

懸念事項

導入に際したいくつかの懸念事項について挙げてみます。

命名規則

UI Package化したComponentにつけられた名前や、追加したパラメータの名前はそのままコードにも反映されるため、命名規則についてはデザイナーとエンジニア間で固めておく必要がありそうです。

既存プロジェクトへ導入する場合には、既存の命名規則を踏襲したルールでUI Package周りの命名は進められると良いでしょう。

FigmaのComponentの品質担保

FigmaでのAuto Layoutが適切に設定されていなかった場合、コードを生成して配置してみた際に意図したレイアウトになっていない可能性があります。

また、Styleの指定漏れ等があると、例えば色の場合は色コードベタがきのコードが生成されてしまい、Dark Modeなどへ対応できなくなってしまいます。

この辺りの抜け漏れのないデザインデータを作成する必要があります。

UI Package化の粒度

どこまでをUI Package化していくのかの粒度についてある程度合意を取ってから導入を進めていく必要がありそうです。

使いまわす部品をFigmaのComponentとして定義するのが一般的でしたが、1画面でのみ使う部品であってもComponent化してUI Packageを作成し、エンジニアへ共有したいケースが増えてくることでしょう。

デザイナーとエンジニア

以上の懸念事項を考慮すると、どこまでをデザイナーがカバーして、どこからをエンジニアへ任せるのかが重要になってきそうです。

UI Packageの作成までデザイナーにお願いしてエンジニアのレビューを挟むのか、UI Packageの作成までエンジニアの責務にしてしまうのかなど、チームによって様々な形が考えられます。

最後に

Relayの登場によって、エンジニアがFigmaのデザインを見てColorやTypographyを指定したり、ピクセルパーフェクトになるようにpaddingやmarginを調整するといった作業が、ほぼ不要になるかもしれません。

まだalpha版ではありますが、Jetpack Composeの導入やMaterial 3への対応など、今のうちから準備しておけると良いことはいくつかありそうですね。

一方で、今回のRelayの発表を通して、デザイナー, エンジニア双方の両領域への理解がより求められる世界になってきたなと感じており、デザイン→開発のワークフローについて考え直す良い機会だなと思いました。

最後に、本記事がRelayの概要を掴む上での参考になりましたら幸いです。