在构建设计规范之前,你需要看看这些设计资源
在前两年中,我一直在研究设计规范系统。在这篇文章里,我会分享一些我觉得对设计规范有用的视频和文章。希望对你们有帮助。
理论文章:
设计系统手册

没有设计系统设计进度可能会很缓慢,并且随着时间的推移越来越难以维护。设计系统使团队能够通过使设计可重复使用来更快地构建更好的产品 。 这是设计系统的核心和主要价值。
你可以读一读这本手册,如果你正想着怎么开始设计一套设计系统,这个的手册含金量是非常高的,它涵盖了设计系统的所有方向。
为什么设计系统会失败

你必须使你的设计系统成为阻力最小的路径,降低开发的认知开销是很重要的。
如果你想要了解设计系统一些常见的陷阱, 和设计成功的设计系统所需的关键。你可以读一读这篇文章。
团队大于像素
How building a design system empowers your team to focus on people — not pixels.

这就是构建设计系统的美妙之处。 通过决定一次细节,你就可以将整个产品开发团队释放出来,让他们专注于解决实际的客户问题。
如果你希望了解跨区域团队如何协同重新设计影响两大洲40多种产品的组件,你可以读一读这篇文章。
AirBnB: 建立视觉语言

译文地址:构建一个可视化设计语言:Airbnb全新设计系统背后的故事,公司越大越要提高效率 - 创业ABC - 创业邦
由于设计语言和代码通常是可以被共享的,我们现在几乎可以同时在所有原生平台上构建并发布产品功能,极大地提高了效率,开发工作因此也变得更快。我们的产品工程师,现在可以专注与产品的功能逻辑,再也不用为编写视图代码而费心思了。不仅如此,如今Airbnb公司的工程和设计师可以分享共同语言。
这篇文章详细介绍了为什么要构建设计系统,构建设计系统的好处与经验教训。
为复杂产品构建设计系统
Designing Design System for Complex Products

我过去常常在设计上加上大量的“红线”,详细描述,为开发人员提供尽可能多的细节。 但这并不是一种有效的交付方式,有时开发人员并没有遵循我在设计中提出的所有细节。
这篇文章解释了风格指南和设计系统的区别。非常适合刚开始接触设计系统的人。
原子设计:怎样设计系统组件
Atomic design: how to design systems of components

译文地址:Atomic Design原子设计┃构建科学规范的设计系统
在这篇文章中你会了解到设计师怎样进行原子设计。
实操文章:
如何初步构建设计系统
How To Get A Head Start On Design System

作为一名曾经在一个小型设计团队中的设计师,我很乐意与设计系统享我的经验,尤其是 “如何开始”部分。
这篇文章是设计系统初学指南。
用 Sketch 构建设计系统 (共9个系列)
Creating with a Design System in Sketch: Part One [Tutorial]
Creating with a Design System in Sketch: Part Two [Tutorial]
Creating with a Design System in Sketch: Part Three [Tutorial]

Creating with a Design System in Sketch: Part Four [Tutorial]

Creating with a Design System in Sketch: Part Five [Tutorial]

Creating with a Design System in Sketch: Part Six [Tutorial]

Creating with a Design System in Sketch: Part Seven [Tutorial]

Creating with a Design System in Sketch: Part Eight [Tutorial]
Creating with a Design System in Sketch: Part Nine [Tutorial]
参考文章:https://medium.com/zendesk-creative-blog/design-system-resources-b9119ddf9790
希望这篇文章会对你们有帮助。
相关文章推荐: