swiftui_如何使用SwiftUI构建设计系统

swiftui

Building a design system to support one product is not easy - it has to be robust and flexible at the same time for scalability. Though challenging, lots of great resources have shared useful principles and approaches that help teams build a good system both visually and programmatically. Standing on their shoulders, this article tries to contribute to an untouched ground by focusing on building a good system in SwiftUI.

构建支持一个产品的设计系统并不容易-它必须同时具有鲁棒性和灵活性以实现可伸缩性。 虽然具有挑战性， 很多 的 巨大 资源都共享有用的原则和方法，帮助球队在视觉和编程方式构建了良好的系统。 站在他们的肩膀上，本文致力于通过专注于在SwiftUI构建良好的系统，为未开发的领域做出贡献。

为什么我写这篇文章 (Why do I write this article)

During my first summer in ITP at New York, I'm lucky to have the opportunity to work as an iOS developer intern at Line Break Studio. One task I've been assigned to is building a design system in two steps: first visually in Sketch, and then programmatically in SwiftUI. The experience of experimenting with the new framework and building a design system with it has been amazing, but also buggy along the way. That's why we'd like to share our experience with the community, hopefully making your development process easier.

在纽约ITP的第一个暑假期间，我很幸运有机会在Line Break Studio担任iOS开发人员实习生。 我分配给的一项任务是分两个步骤构建设计系统：首先在Sketch中直观地SwiftUI ，然后在SwiftUI编程方式进行。 尝试新框架并使用它构建设计系统的经验令人赞叹，但同时也遇到了很多麻烦。 这就是为什么我们希望与社区分享我们的经验，希望使您的开发过程更轻松。

---

---

什么是SwiftUI (What is SwiftUI)

Apple released this groundbreaking new framework in WWDC 2019, which is one of the bests in years. From the point of view as a web developer, the project development experience in SwiftUI is closer to which in conventional front-end stack and frameworks.

苹果在WWDC 2019中发布了这一突破性的新框架，这是多年来最好的框架之一。 从Web开发人员的角度来看， SwiftUI的项目开发经验与传统前端堆栈和框架中的经验更为接近。

This is definitely an awesome move because programming interface and managing states are drastically easier than before. And the best part of this improvement is that one can integrate UIKit and SwiftUI smoothly. To learn the basics of SwiftUI, the official tutorials provided by Apple are very helpful.

这绝对是一个了不起的举动，因为编程接口和状态管理比以前容易得多。 而这一改进的最好之处在于，它可以平滑地集成UIKit和SwiftUI 。 要学习SwiftUI的基础知识，Apple提供的官方教程非常有帮助。

示范项目 (The demo project)

For demonstration purpose, I put up a simplified version of design system we built in Line Break Studio. It a set of button components in different forms, which are