大厂如何做设计系统？组件库规范源文件合集

编辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助设计师和开发者提高工作效率；本文作者分享了关于各个大厂已经成形的组件库，一起来看一下。

最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 Sketch 源文件的。

但实际上组件库的整理工作也是比较繁复的，我们在开始之前，需要去判断什么情况下组件库可以真正为我们节省工作量提升效率；而这些已经成形的组件库，非常值得大家下载学习、参考和使用。

一、大厂 1. ANT Design（蚂蚁金服）

蚂蚁金服出品，非常著名的框架；企业级产品的设计系统，很多公司的项目都在使用，而且提供了对设计师友好的Sketch规范文件，可以直接拿来用。

官方链接：https://ant.design/

源文件规范下载：https://ant.design/docs/resources

移动端： AntDesignMobile Template V1.0.sketch

首页： Ant.Design.home-3.0.sketch

Pro： Ant.Design.Pro.sketch

web端： Ant.Design.3.0.Components.sketch

2. AntV Charts（蚂蚁金服）

AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。（包含PC和移动端）

源文件规范下载：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html

附件下载： AntV.Charts.sketch

3. Element UI（饿了么）

这是由饿了么 UED 设计开发的基于 Vue 的前端组件库，虽然在很多交互模式和组件样式以及设计理念上都参考了 Ant Design，但是也做了一些自己的修改和调整。

他们同样也推出了 Axure 元件库文件以及 Sketch 组件库，有兴趣的朋友可以参考研究一下。

源文件规范下载：https://element.eleme.cn/#/zh-CN/resource

附件下载： Element UI Kit_v2.0.sketch

3. Zan Design System（有赞）

服务于 SaaS 产品的设计体系。连接设计和开发，让协作变得高效简单；通过沉淀不同行业、场景的经验和思考，推动社交生态内的用户体验一致性。

源文件规范下载：https://design.youzan.com/resource/resource.html

桌面端视觉规范： Zan Desgin PC_2.0_beta.sketch

视觉规范： Zan Design Vant 视觉规范 V3.0 .sketch

元件库： Zan Design Vant 元件库 TC_ZY.zip

4. Mand Mobile（滴滴）

面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。

源文件规范下载：https://didi.github.io/mand-mobile/#/en-US/design/other/resource

5. Taro UI（京东）

Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。

源文件规范下载：https://taro-ui.aotu.io/#/docs/resource

附件下载： TaroUI.sketch

Axure部件库： taroui-rplib1565263474229.zip

6. AT UI（京东）

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。

源文件规范下载：https://at-ui.github.io/at-ui/#/zh/resource/design

附件下载： feather.sketch

7. WeUI（微信）

由微信团队推出的可以用于微信小程序设计的 Sketch 组件库，用起来也很方便，有微信端设计需求的朋友可以参考。

源文件规范下载：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87

8. QMUI（腾讯）

QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装；设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。

官方文档：https://qmuiteam.com/web/page/widget.html

二、国外 1. Apple UI Design Resources

iOS 的设计规范其实并没有 Material Design 那么具体和细节，但作为一个 iOS 平台的设计人员还是需要把它们的设计理念烂熟于胸。

对于 iOS 平台的 Sketch 组件库，我只推荐两个，一个是 Facebook 推出的 iOS 10 组件库，另外一个是由 Apple 官方推出的组件库，同样都有 Sketch 源文件。

源文件规范下载：https://developer.apple.com/design/resources/

2. Android Material Design

由 Google 设计团队推出的 Material Design 一经发布就红遍了全球设计界，多个富有突破性的设计理念，将理性与感性相结合的完美标准，使得越来越多的人基于 Material Design 制作了自己产品的设计规范。

除了谷歌官方的 Sketch 组件库外，还有一个基于 Material Design 色板的 Sketch 源文件下载，用起来非常方便。

源文件规范下载：https://material.io/resources#sticker-sheets-icons-components

Material Design 官方相关源文件下载

Material Design 色板 Sketch 源文件下载

3. Clarity Design