リレーとは何ですか?

Relay は、Android UI コンポーネントの作成と実装のプロセスを合理化するツールです。デザイナーは Relay for Figma プラグインを使用して、レイアウト、スタイル、動的コンテンツ、インタラクション動作に関する情報を含む UI 要素に注釈を付け、パッケージ化できます。これらのパッケージは、開発者が Android Studio にインポートでき、Relay for Android Studio プラグインを使用してピクセル完璧な Jetpack Compose コードを生成します。このコードは、デザイナーの仕様に従って自動的にスタイル設定およびレイアウトされるため、データをバインドするプロセスが高速化されます。Relay を使用すると、詳細な設計仕様を作成したり、設計者と開発者の間でやり取りしたりする必要がありません。さらに、製品が進化するにつれて、コードベース全体で UI パッケージを段階的に更新および拡張できます。

Relay は、Text、Image ノードなどの Figma のいくつかの機能をサポートします。ただし、Figma のすべての機能がサポートされているわけではないため、この点に注意してください。サポートされていないコンテンツについては、Web サイトからアクセスできます。https://developer.android.com/jetpack/compose/tooling/relay/limitations-and-troubleshooting

例を見てみましょう。

Figma ファイルをダウンロードする

HelloFigma.fig をダウンロードして開いてください。

Figma にリレー プラグインを追加する

Figma を開くと、このようなプロジェクトが表示されます。

UIパッケージの作成

作成したプロジェクトを選択してコンポーネントとしてマークし、追加した Relay プラグインを開きます。「UI パッケージの作成」ボタンが自動的に表示されます。

「Create UI Package」ボタンを押すと、以下のようなページが開きます。また、現時点ではパラメーターについては説明しませんが、別のシリーズの記事で説明したいと思います。

とりあえず説明だけ入力したら「ファイル」→「バージョン履歴に保存」ボタンをクリックしましょう。

RelayをAndroid Studioにインストールする

プロジェクトを作成したので、Android Studio を開いてリレー プラグインを追加しましょう。また、マテリアル デザイン システムでプロジェクトが選択された場合、ビルドの問題は発生しません。Relay プラグインをダウンロードし、IDE を再起動します。

IDE を再度開いた後、build.gradle ファイルに機能を追加する必要があります。この機能を使用すると、コンポーザブル関数を通じてリレー出力を取得できるようになります。

Figma フォルダーを AS にインポート

[ファイル]-[新規]->[UI パッケージのインポート] に移動すると、Figma で作成したデザインを Android Studio にインポートできます。

このようなウィンドウが表示されます。

該当するボタンをクリックすると、以下のような画面が表示されます。このステップで、Figma は個人のアクセス トークンを要求する場合があります。その場合は PAT を作成してください。次に、画面に表示されるプロジェクト URL の代わりに、Figma でプロジェクトを共有するときに表示されるリンクを貼り付けます。

すべてが順調に進んでいる場合は、このようなページが表示されます。該当するウィンドウの作成ボタンを押します。

その後、生成されたファイルがプロジェクト ファイルに表示されます。開かない場合は、プロジェクト ビューでアプリを右クリックし、[ディスクから再読み込み] ボタンをクリックします。画像に示すように、デザインは UI パッケージとして表示されます。ここからはコンポーズとして出力する必要があるので、プロジェクトの作成ボタンを押します。このようにして、生成されたファイル内のデザイン ファイルは、単一のコンポーズ可能な関数に変換されます。

結果

すべてがうまくいけば、コンポーズ可能な関数がファイルに追加されるはずです。場合によっては、これらの手順でプロジェクトをクリーンアップし、プロジェクトを再構築する手順が必要になる場合があります。

kotlin ファイルは次のようになります。

結論

一部の値を特別に入力したり、全体的に構造が単純に見えるかもしれませんが、このプラグインにより開発者の時間を大幅に節約できると思います。

また後で..