生成 Ui Kit

生成 UI kit 需要预先下载 Figma 初始文件和 DSM Figma 插件。

Figma初始文件

DSM Figma插件

https://bytedance.feishu.cn/docx/doxcnCCyrja1XckOPdHGGWP00Dc

将Figma文件复制到你的项目中

首先需要你将 Figma 初始文件复制到你的项目中 。 Figma 初始文件中包含了基于 Semi Design 的 UIKit。我们将基于这份UIKit 快速的转化为你的 UIKit 。

在 DSM 中定制你的主题 🎨

在 DSM 中创建一个项目，并定制你的样式规范。 👉🏻 如何定制请参阅 如何使用 DSM 定义设计规范

同步你的样式到 UIKit 🔁

当定制好的你主题色等样式后，可以通过DSM Plugin 将样式同步到准备好的 Figma 初始文件中。 你可以通过当前的 Figma 初始文件切换各种风格主题的 UIKit 。

写入主题时会做以下几件事：

1. 把对应主题的 token 定义在 local style，如果已经存在则会覆盖，如果当前文件中已经有组件引用了这些样式，那么这些组件的样式会更新
2. 如果你修改了全局 radius、spacing，这时会刷新组件的这些样式
3. 如果你定义了组件样式，这时会对这些组件样式进行刷新 (3~8 分钟) 支持的组件列表

发布你的 UIKit 🚀

样式同步后就可以将组件进行发布，当然之后在 DSM Web 中的样式修改通过插件也可以及时的同步给你的UIKit。

第一次发布由于设计变量以及组件数量较多，时间相对较长，请耐心等待发布完成。

通过 Figma Assets 找到你发布的组件库即可 🔍

找到你发布的组件库，并进行关联，即可使用你的 UIKit ~