安裝 Relay

Relay 由三個部分組成,每一部分都須個別安裝:

  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 外掛程式頁面上的「立即試用」按鈕
  3. 您可能會看見對話方塊,詢問您是否要使用外掛程式。在對話方塊中選取您的機構。在極少數情況下,貴機構可能會停用公開外掛程式。若是如此,請選取「External Team」(外部團隊) 選項。

    對話方塊中的外部團隊選項

    隨即開啟 Figma 檔案,並顯示外掛程式資訊頁面。按一下「...」,然後選取「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. 按一下 [安裝]

  6. 安裝完成後,按一下「Restart IDE」

  7. 如要確認安裝是否成功,請開啟「Preferences」或「Settings」,然後前往「Plugins」。您應會在「Installed」部分看到「Relay for Android Studio」

安裝 Relay Gradle 外掛程式

Relay Gradle 外掛程式可確保在建構期間,在 Figma 中的設計使用 Relay for 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」

    帳戶圖示下方的設定
  4. 向下捲動至「Personal access token」區段。

  5. 輸入權杖說明,例如「Relay」,然後輸入「Return」。系統會產生權杖。按一下「Copy this token」

    設定中的個人存取權杖
  6. 在 Android Studio 的主選單中,依序選取「Tools」>「Relay Settings」

    「Tools」底下的 Relay 設定選單選項,用於設定 Figma 存取權杖
  7. 如果您之前已在 macOS 上設定 Figma 存取權杖,可能會看到下列對話方塊。此對話方塊可讓您知道 Android Studio 正在使用現有的 Figma 存取權杖。輸入密碼,然後按一下「Always Allow」

    金鑰鏈系統對話方塊
  8. 將 Figma 存取權杖貼到「Figma Access Token」輸入。(如果這不是您第一次設定 Figma 存取權杖,系統可能會顯示「Existing Figma Access Token」輸入)。

    Figma 存取權杖輸入
  9. 按一下「OK」

下載並設定預先設定的專案

如要下載並設定預先設定的專案:

  1. 下載專案 ZIP 檔案
  2. 按兩下檔案解壓縮,建立名稱為 HelloFigma 的資料夾。然後移至主資料夾。
  3. 返回 Android Studio。依序點選「File」>「Open」,前往主資料夾並選取「HelloFigma」,然後按一下「Open」
  4. 開啟專案時,Android Studio 可能會詢問您是否信任專案。按一下「Trust Project」

執行預先設定的專案

在模擬器或裝置上執行應用程式。您應該會在空白畫面中看到「Hello, Android!」。

模擬器的啟動狀態

下一步

現在,我們準備使用 Relay 建立第一個設計。

基本教學課程