この基本的なチュートリアルでは、Relay のデザイナーとデベロッパーの両方のワークフローで、完全なエンドツーエンドのファースト エクスペリエンスを提供することについて説明します。Relay プラグインの設定後すぐに、Android Studio で UI を表示する段階に移行できます。ぜひ、そこまで継続してください。
このチュートリアルでは、Figma で基本的なカード コンポーネントを作成し、生成されたコードを表示できる Android Studio にインポートします。以下を行うための方法を学習します。
Figma で行う手順:
- Figma で UI コンポーネントを設計します。
- Figma プラグインを使用して UI パッケージを作成します。
- デザインの名前付きバージョンを保存します。
- Figma の URL をデベロッパーと共有します。
Android Studio で行う手順:
- Figma の URL を使用して、UI パッケージをプロジェクトにインポートします。
- プロジェクトをビルドして Jetpack Compose コードを生成します。
- 生成されたコンポーザブルへの参照をプロジェクトの UI コードに追加します。
- プロジェクトを実行します。
次のステップ
まず、Figma でデザインを作成し、UI パッケージを作成しましょう。