このページは Cloud Translation API によって翻訳されました。

Relay をインストールする

Relay は次の 3 つの要素で構成され、それぞれを個別にインストールする必要があります。

Relay for Figma プラグイン
Relay for Android Studio プラグイン
Relay Gradle プラグイン

前提条件

Figma アカウントにログインしていることが必要です。
Android Studio 2022.2.1 Flamingo 以降がインストールされていること。
Java ランタイムがインストールされていることが必要です。
Jetpack Compose バージョン 1.2 以降を使用している。
Gradle プラグインバージョン 8.0 以降を使用している。

で確認できます。

Relay for Figma プラグインをインストールする

Relay for Figma プラグインをインストールすると、Figma で作業するユーザーは誰でも自分のデザインにアノテーションを付けて、Android Studio と Jetpack Compose を使用するデベロッパーと共有できます。

Relay for Figma プラグインは、Figma のコミュニティプラグインマーケットプレイスで公開されています。このプラグインをインストールする手順は次のとおりです。

Figma のウェブサイトの Relay for Figma プラグインページに移動します。
ページの右上にある [Try it out] をクリックします。
プラグインの使用を希望するかどうかを確認するダイアログが表示される場合があります。ダイアログで、自分の組織を選択します。まれに、組織によって公開プラグインを無効にします。その場合は、[External teams] を選択します。

Figma ファイルが開き、プラグイン情報ページが表示されます。[ ... をクリックし、[Save] を選択して、プラグインを簡単に再利用できるようにします。
[Run] をクリックします。

Figma キャンバスで実行されているプラグインを確認できます。

Relay for Android Studio プラグインをインストールする

Relay for Android Studio プラグインをインストールすると、Android Studio で作業するデベロッパーは、Relay for Figma プラグインを使用してデザインインテント情報のアノテーションが付けられたデザインをインポートできます。このプラグインは、Android Studio プラグインマーケットプレイスで公開されています。インストール手順は次のとおりです。

Android Studio を開きます。
メインメニューから次の操作を行います。
- macOS の場合は、[Android Studio] > [Preferences] を選択します。
- Windows と Linux の場合は、[File] > [Settings] を選択します。
[Plugins] を選択します。
[Marketplace] タブを選択し、「Relay for Android Studio」を検索して、Google が公開しているプラグインを選択します。
[Install] をクリックします。
インストールが完了したら、[Restart IDE] をクリックします。
インストールが正常に完了したことを確認するには、[Preferences] または [Settings] を開いて、[Plugins] に移動します。[Installed] セクションのリストに [Relay for Android Studio] が表示されるはずです。

Relay Gradle プラグインをインストールする

Relay Gradle プラグインをインストールすると、Relay for Figma プラグインを使用してデザインインテント情報のアノテーションが付けられた Figma のデザインがビルド時に正しくコードに変換されるようになります。

Relay Gradle プラグインは Google Maven で公開されています。これは、多数の Gradle プラグインが格納されているサーバーです。Android Studio はデフォルトで Gradle オペレーションを呼び出します。それらのオペレーションの中には、プロジェクトが参照するすべての依存関係のダウンロードとインストールがあります。

Android Studio、さらには Gradle 自体によって Relay Gradle プラグインがダウンロードおよびインストールされるようにするには、プロジェクト内で（特にモジュールのディレクトリにある build.gradle ファイル内で）プラグインを依存関係として指定する必要があります。通常、その場所は app/build.gradle です。

app/build.gradle ファイルの先頭に、使用されるプラグインをすべてリストしたセクションがあります。このリストに Relay Gradle プラグインを追加すると、Gradle がプラグインのダウンロードとインストールを処理します。次に例を示します。

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.12'
}

settings.gradle ファイルに次のセクションがあることも確認してください。

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

また、構成を含む事前構成済みのプロジェクトを使用することもできます。使用できます。

Figma アクセスを設定する

Relay が Figma デザインをダウンロードしてコードに変換するためには、Figma の個人用アクセストークンが必要です。このトークンをまだ持っていない場合は、次の手順を実施します。

Figma を開いて Figma にログインします。
ファイルブラウザに移動します。
アカウントアイコンをクリックして [Settings] を選択します。
下にスクロールして、[Personal access tokens] セクションを表示します。
トークンの説明（「Relay」など）を入力して、「Return」と入力します。トークンが生成されます。[Copy this token] をクリックします。
Android Studio のメインメニューで、[Tools] > [Relay Settings] を選択します。
macOS で Figma アクセストークンをすでに設定している場合は、次のダイアログが表示されることがあります。このダイアログは、Android Studio が Figma アクセストークンを使用します。パスワードを入力して、[常に許可] をクリックします。許可。
[Figma Access Token] 入力フィールドに Figma アクセストークンを貼り付けます（Figma アクセストークンの初回設定でない場合は、[Existing Figma Access Token] 入力フィールドが表示されることがあります）。
[OK] をクリックします。

事前構成済みプロジェクトをダウンロードして設定する

事前構成済みプロジェクトをダウンロードして設定する手順は次のとおりです。

プロジェクトの ZIP ファイルをダウンロードします。
ファイルをダブルクリックして解凍します。そうすると、HelloFigma という名前のフォルダが作成されます。このフォルダをホームフォルダに移動します。
Android Studio に戻ります。[File] > [Open] を選択してホームフォルダに移動し、[HelloFigma] を選択して [Open] をクリックします。
プロジェクトを開くときに、Android Studio から、プロジェクトを信頼するかどうかを尋ねられる場合があります。その場合は [Trust Project] をクリックします。

で確認できます。

事前構成済みプロジェクトを実行する

エミュレータまたはデバイスでアプリを実行します。空白の画面に「Hello, Android!」と表示されるはずです。

次のステップ

これで、Relay を使用して最初のデザインを作成する準備が整いました。

基本チュートリアル

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Android プロジェクトをセットアップする
Compose レイアウトをテストする
状態をホイスティングする場所