下载预配置的 Figma 文件
首先,在 Figma 中创建组件。在本教程中,我们将使用一个现有的 Figma 文件作为示例。此文件包含一个带有图片和标题的自动布局框架。确保您已登录 Figma 帐号。
- 将此 Figma 文件下载到您的计算机:HelloFigma.fig。
在 Figma 的文件浏览器中,将鼠标悬停在 Drafts 上。系统会显示 + 图标。依次点击 + 和 Import...,然后选择您刚刚下载的 HelloFigma.fig 文件。
在 Figma 中打开导入的文件。
创建组件
为了将导入的设计与 Relay for Figma 插件搭配使用,我们首先需要将其转换为组件。选择 Hello Card 框架,然后从工具栏中点击 Create Component。
![工具栏中的“创建组件”图标](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/create-ui-package-in-figma/create-component.png?authuser=8&hl=zh-cn)
创建界面软件包
Relay for Figma 插件会向组件添加额外信息,以便您与开发者合作,他们可以在其代码中使用该组件。
在文件中打开 Relay for Figma 插件(在 Figma 菜单中依次选择 Plugins > Relay for Figma)。点击开始使用。
选择相应组件,然后点击 Create UI Package。
选择界面软件包后,向 Summary 添加说明。例如:“用于显示图片和标题内容的 Hello Card 组件”
点击对话框右下角的与开发者分享,即可转到下一屏幕。
与开发者分享流程
现在,您已经创建了界面软件包,接下来请准备您的组件以与开发团队共享。
为组件文件创建新的已命名版本。使用组件的已命名版本可防止不必要的更改影响生产组件。
![插件中的摘要框](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/create-ui-package-in-figma/share-with-developer-dialog.png?authuser=8&hl=zh-cn)
为此组件的第一个版本输入名称和说明,然后点击保存。
接下来,创建一个可共享的组件链接,并通过在 Mac 上按 CMD-L 或在 Windows 上按 CTRL-L 将其复制到剪贴板。
后续步骤
现在,您可以将界面组件移交给 Android Studio 了。
打开 Android Studio 以完成本教程的下一部分。