處理設計變化版本

在 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 for 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。依序點選「File」>「Open」，前往主資料夾並選取「HelloNews」，然後按一下「Open」。
  4. 開啟專案時，Android Studio 會詢問您是否信任該專案。按一下「Trust Project」。

匯入 Android Studio

現在將 Figma 元件匯入專案。

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

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

  2. 在 Android Studio 中切換至 HelloNews 專案。在 Android Studio 選單列中，依序前往「File」>「New」>「Import UI Package...」。

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

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

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

  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 元件的三個變化版本已從 Figma 轉譯為程式碼。讓我們來進一步瞭解程式碼。

    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 的哪些部分。

內容參數

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