安裝 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」>「偏好設定
    • 如果你使用的是 Windows 與 Linux,請依序選取「File」>設定
  3. 選取「Plugins」
  4. 選取「Marketplace」分頁標籤,搜尋「Relay for Android Studio」,然後 選取 Google 發布的外掛程式:

    市集中的 Relay for Android Studio
  5. 按一下 [安裝]

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

  7. 如要確認安裝是否成功,請開啟「Preferences」「設定」和「外掛程式」。您應會看到 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.12'
}

此外,請確認您的 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」>「Tools」>Relay 設定。

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

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

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

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

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

  1. 下載專案 ZIP 檔案
  2. 按兩下檔案解壓縮,建立名稱為 HelloFigma。然後移至主資料夾。
  3. 返回 Android Studio。前往「檔案」>開啟並前往住家 資料夾,選取「HelloFigma」,然後按一下「Open」
  4. 開啟專案時,Android Studio 可能會詢問您是否信任 專案。按一下「Trust Project」
,瞭解如何調查及移除這項存取權。

執行預先設定的專案

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

模擬器的啟動狀態

下一步

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

基本教學課程