相关内容
- [[Design/设计系统/Design tokens]]
- [[Figma 官方 Design System 教程画布.canvas]]
- [[第三方设计系统管理]]
## 概念
> **在我看来，与其说「设计系统」不如说是「系统地设计」**。随着技术发展和用户需求的变化，软件产品已经变得越来越复杂，我们需要更加系统化、规模化的设计方法来加速产品设计流程，这正是设计系统所扮演的角色。
> 来源：[2. Figma 的基本理念 － 小专栏](https://xiaozhuanlan.com/topic/5740639218)
> Figma 官方教程 
## 设计原则
### Web
- [[模态窗口·对话框 Modal]]
- [[面板 Panels]]
- [[图标 Icon]]
- [[按钮 Button]]
## 最佳实践
[[我是如何使用Figma来实践设计组件库的]]
## 资源
### 文章
- [Welcome to design systems - Lesson 1 : Introduction to design systems - YouTube](https://www.youtube.com/watch?v=YLo6g58vUm0) #Figma官方资源
- [How we built our multi-platform design system at Booking.com | by Nicole Saidy | Mar, 2023 | Booking.com — UX Design](https://booking.design/how-we-built-our-multi-platform-design-system-at-booking-com-d7b895399d40) #跨平台设计系统 #待细品 感觉挺有意思的，从品牌到 Mobile 到 Web，如何有需的把控设计系统和流程。 
- 配套的 Figma 文件 [The multi-platform development process]( <https://www.figma.com/file/ZiCMxIZYLy1fHlQwEgcjxS/The-multi-platform-development-process-> (Copy)? Node-id=4%3A111&t=xkCFSriXlIP2Aqcf-1)。
- [My Five Biggest Design System Mistakes - by Steve Dennis](https://clipcontent.substack.com/p/my-five-biggest-design-system-mistakes-4725859926c2) 20230107 #待查看 
- [原则性经验](https://www.yuque.com/asorn/assets/kfgc23awrn6lb5k0) Figma 群友 Asorn 的一些工作心得，很有价值。
- [[5key设计系统系列]]
- [让组件库井井有条](https://mp.weixin.qq.com/s/jw8sfzb1NgYBWqjNLJu6Kw) 微信设计团队的，感觉很严谨。
- [B-Design呼吸视觉](https://mp.weixin.qq.com/s/hEsxAInEsoLauKQDj-G_yw) 阿里系的 #色彩系统
- [[Design/设计系统/Design tokens]]
- [什么是设计系统 - 构建一致、简单和优美的协作体验(xiaohongshu.com)](https://rpdc.xiaohongshu.com/course_detail/1) 小红书的设计系统课程。
- [B端设计系统怎么做？ ---- 设计系统的介绍与构成 · 语雀](https://www.yuque.com/meifangmia/zwcdgs/cncy6e) #公众号/酷家乐
### 合集
^5c0c1d
各大组件库 Notion 合集 [database](https://www.notion.so/chichibin/be126a071e4d46eb9c68f968fc94da5a)
- [Home | The Component Gallery](https://component.gallery/) 数量多，开源，目前设计系统最佳学习资料。
- [Accessibility - The Design Systems](https://thedesign.systems/guidelines/accessibility) 上海的一个全栈设计师整理的
- [飞书多维表格](https://v2w0tds1vc.feishu.cn/sheets/shtcnCC4IIwCJHlTb05B5fZb9Nf?table=tblZP9AWYJQNW6rp&view=vewIoYnD9m&sheet=tbSxTO>) 国内的居多
### Web 框架
#### Element
#### Ant design
#### Semi Design
[Semi Design](https://semi.design/zh-CN/) 抖音官方退出的，20211026，比较新，魔改 Ant design
#### Radix
[https://www.radix-ui.com](https://www.radix-ui.com/) 用 Radix-UI，不用从零开始，只需要定义样式
### 优秀 Figma 设计系统总结
- [Airtable - Figma Libraries by Designtips.today](https://airtable.com/shrHaFU6k2l2Bf5p3/tbl0bLMSvGC7PSpiM/viw8K9gtWmEELTUIl?backgroundColor=purple) 和我的 notion 很像的那种
- [chixin的设计系统总结](https://www.notion.so/b09fe11424454d32bb6db14f2a1d91dd?v=23b09f27d21b42f2a8ba8b5e29b58034) 我自己的 notion 总结 
### 优秀的组件规范模板
#### 组件地图
##### Jungle. Png
##### 微软 windows
### 工具
- [Supernova Cloud](https://cloud.supernova.io/ws/chi-bin/ds/11850-my-design-system/latest/settings/documentation/custom-properties?category=Search+engines) 帮助你管理并发布自己的设计系统到云端。 #第三方设计系统产品
- [The Ultimate Design Systems Resources List - Design strategy guide](https://designstrategy.guide/design-management/the-ultimate-design-systems-resources-list/#figma-plugins) #资源聚合 设计系统专场的工具合集。 
- [Design System Canvas — Download Now!](https://designsystemcanvas.com/) 设计系统地图，感觉有点用。
- [Design System Checklist](https://www.designsystemchecklist.com/) #设计系统指引 一个开源的检查表，帮助你计划、建立和发展你的设计系统
- [The Design System Guide](https://thedesignsystem.guide/) #设计系统指引
- ![[CleanShot 2023-12-23 at 17.04.08.jpg]]