概要

この基本的なチュートリアルでは、Relay のデザイナーとデベロッパーの両方のワークフローで、完全なエンドツーエンドのファースト エクスペリエンスを提供することについて説明します。Relay プラグインの設定後すぐに、Android Studio で UI を表示する段階に移行できます。ぜひ、そこまで継続してください。

このチュートリアルでは、Figma で基本的なカード コンポーネントを作成し、生成されたコードを表示できる Android Studio にインポートします。以下を行うための方法を学習します。

Figma で行う手順:

1. Figma で UI コンポーネントを設計します。
2. Figma プラグインを使用して UI パッケージを作成します。
3. デザインの名前付きバージョンを保存します。
4. Figma の URL をデベロッパーと共有します。

Android Studio で行う手順:

1. Figma の URL を使用して、UI パッケージをプロジェクトにインポートします。
2. プロジェクトをビルドして Jetpack Compose コードを生成します。
3. 生成されたコンポーザブルへの参照をプロジェクトの UI コードに追加します。
4. プロジェクトを実行します。

次のステップ

まず、Figma でデザインを作成し、UI パッケージを作成しましょう。