@douyinfe/semi-ui/content/advanced/design-source/index.md

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

---
category: 设计协作
title: Design Resources 设计资源
icon: doc-designresource
localeCode: zh-CN
order: 9
---

Semi Design 提供了丰富的设计资源，助力设计师和开发者高效协作。无论你是社区用户还是字节跳动内部设计师，都能在这里找到适合自己的 UI Kit 资源包和 Figma 插件。

## UI Kit
Semi Design UI Kit 提供了完整的组件库和设计规范，覆盖主流设计场景，帮助设计师快速搭建高质量界面，便于团队协作和资产复用。
- 社区用户： [Semi Design library](https://www.figma.com/community/file/1509783980598707066/semi-design-library)
- ByteDance Design 用户： [Semi Design library - ByteDance](https://www.figma.com/design/81rCf36kFTcxedsGgAibzd/Semi-Design--Base-?t=uy6hMwE8gwGgijZF-0)

## Figma 插件
Semi Toolbox 是一款由 Semi 团队打造，为设计师提效的功能插件。支持内容填充，表格生成，数据可视化图表生成，及主题同步。插件地址如下：
- 社区用户: [Semi Toolbox](https://www.figma.com/community/plugin/1450409416307888169/semi-toolbox)
- ByteDance Design 用户：[Semi Toolbox](https://www.figma.com/community/plugin/1435200322193309779)
- 国际化用户： [Semi Toolbox](https://www.figma.com/community/plugin/1435204511882469475)

### 📝 内容填充

一键批量填充带格式文本与图片，深度适配 Semi 组件，填充流程如行云流水，瞬间丰富您的设计稿。<br />
<MyImage src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/content-fill.gif" width="885" />


### 📊 表格生成
借助 Semi Table 组件，快速搭建专业表格，轻松满足数据呈现需求；⚠️ 当前仅 ByteDance Design 以及国际化插件中支持。<br />
<MyImage src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/dv.gif" width="885"  />


### 📈 数据可视化生成

打通 Semi DV 样式库，同步输出代码，设计开发无缝衔接。<br />
<MyImage src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/dv.gif" width="885" />


### 🎨 Semi 主题同步

DSM 主题快速同步，统一设计风格超便捷。<br/>
<MyImage src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/themeSync.jpeg" width="387"  />