總覽

含有圖片和標題的資訊卡元件

這個基本教學課程向您介紹 Relay 的設計人員和開發人員工作流程，提供了完整的端對端優先體驗。設定 Relay 外掛程式後，即可快速前往 Android Studio 中看到 UI 顯示的階段。建議您繼續堅持下去！

本教學課程會在 Figma 中建立基本資訊卡元件，並匯入 Android Studio，方便您查看產生的程式碼。您將瞭解如何執行下列操作：

在 Figma 中：

  1. 在 Fitbit 中設計 UI 元件。
  2. 使用 Figma 外掛程式建立 UI 套件。
  3. 儲存已命名的設計版本。
  4. 將 Figma 網址分享給開發人員。

在 Android Studio 中：

  1. 使用 Figma 網址，將 UI 套件匯入專案。
  2. 建立專案以產生 Jetpack Compose 程式碼。
  3. 在專案的 UI 程式碼中，新增產生的可組合項參照。
  4. 執行專案。

下一步

首先，請完成設計並在 Figma 中建立 UI 套件。