我作为实习生的第一个任务以及我从设计系统中学到的东西

我加入Piktochart担任前端实习生后，第一个任务就是参与设计系统 (DS) 项目。之前我没听说过这个，只是觉得它有点像 UIKit，更像是一个包含了设计开发所需内容的系统。

普遍的答案是，在不同产品和不同团队之间保持一致性，也能让流程更加敏捷，减少认知负担，加快公司的发展速度。它还能帮助解决每个设计师和开发人员在扩展业务时面临的问题：

简而言之，设计系统帮助用户。

设计系统已为 Shopify、IBM、Atlassian、Airbnb 甚至美国、澳大利亚等政府的前端团队提供支持。因为它将帮助设计开发更高效、更快速，并将团队协作提升到新的水平！

设计系统是一个流行的系统概念，它包含：

设计语言
设计资产，如 Sketch Kit、AI Kit 等，以及品牌指南，如排版、可访问性、动作等。

组件库
编码组件通常在 Javascript 库或框架中，如 React、Vue、Angular 或其他。

风格指南
您上面链接的物理网站是设计语言和组件库的文档。

技术方法本身并不重要，重要的是创建一个灵活、可维护、稳定、可扩展且能够长期成功的动态系统。—— Katie Sylor-Miller，Etsy 高级软件工程师

设计系统的主要核心通常涉及设计师、开发人员和产品所有者/经理。

设计师可以将设计过程分解为更小的部分，比整个网页更容易操作、管理和更改。

因此开发人员清楚地了解如何构建所需的组件以保持统一的风格并快速实现新功能，而无需编写更多不必要的代码。

产品所有者/经理采用基于组件的方法，使请求开发团队提供额外的页面元素成为一个非常简单的过程。

我们的设计系统是用 Vue.js 构建的，其中包括我们的设计原则、组件、模式、类型比例、颜色指南和间距使用以及其他原型。

构建 🏗
由于我们采用敏捷工作流程，首先我会在 JIRA 上被分配一个任务，然后我会从 UI/UX 团队那里拿到 UI 模型 Figma。例如，如果我开发一个新组件，我就需要考虑它必须是功能组件还是非功能组件。
文档 📄
通常使用 Markdown/MDX 编写文档，其中包含新的实现。或者任何与我们的设计原则、字体比例、颜色指南和间距使用相关的内容，以及其他原型。
测试 👾
已添加单元测试用例，用于功能性错误。可视化测试用于 UI 错误。在 CI/CD 中，我们的测试套件会在每次提交时在后台运行 linters。此外，已部署到我们生产环境和设计系统网站上的临时服务器进行测试。
审查 🧐
创建拉取请求，并在 Github 上获取代码审查，同时如果代码符合功能和外观的预期，也可以从 UI/UX 团队获取审查。获取所有反馈和已解决问题。
分发🥳
然后，我创建一个拉取请求，添加我的新功能以供发布并部署到设计系统🎉对于版本控制，我们首先在每次主要/次要补丁之前在 GitHub 中标记新版本。

就这样！感谢阅读！