发布设计系统

随着时间的推移将互连的输出传递给采用者

发行设计系统系列中的6之1:
输出|节奏|版本|破|依存关系|处理

公司在采用产品时使用系统来制作和发布其客户使用的体验,从而意识到设计系统的价值。作为价值链的一部分,系统会随着时间的推移发布功能。这使系统交由客户:设计人员和工程师来完成。

强大的系统团队会认真对待发布。他们不认为自己只是发布组件库代码。相反,它们提供了更多的输出:设计令牌,文档,设计资产和其他资源。

本系列描述了发布设计系统的许多方面。首先定义系统的许多输出及其交付位置。后续文章涵盖了节奏,版本控制,重大更改,依赖关系和逐步方法。

这些故事反映了我与Discovery Education,Morningstar,Target和REI等团队合作发布的系统所学的内容。来自Salesforce,Adobe,Atlassian,Shopify和Financial Times的同事的洞见提高了他们的能力。感谢您慷慨分享您的时间和做法!

结果:发布了什么?

设计系统程序会发布许多类型的输出,而不仅仅是代码。因此,系统应区分此范围的版本输出并将其传达给开发人员,设计人员和其他客户。

代码,真理之源

大多数系统提供表示层代码真相的单一来源:

  • UI组件库为HTML标记和CSS。通常称为“ CSS”,此包的使用取决于使用或编译CSS作为一致的视觉样式基线以及重用HTML代码段。

和/或…

  • UI组件库作为Javascript:许多系统将HTML和CSS与JavaScript封装在一起,以增强逻辑,封装样式并在选择的框架中更直接地简化集成和维护。尽管大多数库都针对特定的框架(React,Vue,Ember,Angular等),但行业信号表明,正在转向为所有框架制作Web组件。我最近的六个系统工作? 2017年末:Vanilla HTML,Vanilla HTML。 2018年初:React,Vue。 2018年晚些时候:Web组件,Web组件。

此外,其他重要输出可能会单独发布:

  • 设计令牌通过语义上有意义的属性-值对建立视觉样式。令牌是可用的多种格式的变量,可在平台(Web,iOS,Android),预处理器(Sass和LESS)和框架(如React)中使用。一些系统在与UI组件代码分开的存储库中管理令牌。结果,它们的库以及其他实现也可以依赖令牌作为包。
  • 演示Apps / Site作为环境,其中包含使用组件库构建的页面示例。该演示还用于教程和快速原型制作,包括设计师!
  • 适用于iOS,Android和Windows的跨平台组件。

设计资产

大多数团队将对发布内容的理解仅限于简单的“我们发布代码”。他们意识到发布了许多其他随时间变化的工具,这令人大开眼界。它们包括:

  • 设计工具包作为设计软件中提供的模板文件和符号库。今天,几乎总是素描。明天,Figma,Invision Studio和其他新兴竞争对手?
  • 字体,图标,甚至是折纸的图像集,这是由于系统通常会在分发和版本化此类库中发挥作用。
  • 其他设计资源,例如插图和色样ASE / CLR文件,是定制艺术品的跳板。这些集合的变化缓慢,形式化程度较低,并且通过社区成员(不是系统核心团队的一部分)的贡献来进行。但是,从客户的角度和系统的沟通来看,它是系统的一部分。

文档网站

设计系统需要一个家,一个每个人都知道的地方,他们可以找到一条通往拥有最新和最伟大事物的道路。它位于一个令人难忘的网址中,通常使用特定于其任务的UI组件构建。

  • 文档站点描述功能(如按钮),新用户注册以及触发过程,例如获得帮助或提供帮助。团队更常使用静态网站生成器来构建网站,而很少使用内容管理系统来构建网站。
  • 文档组件–代码示例对,禁止操作,十六进制代码,组件浏览器–依赖于UI组件库,通常仅服务于文档站点。此类组件可以通过文档站点进行版本控制,也可以作为相对于doc和它们之间放置的UI组件的第三个单独版本化的库进行版本控制。

目的地:去哪里?

分发代码和设计资产时,至关重要的是,以采用工程师最容易使用的方式提供代码。这意味着某些系统必须提供众多选择中的选择,而其他系统则可以依靠单个选择作为组织标准。

对于代码

  • 最佳:像npmjs这样的注册中心(或者像Sonatype的nexus这样的内部副本)提供对已发布代码包的访问和管理。然后,开发人员可以使用bower,npm,yarn,webpack和babel之类的工具在其环境中平稳地集成和升级该代码。
  • 更好:在CDN上托管资产,可直接链接到版本化样式和脚本以及变化较慢的字体和图标。
  • 没关系:可以访问Github,Bitbucket等用于克隆,派生或以其他方式进行编译,使用的存储库,并且最终可能会有所贡献。
  • 如有必要:直接代码下载,通常是从doc站点下载已编译或未编译系统资产的“ ZIP文件”,以供本地使用和/或手动集成到单独的存储库中。

Bootstrap和Material Design Lite是发布到2个以上目标位置的示例。

对于设计工具包

  • 最佳:在设计工具的菜单中将“新建”作为嵌入的同步路径,以从模板创建新实例。
  • 更好:使用基于权限的设计资产管理软件(例如Abstract或Lingo)进行版本控制和分发。
  • 良好:直接从文档站点下载工具包,并标明清晰的版本,并在附近提供相关的入门文档。
  • 没问题:共享驱动器,通过广为宣传且可能简化的内部URL(例如http://system.uitoolkit)。
  • 不够好:埋没在许多人找不到的几乎没有组织的Wiki网站的某个第四级页面上。

下一个→#2。韵律