從 Figma 中匯入設計
現在,我們要將在 Figma 中建立的 UI 套件加入 Android Studio 專案。如要整合 UI 套件,請將上一節產生的分享網址複製到 Android Studio 的匯入精靈。
下載預先設定的 Android Studio 專案 ZIP 檔案 (與「Install Relay」頁面中的專案相同)。
按兩下檔案解壓縮,建立名稱為 HelloFigma 的資料夾。然後移至主資料夾。
返回 Android Studio。依序點選「File」>「Open」,前往主資料夾並選取「HelloFigma」,然後按一下「Open」。
開啟專案時,Android Studio 可能會詢問您是否信任專案。按一下「Trust Project」。
在 Android Studio 中,依序選取「File」>「New」>「Import UI Packages...」。
在「Import UI Packages」對話方塊中貼上 Figma 檔案的網址,然後按一下「Next」。
等待檔案下載完成。成功下載後,即顯示元件預覽。按一下「建立」。
請注意,新專案已新增至您的專案 — 這些檔案應提交至專案的來源控制項。在專案的 Android 檢視畫面中,您會看到:
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
用於預覽的主題。
建構並產生程式碼
按一下 來建立專案。
如要檢視建構結果,請按一下「Build」分頁標籤。
產生的程式碼現已新增至專案。由於這是產生的程式碼,因此不應投入專案的來源控制項。在專案的 Android 檢視畫面中,您可以檢視:
app/java (generated)/com/example/hellofigma/hellocard
產生的 Jetpack Compose 程式碼和字型。app/java (generated)/com/google/relay/compose
所有 UI 套件共用的執行階段程式碼。
開啟
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) {...
整合元件並執行應用程式
現在將元件整合至主要活動。
在
app/java/com/example/hellofigma/MainActivity.kt
中,請新增至頂端的「import」部分:import com.example.hellofigma.hellocard.HelloCard
在同一個檔案中,在
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 } } } } }
在同一個檔案中,在組件的預覽畫面中變更一行程式碼:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard() // Change this line } }
確認已在工具列中選取裝置。
按一下工具列中的 ▶ 來執行專案。
模擬器將啟動、建構專案,然後您的應用程式將啟動。
恭喜!您已成功將第一個 Figma 元件加入 Jetpack Compose 應用程式中!
下一步
現在您已有了端對端工作範例,接著來瞭解如何更新原始設計並重新產生程式碼。