在 Figma 中建立 UI 套件
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
首先,在 Figma 中建立元件。在本教學課程中,我們會使用現有的 Figma 檔案做為範例。此檔案包含內含圖片和標題的自動版面配置頁框。確認您已登入 Figma 帳戶。
- 將這個 Figma 檔案下載至電腦:HelloFigma.fig。
在 Figma 的檔案瀏覽器中,將滑鼠遊標懸停在「Drafts」(草稿) 上。「+」圖示隨即顯示。按一下「+」,然後點選「Import...」,然後選取您剛才下載的「HelloFigma.fig」檔案。
在 Figma 中開啟已匯入的檔案。
建立元件
如要將匯入的設計與 Relay for Figma 外掛程式搭配使用,我們必須先將其轉換為元件。選取「Hello Card」框架,然後按一下工具列中的「Create Component」。
建立 UI 套件
Relay for Figma 外掛程式會為元件新增額外資訊,方便您與可在程式碼中使用該元件的開發人員合作。
在檔案中開啟 Relay for Figma 外掛程式 (在 Figma 選單中依序點選「Plugins」>「Relay for Figma」)。點選「開始使用」。
選取元件,然後按一下「Create UI Package」。
選取 UI 套件後,將說明新增至「Summary」。例如:「Hello Card 元件用於顯示圖片和標題內容」
按一下對話方塊右下角的「與開發人員共用」,前往下一個畫面。
提供給開發人員流程
現在,您已建立 UI 套件,請準備元件,以便與開發團隊共用。
為元件檔案建立新的已命名版本。使用元件的已命名版本可避免不必要的變更影響正式版元件。
輸入這個元件的第一個版本的名稱和說明,然後按一下「儲存」。
接下來,請建立可分享的元件連結,在 Mac 上輸入 CMD-L,或在 Windows 中輸入 CTRL-L 鍵,將連結複製到剪貼簿。
下一步
您現在可以將 UI 元件交給 Android Studio。
開啟 Android Studio 來完成本教學課程的下一部分。
在 Android Studio 中將設計轉換為程式碼
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-03-25 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-03-25 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-03-25 (世界標準時間)。"]]