介绍故事书设计系统

面向故事书贡献者的可重用UI组件库

加载
多米尼克阮
@domyen

2019年10月更新: 学习如何建立一个设计系统从零开始与一个免费的9章指南 为开发人员设计系统 (包括真实的代码提交!)

故事书 是地球上最受欢迎的组件探索者. 它被超过20,000个GitHub项目使用,并由超过700个贡献者维护.

随着团队和项目规模的扩大,新的UI挑战也逐渐浮出水面. 更多的开发人员意味着更高的通信开销. 已有的UI模式要么被遗忘,要么被遗忘. 贡献者不必要地重复工作,而不是构建令人兴奋的特性.

我很激动地向大家介绍 故事书设计系统 (SDS),一个可重用的组件库,帮助贡献者更快地构建ui. 十博体育备用网址的目标是让故事书的UI工作更高效,更令人满意.

为什么设计系统?

设计系统是一个可重用的组件库,它简化了复杂但一致的ui的构建. SDS通过在一个维护良好的中央存储库中对故事书的现有UI组件进行编码,从而节省了您的时间并减少了歧义. 它包含三个部分:

  • 🏗 组件库: 25个生产级功能UI组件和95个故事
  • 🎨 设计令牌: 故事书品牌的样式变量
  • 📕 文档: 使用说明和道具表

成千上万的开发者已经在SDS上进行互动 故事书的网站, 学习故事书, 彩色 (故事书维护者提供的可视化测试工具).

十博体育备用网址是如何制作设计系统的

故事书对于优步、Airbnb、GovUK、IBM、GitHub和微软的系统设计至关重要. 当 凯尔, 迈克尔, I 在着手构建SDS时,十博体育备用网址首先确定了成功设计系统的共同特征. 在此过程中,优秀团队如何构建、测试和分发UI组件的模式出现了.

然后,十博体育备用网址厚颜无耻地挑选了最有效的技术,在不到两个月的时间内装运SDS. 以下是十博体育备用网址所学到的.

构建组件

十博体育备用网址选择的工具

什么工作

每个设计系统都包含一个可重用的组件库. 十博体育备用网址使用故事书独立地构建组件并对库进行编目. 故事书中添加了来自生态系统的有用插件.

  • 可访问性: 实时可访问性检查
  • 💥 行动: QA点击和点击互动
  • 🎛 旋钮: 交互式地调整道具以适应压力测试组件
  • 📝 Storysource:查看故事代码,将其粘贴到项目中
  • 📕 文档:自动从故事生成文档

SDS设计标记(a.k.a.,样式变量)随设计系统一起导出.

故事书 文档会自动从道具和注释中生成文档

没有什么工作

十博体育备用网址从设计系统社区了解到,前面提到的组件资源管理器是低效的. 构建自己的组件资源管理器非常昂贵. 试图“在你走的时候记录”会增加更多的写作开销(对十博体育备用网址的交付时间表来说是不现实的).

故事书为您提供了一个为组件构建的研讨会. 您可以通过将组件变体保存为事例来增量地记录文档. 使用故事书 文档,你可以自动生成合理的文档. 之后,您可以通过Markdown、MDX或内联注释添加丰富的散文.


测试组件

十博体育备用网址选择的工具

  • 🚥 CircleCI: 在十博体育备用网址提交时运行测试脚本的持续集成服务.
  • 彩色 连接到CI的云中可视化测试.

什么工作

设计系统既是真理的单一来源,又是 单点故障. 改进和漏洞以无情的效率传播到消费者应用程序. 因为SDS包含纯功能UI组件, 它们本质上是视觉的, 十博体育备用网址需要一个视觉测试策略.

视觉测试 验证用户实际体验到的内容——呈现的UI. 每次提交,十博体育备用网址都会截屏一致的云浏览器环境中的每个UI组件. 这使十博体育备用网址能够区别于以前的截图,在发布之前自动识别和修复bug.

没有什么工作

以前的项目使用Jest快照测试来捕获组件代码中的更改. UI, 不同的代码快照很嘈杂,容易出现误报,因此开发人员最终“接受所有”或完全忽略它们.

使用Enzyme或Cypress工具进行行为验证对于原子UI组件来说是多余的.

分配系统

十博体育备用网址选择的工具

  • 🎁 NPM 包托管和分发
  • ⚙️ 汽车 简化发布包到NPM的合并(与GitHub一起工作)

什么工作

没有正确的方法来分配设计系统. 像Lonely Planet和Wix这样的公司将他们的设计系统作为一个单独的包来运输, 而Airbnb和Atlassian是分开打包的.

SDS作为单个版本包分发,以简化发布过程.

没有什么工作

Lerna 被认为是帮助运送多个包裹从一个回购, 将其添加到堆栈中会引入更多的维护和工具复杂性. SDS的成分是低复杂度的. 没有日期转换器, 柱状图, 或者像意大利面条一样的依赖,所以十博体育备用网址不认为添加更多的工具值得额外的工作.


开始

SDS的成分用React写,它的故事也用React写 组件的故事格式,现已在 故事书5.2β.

安装和使用

NPM安装—保存@storybook/design-system
import React from ' React ';
import {Button} from ` @storybook/design-system `;

export default {title: 'Button'}
export const example = () => ;

在您自己的故事书中浏览SDS组件

一旦你添加了包裹,确保你的 .故事书/配置.Js会导入所有以in结尾的文件 .故事.js.

从'@storybook/react'导入{configure};

配置(需要.上下文('..,真的,/ / src”.故事.js /美元),模块);
在开发应用程序时浏览SDS

浏览SDS的故事书

克隆GitHub项目 然后开始故事书

纱 && 纱故事书

学习与十博体育备用网址

故事书设计系统 是由 凯尔弄, 多米尼克阮 (me!), 迈克尔Shilman 具有无价的可访问性贡献 吉米Somsanith. 它是在开放的环境下开发的,所以社区可以从十博体育备用网址的错误和成功中学习.

非常欢迎向SDS提供捐助. 作为一个贡献者, 您将了解来自社区的紧急设计系统最佳实践. 除了, 您可以演示故事书的前沿特性和工作流,而不需要自己设置它们. 十博体育备用网址尤其需要帮助定义面向开发人员的组件文档的最佳实践.

想学习如何建立一个设计系统?

我正在与人合作编写一个免费的10章设计系统教程 浓度 博客 汤姆·科尔曼他是故事书的维护者. 每周都会发布新的章节和代码示例. 跟我上 推特 得到更新.

导致故事书

故事书是结束的产物 700年社区提交者 它由一个 指导委员会 顶尖的维护者. 也感谢您的慷慨捐赠 开放的集体.

如果故事书使您的UI开发工作流更容易,请帮助故事书变得更好. 你可以贡献一个新特性,修复一个bug,或者改进文档. 加入十博体育备用网址 不和支持十博体育备用网址 开放的集体或者直接跳进去 Github.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

在故事书中设计系统

面向前端开发人员的流线型工作流
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自故事书团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10