概要

Relay のバナー画像

Relay を使用すると、デザイナーとデベロッパーの間で Android UI コンポーネントを簡単にハンドオフできます。

デザイナーは、Relay for Figma プラグインを使用して、レイアウト、スタイル設定、動的コンテンツ、インタラクションの動作に関する情報をデベロッパーが利用できるように、それらを含む UI コンポーネントにアノテーションを付けてパッケージ化します。

デベロッパーは、Relay for Android Studio プラグインを使用して、UI パッケージをインポートし、ピクセル パーフェクトな Jetpack Compose コードを生成します。このプロセスにより、レイアウトとスタイル設定の実装が即座に提供され、データをバインドするプロセスが高速化されます。UI パッケージは、スタイルとテーマを含むことができ、コード内に存在するデザイン システム コンポーネントを参照できます。

Relay を使用すると、煩雑なデザイン仕様が不要になり、細部に関するやり取りを何度も繰り返す手間が省かれます。プロダクトの開発が進むにつれて、コードベース全体で UI パッケージを段階的に更新、拡張、導入できます。

最初に、Relay for Figma プラグインを使用して UI パッケージを作成します。UI パッケージを作成したら、Relay for Android Studio プラグインを使用して UI パッケージを Jetpack Compose コードに変換します。

Relay for Figma と Relay for Android Studio

Relay for Figma プラグインを使用すると、デザイナーとデベロッパーは協力してコンテンツ パラメータとインタラクション ハンドラを追加し、デザインの動的要素をキャプチャして、コンポーズ可能な関数の対応するパラメータを生成できます。

Figma プラグインで追加したパラメータは、コンポーズ可能な関数のパラメータになる

Relay チームは、マテリアル デザインとその他のカスタム デザイン システムのサポートを開発しています。現時点では、デザイン システムと Compose 実装のマッピングに役立つ 2 つの試験運用版機能がサポートされています。それは、Figma スタイル マッピングFigma コンポーネント マッピングです。

現在 Relay はアルファ版プロダクトですので、ぜひ Relay をご利用になって、ニーズに合うかどうかをお聞かせください。いただいたフィードバックを基にして、パフォーマンス、機能、全体的なワークフローの改善を含むリリースを定期的に提供していく予定です。

次のステップ

Relay の利用を開始するには、チュートリアルに沿ってワークフロー全体を試すことが最善の方法です。普段 Relay を使用する局面はワークフローの一部に限られるかもしれませんが、デザイナーとデベロッパーがともに Relay を使用して Android アプリを作成する方法を理解することは有益です。

今すぐ Relay をインストールしてみませんか?