在 Figma 中创建界面软件包
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
首先,在 Figma 中创建组件。在本教程中,我们将使用一个现有的 Figma 文件作为示例。此文件包含一个带有图片和标题的自动布局框架。确保您已登录 Figma 帐号。
- 将此 Figma 文件下载到您的计算机:HelloFigma.fig。
在 Figma 的文件浏览器中,将鼠标悬停在 Drafts 上。系统会显示 + 图标。依次点击 + 和 Import...,然后选择您刚刚下载的 HelloFigma.fig 文件。
在 Figma 中打开导入的文件。
创建组件
为了将导入的设计与 Relay for Figma 插件搭配使用,我们首先需要将其转换为组件。选择 Hello Card 框架,然后从工具栏中点击 Create Component。
创建界面软件包
Relay for Figma 插件会向组件添加额外信息,以便您与开发者合作,他们可以在其代码中使用该组件。
在文件中打开 Relay for Figma 插件(在 Figma 菜单中依次选择 Plugins > Relay for Figma)。点击开始使用。
选择相应组件,然后点击 Create UI Package。
选择界面软件包后,向 Summary 添加说明。例如:“用于显示图片和标题内容的 Hello Card 组件”
点击对话框右下角的与开发者分享,即可转到下一屏幕。
与开发者分享流程
现在,您已经创建了界面软件包,接下来请准备您的组件以与开发团队共享。
为组件文件创建新的已命名版本。使用组件的已命名版本可防止不必要的更改影响生产组件。
为此组件的第一个版本输入名称和说明,然后点击保存。
接下来,创建一个可共享的组件链接,并通过在 Mac 上按 CMD-L 或在 Windows 上按 CTRL-L 将其复制到剪贴板。
后续步骤
现在,您可以将界面组件移交给 Android Studio 了。
打开 Android Studio 以完成本教程的下一部分。
在 Android Studio 中将设计转换为代码
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):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": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-03-25\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"]],["最后更新时间 (UTC):2024-03-25。"]]