如何改进我们的设计系统交付方式

我们在构建设计系统的过程中经历了许多曲折和转折。通过每一次学习，我们不断审查、完善和简化工作流程，以尽快提供组件并提高其质量。如果您对设计系统还不了解，可以阅读我们之前的一篇博客文章。

我们已经学到了很多关于设计系统的知识，通过不断试错和改进，我们成功提高了交付速度和质量。我们意识到，一个良好的设计系统可以极大地加快产品开发的速度，并提供一致的用户体验。

在这篇文章中，我们将分享我们在设计系统交付方面的一些经验和教训。

首先，我们意识到设计系统的成功离不开团队合作和沟通。为了确保每个人都能理解并使用设计系统，我们组织了培训和工作坊，让团队成员掌握设计系统的使用方法和最佳实践。此外，我们定期与团队成员进行沟通，了解他们在使用设计系统时的问题和反馈，并积极解决这些问题。

其次，我们注重设计系统的文档和指导。我们创建了详细的文档和指南，以帮助团队成员理解设计系统的结构、组件和使用方法。这些文档包括示例代码、说明和实用技巧，使团队成员能够更轻松地使用设计系统。

另外，我们还重视反馈和改进。我们鼓励团队成员提供对设计系统的反馈意见，并及时对其进行改进。我们定期评估设计系统的性能和效果，并根据反馈进行调整和优化。

总之，通过团队合作、有效的沟通、详细的文档和指导以及持续的反馈和改进，我们成功改进了设计系统的交付方式。我们相信，一个高效和易于使用的设计系统将为我们的团队带来更多的成功和成就。

如果您对我们的设计系统感兴趣，欢迎访问我们的Medium页面 (opens new window)了解更多信息。 多亏了对主题和基础设施的深入了解以及对跨浏览器可视化测试的实施，我们能够更好地理解复杂性，并且能够有效地构建组件。

早期参与

作为一个多品牌设计系统，我们的组件需要足够灵活，以适应各个品牌在多种用例中的使用。为了实现这一目标，在规范阶段我们确保所有品牌都参与其中，这样我们更有信心将组件未来化，以便更多品牌采用NewsKit。

即使某个品牌没有立即使用该组件的计划，我们仍然会与他们早期进行接触，以便记录他们的意见，并确保他们在以后决定整合时能够接受这种方法。

尽管如此，我们仍然需要学会平衡参与度和进度的关系，以确保项目的顺利进行。我们会尽可能地减少不必要的会议，并通过有效的沟通与各个品牌保持良好的合作关系。

我们还意识到，为了使设计系统成功，我们需要在组件构建的早期阶段就与各个品牌进行紧密合作。这样，我们可以更好地了解他们的需求和约束，并根据这些信息来指导我们的设计和开发过程。通过这种方式，我们能够更好地确保我们的组件能够适应各个品牌的需求，并为他们提供最佳的使用体验。

测试和迭代

在构建组件的过程中，我们非常重视测试和迭代。我们会使用各种工具和技术进行测试，以确保我们的组件在不同浏览器和平台上都能够正常运行。这包括跨浏览器的可视化测试，以及其他形式的自动化测试。

通过测试和迭代，我们能够及时发现和修复潜在的问题，提高组件的质量和稳定性。我们还鼓励团队成员积极参与测试和反馈，以便不断改进我们的设计系统。

结论

通过与各个品牌的早期参与、测试和迭代，以及与团队成员的积极合作，我们能够构建出灵活、稳定且适应各个品牌需求的组件。这为我们的多品牌设计系统的发展奠定了坚实的基础，并帮助我们提供更好的用户体验。我们将继续努力不断改进和优化我们的设计系统，以满足不断变化的需求。 中文译文：

为了确保我们提供渐进式增强功能，我们尝试在第一个版本中提供一个完整的组件，但是我们改变了思路，现在首先交付所需的内容，即使我们对组件的最终目标有一个很好的想法。通过试验和错误，我们现在更加了解如何定义我们所开发的任何新组件的MVP。

我们还更好地了解了哪些组件需要优先考虑。在早期，我们采取了审核最常见的组件并首先构建它们的方法。然而，通过与我们支持的产品团队的紧密合作，我们现在根据他们的路线图响应所需。这使我们能够在构建系统时提供直接的商业价值。

早期参与是我们的设计和工程团队的关键学习。对于设计师来说，在设计过程的规范阶段与工程团队进行合作，并对进行中的工作进行审查，这是非常重要的。 使用正确的工具

Figma在我们的设计团队中的引入改善了协作、沟通和工作流效率。除了整合多个工具外，我们发现Figma还提供了灵活性，可以从一个单一的位置管理UI库，减少了维护成本。

Figma的Jira集成使我们的工程师可以轻松访问他们正在处理的票据中的设计，并且我们还自行开发了插件来管理我们品牌之间的不同主题。

类似的工作方式

从我们成为一个团队的那一刻起，我们都同意我们的设计师和工程师需要密切合作。通过将设计团队与我们的工程师融入Scrum框架，我们的协作和工作流程得到了改善。 沟通不断流动。设计团队还引入了设计仪式，每周定期获得对他们的工作的反馈。

我们关注的另一个领域是改进我们的发布流程。当我们开始这个旅程时，我们需要学习很多，以便理解为多个品牌设计系统的复杂性。由于早期发布中的许多重大变更，我们不愿意经常发布。然而，随着时间的推移，我们变得更加稳定，使品牌更容易升级到最新版本的NewsKit。设计团队与代码发布周期保持一致，每两周发布一次UI Kit的设计更改。

标准化

我们最初在设计和工程方面交付组件的时间比我们最初希望的要长。然而，随着团队的经验增加以及与品牌更好的合作，我们看到了组件交付时间的整体减少。

随着时间的推移，我们在代码库和领域经验方面不断积累。 团队。现在，无障碍性和SEO等领域要花费更少的时间来了解方法。

清单现在在确保我们达到设定的标准并为任何开始新工作的人提供起点方面发挥着至关重要的作用。

为了确保我们在UI库中不是临时的方式来处理我们的图表和设计，我们的设计师会按照清单进行工作。包括进行工程设计同行评审，节省双方来回沟通的时间。我们的工程师在他们的PR流程中也使用清单，他们会不断地审查和更新。

我们还通过重复使用其他组件进行了改进。选项卡和菜单项我们可以基于按钮组件进行构建。通过这样做，意味着我们不需要再重新构建这些组件。

最初，我们没有任何基础组件，但随着我们的进展，我们能够重复使用简单的组件来构建更复杂的组件。例如，我们可以使用我们的按钮组件来构建更复杂的组件。 在构建像抽屉这样的组件时，从货架上取下来的时候。

随后交付相关的组件速度显著加快。

另一个例子是横幅、弹窗和内联消息。横幅是我们构建的第一个需要共同功能的组件。到我们构建出弹窗和内联消息组件时，我们的周转时间显著减少了。

反馈

最后，持续的反馈对于确保我们采取正确的方法非常重要。我们获得反馈的频率越高，解决任何问题就越容易。

当品牌开始使用NewsKit时，我们与设计和工程团队的品牌定期举行交流会。这种双向反馈帮助我们了解他们在使用我们的设计系统时遇到的任何问题。我们还利用这些会议展示任何正在进行中的新组件，以便在发布初始MVP版本之前从我们的用户那里获得反馈。

还有其他 我们追踪反馈的方式有很多。我们与设计系统的用户进行了调查，设定了产品KPI和NPS得分。我们现在设定了关于构建组件、采用情况和定期调查反馈的目标，以确保Newskit尽可能用户友好。

我们付出了大量努力来理解和改进我们的流程。这些努力已经在NewsUK和NewsCorp的重要项目交付中得到了体现。随着更多品牌加入使用我们的设计系统，我们将继续审查以下领域：

• 文档如何融入我们的整体交付流程。
• 在不影响新组件或增强功能交付的情况下提供支持。
• 在多个品牌之间平衡交付。
• 哪些KPI对我们来说是正确的，以向利益相关者展示业务价值。

如果您想了解即将到来的内容，请查看我们的高级路线图。 设计系统是一种用于创建一致和可重用的设计元素的方法，以便在不同的项目中使用。它可以包括颜色、字体、图标、组件和其他设计元素等内容。设计系统有助于提高设计效率、保持一致性，并促进协作。

交付设计系统需要一些工具和技术。其中之一是Figma，它是一种基于云的设计工具，可以帮助设计师和开发人员协作创建、编辑和共享设计文件。Figma具有强大的实时协作功能，可以使团队成员在同一时间编辑同一文件。

在开发设计系统时，使用React作为构建用户界面的工具是常见的选择。React是一个开源JavaScript库，可以帮助开发人员构建高效、可维护的用户界面。它将用户界面划分为可重用的组件，使开发过程更加模块化和灵活。

发布设计系统时，可以使用各种工具和平台来展示和共享设计元素。其中之一是NewsKit，它是一个在线发布平台，可以帮助团队展示和共享设计系统。在NewsKit网站上可以找到更多关于设计系统的信息。

设计系统可以提高设计效率、保持一致性，并促进协作。通过使用工具如Figma和React，以及发布平台如NewsKit，团队可以更好地创建、管理和共享设计元素。希望这篇文章对你有帮助！