Android Studio 工作流程

匯入 UI 套件

在 Figma 中建立使用者介面套件後，即可將其匯入 Android Studio 專案。專案建構完成時，Relay 會產生 Jetpack Compose 程式碼。

如何將 UI 套件匯入 Android Studio 專案：

  1. 依序選取「File」>「New」>「Import UI Package...」。

    「File」選單下方的「Import UI Packages...」選項

  2. 輸入包含 UI 套件的 Figma 檔案網址。

    匯入 UI 套件對話方塊

  3. 點選「Next」。

  4. 選取要匯入的 UI 套件。顯示的元件取決於您貼上的元件、網頁或檔案連結。如果已匯入 UI 套件，系統會將其標示為「UPDATED」。否則會顯示為「NEW」。

    元件預覽

  5. 按一下「Finish」，將所選套件及其依附元件匯入 ui-packages 資料夾。

UI 套件匯入畫面

匯入畫麵包含以下資訊：

UI 套件匯入畫面
  • 元件及其變化版本的預覽圖片。
  • 標題和說明。
  • 變化版本及其屬性的清單。
  • 內容參數及其類型的清單。
  • 互動處理常式及其類型的清單。

UI 套件工具視窗

UI 套件側欄

Android Studio 外掛程式會新增名為「UI Package」的工具視窗。每次在「UI Package」資料夾中選取檔案時，即可開啟檔案 (例如app/src/main/ui-packages/mycomponent/)。工具視窗會顯示 UI 套件及其內容的摘要。

建構 Android 專案

建構包含 UI 套件的 Android Studio 專案時，Relay Gradle 外掛程式會從 UI 套件產生並編譯程式碼。字型資產也會下載並複製到專案中。

如果只想建構匯入的 UI 套件，而非整個專案，您可以執行以下特定 Gradle 工作：

  • generateDebugRelayCode 或 generateReleaseRelayCode 會產生從 UI 套件衍生的程式碼偵錯或發布版本。
  • generateRelayRuntimeCode 會建立產生的程式碼使用的執行階段程式庫。

在建構程序中：

  1. 程式碼透過 UI 套件產生，並儲存在不同的資料夾中。
  2. 系統會將圖片和字型複製到一般產生的資源資料夾。

如需資料夾的位置，請參閱瞭解 UI 套件與產生的程式碼。

更新 UI 套件

新的設計版本準備就緒時，設計人員應建立一個新的 Figma 檔案已命名版本。

在 Android Studio 中，確認「Project」工具視窗位於 Android 檢視畫面中。

  1. 在模組的 ui-packages 資料夾下，在要更新的 UI 套件資料夾上按一下滑鼠右鍵，然後選取「Update UI Package(s)」。在以下範例中，我們選取了 5 個要更新的 UI 套件。

    更新內容選單中的 5 個 UI 套件選項

  2. 您也可以在 ui-packages 資料夾上按一下滑鼠右鍵，以更新所有 UI 套件。

    在內容選單中更新所有 UI 套件選項