在 Android Studio 中將設計轉換為程式碼

從 Figma 中匯入設計

現在，我們要將在 Figma 中建立的 UI 套件加入 Android Studio 專案。如要整合 UI 套件，請將上一節產生的分享網址複製到 Android Studio 的匯入精靈。

  1. 下載預先設定的 Android Studio 專案 ZIP 檔案 (與「Install Relay」頁面中的專案相同)。

  2. 按兩下檔案解壓縮，建立名稱為 HelloFigma 的資料夾。然後移至主資料夾。

  3. 返回 Android Studio。依序點選「File」>「Open」，前往主資料夾並選取「HelloFigma」，然後按一下「Open」。

  4. 開啟專案時，Android Studio 可能會詢問您是否信任專案。按一下「Trust Project」。

  5. 在 Android Studio 中，依序選取「File」>「New」>「Import UI Packages...」。

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

  6. 在「Import UI Packages」對話方塊中貼上 Figma 檔案的網址，然後按一下「Next」。

    匯入 UI 套件對話方塊
    金鑰鏈系統對話方塊

  7. 等待檔案下載完成。成功下載後，即顯示元件預覽。按一下「建立」。

    元件預覽

    請注意，新專案已新增至您的專案 — 這些檔案應提交至專案的來源控制項。在專案的 Android 檢視畫面中，您會看到：

    Android 檢視畫面中的 UI-packages 資料夾

    • app/ui-packages/hello_card/*
      在程式碼中描述元件所需的所有來源素材資源。這些檔案用於在建構步驟中產生程式碼。

    • app/ui-packages/hello_card/hello_card.json
      包含元件定義 (包括版面配置和其他屬性) 的 JSON 檔案。

    • app/ui-packages/hello_card/fonts/*
      在 Jetpack Compose 中支援元件所需的任何字型檔案。

    • app/ui-packages/hello_card/*.png 或 *.jpeg
      支援元件所需的任何圖片素材資源。

    • app/ui-packages/hello_card/VERSION.txt
      Relay for Android Studio 外掛程式的版本，用於匯入 UI 套件。

    • app/ui-packages/hello_card/config.json
      用於預覽的主題。

建構並產生程式碼

  1. 按一下 「Make Project」按鈕 來建立專案。

    工具列中的「Make Project」按鈕

  2. 如要檢視建構結果，請按一下「Build」分頁標籤。

    Android Studio 底部的「Build」分頁

  3. 產生的程式碼現已新增至專案。由於這是產生的程式碼，因此不應投入專案的來源控制項。在專案的 Android 檢視畫面中，您可以檢視：

    在 Android 檢視畫面中產生的程式碼

    • app/java (generated)/com/example/hellofigma/hellocard
      產生的 Jetpack Compose 程式碼和字型。

    • app/java (generated)/com/google/relay/compose
      所有 UI 套件共用的執行階段程式碼。

  4. 開啟 app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt。這是針對 Figma 元件產生的 Jetpack Compose 函式。此外，您也可以預覽元件。

    版面配置、素材資源和樣式資訊現在會從 Figma 傳輸至程式碼。

    元件預覽

    在程式碼中，在 Figma 中新增的摘要現在會轉譯為註解 (位於產生的可組合項上方)。

     /**
 * Hello Card component used to display the image and the title content
 *
 * This composable was generated from the UI package ‘ hello_card’
 * Generated code; do not edit directly
 */
@Composable
fun HelloCard(modifier: Modifier = Modifier) {...

整合元件並執行應用程式

現在將元件整合至主要活動。

  1. 在 app/java/com/example/hellofigma/MainActivity.kt 中，請新增至頂端的「import」部分：

    import com.example.hellofigma.hellocard.HelloCard

  2. 在同一個檔案中，在 MainActivity 類別中變更下列程式碼：

    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloFigmaTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    // Greeting("Android") // Delete this line
                    HelloCard()  // Add this line
                }
            }
        }
    }
}

  3. 在同一個檔案中，在組件的預覽畫面中變更一行程式碼：

    @Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    HelloFigmaTheme {
        HelloCard() // Change this line
    }
}

  4. 確認已在工具列中選取裝置。

  5. 按一下工具列中的 ▶ 來執行專案。

    工具列中的「Run」按鈕

    模擬器將啟動、建構專案，然後您的應用程式將啟動。

    模擬器中的應用程式預覽

    恭喜！您已成功將第一個 Figma 元件加入 Jetpack Compose 應用程式中！

下一步

發布及推送設計更新

現在您已有了端對端工作範例，接著來瞭解如何更新原始設計並重新產生程式碼。