使用 Backlight 构建、发布和维护设计系统

设计系统如今已经成为一项完整的工作。公司会聘请代理机构来创建它们。内部团队会组建起来负责处理它们,将它们发布以便其他团队使用并帮助确保它们正常运行。设计系统并非昙花一现,而是数字设计方式的积极演变。 Backlight 是设计系统的终极一体化开发工具。

我认为从最后开始思考这一点很有趣。网站设计系统的最佳场景是什么?我认为是当您将版本化的设计系统发布到 npm 时。这样,团队就可以将其作为项目的依赖项引入并使用它。您如何做到这一点?您的设计系统在 GitHub 上,您从那里发布。您如何做到这一点?您通过将代码推送到 GitHub 的开发环境来处理您的设计系统。什么是 Backlight?它就是那个开发环境。

在几秒钟内启动一个完整的设计系统

想看看我怎么做吗?

您**不必**选择启动模板,但了解所有可能性很有启发性。Backlight 对您希望用于系统的技术没有特别强烈的意见。Lit 和 Web Components?很好。React 和 Emotion?酷。只用 Vue?都可以。Nunjucks 和 Sass?没问题。

拥有一个启动设计系统确实可以让你在这里领先一步。如果您乐于使用现成的工具然后对其进行自定义,那么您将能够非常快速地开始运行。您可能认为需要几周才能弄清楚并适应的事情,瞬间就完成了。如果您希望对所有内容进行 100% 的自定义,这仍然完全可以。

将其推送到 GitHub

即使您仍在进行测试,我认为只需创建 GitHub(或 GitLab)存储库并在几次点击中将其推送到存储库,这非常简单且令人印象深刻。

对我来说,这是它真正变得真实的那一刻。这不是一些第三方工具,每个人都 100% 被迫使用它,并且您永远被锁定在其中,而且只有当人们接受第三方工具时它才真正有用。 Backlight 只需采用非常符合行业标准的做法,并使其更容易、更方便地使用。

然后,将其推送到注册表。

就像我在开头说的,这是任何设计系统的关键时刻。当您将其发送到像 npmGitHub 包 这样的包注册表时,这意味着任何希望使用您的设计系统的人现在都可以像使用任何其他依赖项一样安装并使用它。

在 Backlight 中,这只需点击几个按钮即可完成。

使用 PRO 会员资格,您可以将范围更改为您自己的组织。很快,您将能够直接从此处处理所有设计系统版本,包括主要、次要和修补程序版本。

创建组件

我以前从未使用过 Backlight,没有人帮助我,我也没有阅读任何(健壮的)文档。我只是点击了一下,就轻松地创建了一个新组件。在我的例子中,我创建了一个新的 Nunjucks macro,创建了一些 SCSS 样式,然后将其演示作为 Storybook 的“故事”创建。我所做的只是参考一个现有的组件来了解其工作原理。

作为 CodePen 的创建者之一,我当然非常欣赏所有这些的浏览器内 IDE 特性。它运行代码更改的重新构建(看起来像一个 Vite 进程)非常快,并以有用的方式提醒您任何错误。

现在,因为这是一个非常真实且严肃的设计系统,我不会将这个新组件直接推送到我们存储库中的master,首先它会成为一个分支,然后我提交到该分支。我根本不需要了解任何关于 Git 的知识来完成此操作,看看这有多容易。

您好,利益相关者!

设计系统既是人们关注的问题,也是技术关注的问题。设计系统需要被讨论。我真的很欣赏我可以与任何人分享 Backlight,即使他们没有登录。只需复制一个共享链接(没有人可以猜到),就可以开始了。

这里有很多内容。

您可以在此处管理整个设计系统。您正在管理从原子令牌级别到构建示例页面和组合系统的所有内容。您实际上是在编写代码来构建所有这些东西,包括模板、故事和测试,就在 Backlight 中。

对于那些真的无法被说服离开其本地开发环境的团队成员怎么办?Backlight 了解这一点,并且不会强迫他们!Backlight 拥有 CLI,它支持本地开发,包括启动服务器以预览正在进行的工作。

但这并没有结束。您可以在 Backlight 中为所有内容构建文档。设计系统通常最好用文字来解释!并且设计系统实际上可能首先(或同时)在完全专注于设计的软件(如 Figma、Sketch 或 Adobe XD)中创建。可以在 Backlight 中链接设计文档,使它们易于查找且更有条理。


我印象深刻!起初我不确定如何看待一个想要成为设计系统完整工具的工具,因为我知道整个世界有多复杂,但是 Backlight 确实以一种我感到非常满意的方式实现了这一点,特别是从前端开发人员、设计师和管理者的角度来看。