如今,设计系统是一项完整的工作。机构被雇用来创建它们。内部团队被组成来处理它们,运送它们以便其他团队能够使用它们,并帮助确保它们能够使用。设计系统不是一种时尚,它们是数字设计方式的积极演变。Backlight是设计系统的最终一体化开发工具。
我认为在最后开始思考这个问题是很有意思的。对于网站的设计系统来说,最好的情况是什么?我认为是当你把一个版本化的设计系统发布到npm上。这样的话,团队就可以把它作为项目的一个依赖项拉进来使用。你是怎么做的?你的设计系统在GitHub上,你从那里发布。你是怎么做的?你通过一个推送到GitHub的开发环境来处理你的设计系统。什么是Backlight?它就是那个开发环境。
在几秒钟内建立一个完整的设计系统
想看我做吗?
你不需要选择一个启动模板,但看到所有的可能性是很有启发性的。Backlight对于你想在系统中使用什么技术并不特别有意见。Lit和网络组件?很好。React和Emotion?很好。只有Vue?都很好。Nunjucks和Sass?这也行。
拥有一个起步的设计系统真的能让你在这里占得先机。如果你不介意使用现成的东西,然后对其进行定制,你会很快就可以开始运行了。一些你可能认为需要几周时间才能弄清楚并适应的东西,在瞬间就能完成。如果你想100%地定制一切,这仍然是完全可行的。
把它踢到GitHub上去
即使你还只是在测试,我认为你只需点击几下就可以创建一个GitHub(或GitLab) repo并推送给它,这真是太容易了,令人印象深刻:



对我来说,这是它真正变得真实的时刻。这不是什么第三方工具,每个人都100%被迫使用它,你永远被锁定在它上面,只有当人们购买第三方工具的时候,它才真正有用。背光只是采用了非常工业标准的做法,并使它们更容易和更方便地工作。
然后,把它踢到一个注册表上
就像我在顶部说的,这是任何设计系统的重要时刻。当你把它发送到像npm或GitHub的软件包注册处时,这意味着任何希望使用你的设计系统的人现在可以安装它,并像其他依赖一样使用它。
在Backlight,这只是一个点击几个按钮的问题:

如果是专业会员,你可以把范围改为你自己的组织。很快你就可以从这里处理你所有的设计系统发布,包括主要、次要和补丁版本。
制作一个组件
我以前从未使用过Backlight,没有人帮助我,我也没有阅读任何(强大的)文档。我只是随便点了一下,就轻松地创建了一个新的组件。在我这里,我做了一个新的Nunjucksmacro ,做了一些SCSS样式,然后把它作为一个Storybook "故事 "来创建一个演示。我所做的只是参考了一个现有的组件,看看它是如何工作的:

当然,作为CodePen的创造者之一,我高度赞赏所有这些的浏览器IDE的品质。它能超快地运行重新构建你的代码变化(看起来像一个Vite过程),提醒你任何错误。
现在,因为这是一个非常真实的严肃的设计系统,我不会直接将这个新的组件推送到我们仓库的master ,首先它成为一个分支,然后我再提交到这个分支。我根本不需要对Git有任何了解就能完成这个任务,看看这有多简单:

你好,利益相关者!
设计系统和技术一样,都是人的问题。设计系统需要被谈及。我非常欣赏我可以与任何人分享Backlight,即使他们没有登录。只要复制一个分享链接(没有人能够猜到),就可以走了:

这里有很多东西
你可以在这里管理整个设计系统。你正在管理从原子令牌级别的东西,一直到建立范例页面和拼凑系统。你实际上是在写代码来构建所有这些东西,包括模板、故事和测试,就在Backlight中。
你的团队中的那些人真的不能被说服离开他们的本地开发环境,怎么办?Backlight理解这一点,而且它不强迫他们这样做。Backlight有一个CLI,可以进行本地开发,包括启动一个服务器来预览正在进行的工作。
但它并不局限于此。你可以在Backlight中为一切建立文档。设计系统通常最好用文字来解释而设计系统实际上可能在完全以设计为重点的软件中开始生活(或平行生活),如Figma、Sketch或Adobe XD。在Backlight中可以直接链接设计文件,使它们容易被找到并更有条理。
我印象非常深刻我一开始并不确定如何看待一个想成为设计系统完整工具的工具,因为我知道整个世界有多复杂,但Backlight确实以一种我认为非常满意的方式实现了这一点,特别是从前端开发、设计和管理的角色出发。