處理設計變化版本

在 Figma 中，變體用於將不同變化版本的 相同的元件 例如不同的狀態或大小Relay 保留 翻譯成程式碼時的元件變化版本本節將介紹 Relay 處理設計中的變化版本

起點

顯示樹系變化的新聞資訊卡

我們會先從 Figma 檔案開始，其中包含一個新聞資訊卡元件，其中包含三個 子類：

  • hero-item 會列出最重要的新聞報導
  • article-item 適用於一般文章
  • audio-item 是用於聆聽文章，而非朗讀的文章

複製 Figma 範例

我們會使用現有的 Figma 檔案做為本教學課程的範例。請確認 您登入 Figma 帳戶。

  1. 將 HelloNews.fig 下載至電腦。

  2. 在 Figma 中，前往檔案瀏覽器。將滑鼠遊標懸停在左側 草稿。「+」圖示即會出現，依序點選「+」圖示和「匯入」。 選取剛下載的 HelloNews.fig 檔案。這可能需要 間隔可介於 10 秒到 1 分鐘之間

  3. 在 Figma 中開啟已匯入的檔案。

建立 UI 套件

Relay for Figma 外掛程式會為元件新增額外資訊， 與開發人員合作，並在他們的程式碼中使用我們的元件。

  1. 在檔案中開啟 Relay for Figma 外掛程式 (在選單列中：依序選取「Plugins」>「Relay」 Figma 專用)。點選「開始使用」。

  2. 選取元件，然後按一下「Create UI Package」。

    在外掛程式中建立 UI 套件按鈕

  3. 選取 UI 套件後，在摘要方塊中加入說明。適用對象 例如：「新聞資訊卡元件，用來顯示清單中的新聞項目」。

    外掛程式上的摘要方塊

儲存已命名版本

建立 UI 套件後，請準備元件，以便與開發團隊共用。

  1. 開啟 Figma Relay 外掛程式 (如果尚未開啟)。
  2. 按一下「與開發人員分享」。
  3. 在「與開發人員共用」畫面中，您可以在「儲存版本記錄」部分輸入新的版本名稱和說明。

  4. 按一下 [儲存]。

    標題範例：首次新增資訊卡

    說明範例：新聞文章項目第一次反覆出現

下載 Android Studio 專案

在本教學課程的 Android Studio 部分中，我們將使用預先設定完成的 Android Studio 專案。此專案包含會顯示新聞報導的應用程式 使用純文字格式

  1. 下載 HelloNews.zip 範例檔案。
  2. 按兩下檔案解壓縮，建立名稱為 HelloNews。然後移至主資料夾。
  3. 返回 Android Studio。前往「檔案」>開啟並前往住家 資料夾並選取「HelloNews」，然後按一下「開啟」。
  4. 開啟專案時，Android Studio 會詢問您是否信任 專案。按一下「Trust Project」。

匯入 Android Studio

現在將 Figma 元件匯入專案中。

  1. 返回 Figma，複製新聞資訊卡教學課程 Figma 檔案的網址。我們會 即可使用這個網址匯入元件顯示右上角的 在 Figma 中，按一下「Share」按鈕。在隨即開啟的對話方塊中，按一下 複製連結。

    複製「file」分頁中的連結選項

  2. 在 Android Studio 中切換至 HelloNews 專案。前往「檔案」>新增 >匯入 UI 套件...。

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

  3. 貼上 Figma 檔案的網址，然後按一下「Next」。

    匯入 UI 套件對話方塊
    金鑰鏈系統對話方塊
      敬上
    1. 檔案擷取完畢後 (可能需要一段時間)，請按一下 完成。
    元件預覽

  4. 按一下 「Make Project」按鈕 來建立專案請稍候片刻。

    工具列中的建構按鈕

預覽應用程式並化合物

  1. 在 Android 檢視畫面中，開啟 app/java/com/example/hellonews/ui/home/HomeScreen.kt, 您會看到這個應用程式的預覽畫面，其中顯示數篇新聞報導 純文字格式，在語音故事上方顯示平面故事。

    應用程式預覽

  2. 開啟 app/java (generated)/com/example/hellonews/newscard/NewsCard.kt。這個 是針對 Figma 元件產生的 Jetpack Compose 程式碼從 預覽，可以看到 NewsCard 元件的三個變化版本 轉譯成程式碼讓我們進一步瞭解程式碼。

    NewsCard 元件的預覽畫面

  3. View 列舉可讓我們選擇要用於這個元件的變化版本。 列舉名稱及其值衍生自我們 Figma 元件。這是用於 NewsCard 中的 view 參數 可組合函式。

    Figma 中的變體和對應的 View 列舉

  4. NewsCard 可組合函式是透過 UI 套件產生。該訊息包含 View 類型的參數，用於將新聞資訊卡的變體設為 例項化。

    package com.example.myapplication.newscard

import ...

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
* News card component intended to display news items for a list.
*
* This composable was generated from the UI Package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem
) {...}

下一步

我們目前還無法使用 NewsCard。元件不知道 顯示不同的新聞報導，在 Figma 中只使用相同硬式編碼的報導。所以 現在要加入這個元件 大家都得到相同的新聞報導 可以重複執行我們需要方法指定要在 NewsCard 的哪些部分填入 擷取 YAML 檔案

內容參數

在本節中，我們會將內容參數新增至 NewsCard 元件。