在 Figma 中,「變化版本」可用來將相同元件的不同變化版本分組,例如不同的狀態或大小。將元件轉譯為程式碼時,Relay 會保留元件的變化版本。本節將說明 Relay 如何處理設計中的變化版本。
起點
首先,我們先從包含新聞資訊卡元件的 Figma 檔案開始,檔案有三個變化版本:
- hero-item 是針對最重要的新聞報導
- article-item 適用於一般文章
- audio-item 適用於你聆聽的文章,而非閱讀的文章
複製 Figma 範例
我們會使用現有的 Figma 檔案做為本教學課程的範例。確認你已登入 Figma 帳戶。
- 將 HelloNews.fig 下載至電腦。
在 Figma 中,前往檔案瀏覽器。將滑鼠遊標懸停在左側的草稿上。畫面隨即會顯示「+」圖示,請依序點選「+」圖示和「匯入」。 選取剛才下載的 HelloNews.fig 檔案。這需要時從 10 秒到 1 分鐘。
在 Figma 中開啟已匯入的檔案。
建立 UI 套件
Relay for Figma 外掛程式會為元件新增額外資訊,以便我們與會在程式碼中使用元件的開發人員合作。
- 在檔案中開啟 Relay for Figma 外掛程式 (在選單列中:「Plugins」>「Relay for Figma」)。點選「開始使用」。
選取元件,然後按一下「Create UI Package」。
選取 UI 套件後,請在摘要方塊中新增說明。例如:「打算顯示清單新聞項目的新聞資訊卡元件」。
儲存已命名版本
現在,您已建立 UI 套件,請準備元件,以便與開發團隊共用。
- 開啟 Figma Relay 外掛程式 (如果尚未開啟)。
- 按一下「與開發人員分享」。
- 在「與開發人員共用」畫面中,您可以在「儲存版本記錄」部分輸入新的版本名稱和說明。
按一下「儲存」。
標題範例:初始新資訊卡
說明範例:首次疊代新聞文章項目
下載 Android Studio 專案
在本教學課程的 Android Studio 部分中,我們將使用預先設定的 Android Studio 專案。這項專案包含以純文字格式顯示新聞文章的應用程式。
- 下載 HelloNews.zip 範例檔案。
- 按兩下要解壓縮的檔案,隨即會建立名為 HelloNews 的資料夾。然後移至主資料夾。
- 返回 Android Studio。依序點選「File」>「Open」,前往主資料夾並選取「HelloNews」,然後按一下「Open」。
- 開啟專案時,Android Studio 會詢問您是否信任該專案。按一下「Trust Project」。
匯入 Android Studio
現在將 Figma 元件匯入專案。
返回 Figma,複製新聞資訊卡教學課程 Figma 檔案的網址。我們會使用這個網址匯入元件按一下 Figma 右上角的「Share」按鈕。在隨即開啟的對話方塊中,按一下「Copy Link」(複製連結)。
在 Android Studio 中切換至 HelloNews 專案。在 Android Studio 選單列中,依序前往「File」>「New」>「Import UI Package...」。
貼上 Figma 檔案的網址,然後按一下「Next」。
- 檔案擷取完畢 (可能需要一些時間) 後,按一下「Finish」。
按一下 來建立專案。可能需要幾分鐘才能完成。
預覽應用程式和元件
在 Android 檢視畫面中開啟
app/java/com/example/hellonews/ui/home/HomeScreen.kt
,您會看到應用程式的預覽畫面,其中以純文字格式顯示多篇新聞報導,以及語音報導上方的文字報導上方。開啟
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
。這是我們針對 Figma 元件產生的 Jetpack Compose 程式碼。透過預覽,您可以看到 NewsCard 元件的三個變化版本已從 Figma 轉譯為程式碼。讓我們來進一步瞭解程式碼。View
列舉可讓我們選擇此元件要使用的變化版本。列舉名稱及其值衍生自 Figma 元件的變化版本。在 NewsCard 可組合項中的view
參數使用這個參數。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 元件。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 內容參數
- 捲動
- 在 View 中使用 Compose