在 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」)。點選「開始使用」。

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

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

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

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

    外掛程式中的摘要方塊

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

提供給開發人員流程

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

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

外掛程式中的摘要方塊

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

    外掛程式中的摘要方塊

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

    外掛程式中的摘要方塊

下一步

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

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

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