在 Figma 中建立 UI 套件

下載預先設定的 Figma 檔案

首先，在 Figma 中建立元件。在本教學課程中，我們會使用現有的 Figma 檔案做為範例。此檔案包含內含圖片和標題的自動版面配置頁框。確認您已登入 Figma 帳戶。

1. 將這個 Figma 檔案下載至電腦：HelloFigma.fig。

2. 在 Figma 的檔案瀏覽器中，將滑鼠遊標懸停在「Drafts」(草稿) 上。「+」圖示隨即顯示。按一下「+」，然後點選「Import...」，然後選取您剛才下載的「HelloFigma.fig」檔案。

   

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

建立元件

如要將匯入的設計與 Relay for Figma 外掛程式搭配使用，我們必須先將其轉換為元件。選取「Hello Card」框架，然後按一下工具列中的「Create Component」。

建立 UI 套件

Relay for Figma 外掛程式會為元件新增額外資訊，方便您與可在程式碼中使用該元件的開發人員合作。

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

   

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

   

3. 選取 UI 套件後，將說明新增至「Summary」。例如：「Hello Card 元件用於顯示圖片和標題內容」

   

4. 按一下對話方塊右下角的「與開發人員共用」，前往下一個畫面。

提供給開發人員流程

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

為元件檔案建立新的已命名版本。使用元件的已命名版本可避免不必要的變更影響正式版元件。

1. 輸入這個元件的第一個版本的名稱和說明，然後按一下「儲存」。

   

2. 接下來，請建立可分享的元件連結，在 Mac 上輸入 CMD-L，或在 Windows 中輸入 CTRL-L 鍵，將連結複製到剪貼簿。

   

下一步

您現在可以將 UI 元件交給 Android Studio。

開啟 Android Studio 來完成本教學課程的下一部分。

在 Android Studio 中將設計轉換為程式碼