跳到主要内容

组件库迁移

摹客3 提供了 Sketch、Figma 组件资源迁移功能(限付费团队使用),你可以通过组件库导入的功能,完成组件库和设计稿的批量迁移。导入的文件将自动关联导入的组件库,引用的设计文件仍能接收到组件库的更新,帮助企业团队快速做设计资产迁移。

功能入口

通过平台右上角组件库迁移入口,打开组件库迁移弹窗。

004组件库迁移

在导入前,请确认要导入的企业及所在团队目标位置,需要注意,导入组件库功能仅对团队可管理权限开放,可编辑成员可通过此入口导入设计稿对管理员已经导入的组件库进行关联。若你在上传使用设计稿时,发现有缺失的组件库,可联系团队管理员进行组件库上传。

导入 Sketch 组件库

团队管理员可以按以下步骤上传组件库:

  1. 在弹窗内,选择左侧组件库导入位置,从打开的文件选择器中选择 Sketch 组件库文件,支持多选。

004组件库迁移

导入 Sketch 设计稿

团队内有编辑席位的成员均可进行Sketch 设计稿的导入,若想自动关联组件库,请在此入口进行文件导入。

004组件库迁移

  1. 在弹窗内,选择右侧导入设计稿,从打开的文件选择器中选择 Sketch 设计稿文件,支持多选。若设计稿引用了组件库,组件库将自动关联,可以打开导入后的设计稿,选中实例,点击“跳转到源组件“即可打开对应的组件库文件。

004组件库迁移

  1. 若组件库设计有更新,发布资源后,在设计稿右下角会显示更新提示。在更新弹窗内,点击“更新”,即可完成组件库更新。

004组件库迁移

导入 Figma 组件库

摹客3提供Figma组件库批量迁移,在弹窗内切换到Figma导入,首先需要导入Figma组件库,可根据以下步骤进行导入:

004组件库迁移

步骤一:获取Figma 账号Token和团队ID

为了能够获取Figma组件文件信息并与本地.fig 文件进行关联,需要提供Figma 账号Token和团队ID。(安全说明:Token 仅用于当前解析流程,摹客不会存储并在其他地方使用您的 Figma Token)

  1. 获取 Token 参考以下步骤:

    004组件库迁移

  • 打开 Figma → 点击左上角用户头像

  • Settings → Security → Personal Access Token

  • 随机输入Token Name,选择以下权限的授权,生成并复制到摹客3弹窗内。

    004组件库迁移

  1. 获取团队ID 由于 Figma 官方限制,需要获取团队ID,才能拿到组件库文件信息,参考以下步骤:

步骤二:选择需要关联的组件库文件

在获取完Figma团队文件信息后,为了拿到完整的文件资源信息,需要手动选择本次需要关联的Figma组件库文件(即:已经导入到本地的.fig组件库,对应的Figma云端组件库文件)。

004组件库迁移

步骤三:导入本地文件并关联

导入本地.fig组件库文件,导入后,摹客3会自动关联Figma团队文件,你也可以选择下拉菜单检查是否关联正确。

004组件库迁移

导入组件库并关联成功后,再在下面弹窗内导入引用的 Figma 设计稿文件,系统将自动关联已经导入的 Figma 组件库。

004组件库迁移

常见问题说明

Q1:为什么必须使用 Token?

因为 Figma 官方授权方式无法获取组件和样式的完整引用关系(resourceKey), 使用 Token 才能保证组件库的还原度,后续有其他实现方案时,会考虑其他迁移方案。

Q2:Token 或团队 ID 会被保存吗?

不会。Token 和团队 ID 仅用于当前解析流程,Token 或团队 ID 只会保存在浏览器的缓存中,不会被保存在摹客3中。