Relay をインストールする

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

  1. Relay for Figma プラグイン
  2. Relay for Android Studio プラグイン
  3. 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 のコミュニティ プラグイン マーケットプレイスで公開されています。このプラグインをインストールする手順は次のとおりです。

  1. Figma のウェブサイトの Relay for Figma プラグイン ページに移動します。
  2. ページの右上にある [Try it out] をクリックします。

    Figma プラグイン ページの [Try it out] ボタン
  3. プラグインの使用を希望するかどうかを確認するダイアログが表示される場合があります。ダイアログで、自分の組織を選択します。まれに、組織で公開プラグインが無効になっている場合があります。その場合は、[External teams] を選択します。

    ダイアログの [External teams] オプション

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

    プラグイン情報ページの [Save] オプション
  4. [Run] をクリックします。

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

    Relay for Figma

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

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

  1. Android Studio を開きます。
  2. メインメニューから次の操作を行います。
    • macOS の場合は、[Android Studio] > [Preferences] を選択します。
    • Windows と Linux の場合は、[File] > [Settings] を選択します。
  3. [Plugins] を選択します。
  4. [Marketplace] タブを選択し、「Relay for Android Studio」を検索して、Google が公開しているプラグインを選択します。

    マーケットプレイスの Relay for Android Studio
  5. [Install] をクリックします。

  6. インストールが完了したら、[Restart IDE] をクリックします。

  7. インストールが正常に完了したことを確認するには、[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.11'
}

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

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

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

Figma アクセスを設定する

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

  1. Figma を開いて Figma にログインします。
  2. ファイル ブラウザに移動します。
  3. アカウント アイコンをクリックして [Settings] を選択します。

    アカウント アイコンの下の [Settings] オプション
  4. 下にスクロールして、[Personal access tokens] セクションを表示します。

  5. トークンの説明(「Relay」など)を入力して、「Return」と入力します。トークンが生成されます。[Copy this token] をクリックします。

    設定に表示された個人用アクセス トークン
  6. Android Studio のメインメニューで、[Tools] > [Relay Settings] を選択します。

    Figma アクセス トークンを設定する [Tools] の [Relay Settings] メニュー オプション
  7. macOS で Figma アクセス トークンをすでに設定している場合は、次のダイアログが表示されることがあります。このダイアログは、Android Studio が既存の Figma アクセス トークンを使用していることを示します。パスワードを入力し、[常に許可] をクリックします。

    キーチェーン システム ダイアログ
  8. [Figma Access Token] 入力フィールドに Figma アクセス トークンを貼り付けます(Figma アクセス トークンの初回設定でない場合は、[Existing Figma Access Token] 入力フィールドが表示されることがあります)。

    [Figma Access Token] 入力フィールド
  9. [OK] をクリックします。

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

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

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

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

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

エミュレータの最初の状態

次のステップ

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

基本チュートリアル