在故事书中设计系统

面向前端开发人员的流线型工作流

加载
多米尼克阮
@domyen

上周有超过15000人退房 为开发人员设计系统, a 我共同撰写的关于前端基础设施支撑设计系统的免费指南.

该指南的惊人流行表明了主流设计系统在开发者中的地位. 布拉德·弗罗斯特那本影响深远的书出版后短短三年 原子设计,设计系统如 Shopify北极星, IBM碳, Salesforce闪电, Airbnb月球 现在为无数工程师的前沿实践提供动力.

为开发人员设计系统 研究最聪明的团队如何大规模设计系统,以及为什么他们使用他们使用的工具. 本文总结了指南中概述的基本工作流.

十博体育备用网址希望拥有的蓝图

今年早些时候,故事书的维护者和我着手构建一个 为故事书设计系统. 是的,一个用于构建设计系统的工具的设计系统. 当时,关于这一领域前端基础设施的信息还很少. 尽管很多设计系统都是开源的, 开发人员仍然需要仔细研究代码,以了解事情是如何工作的.

幸运的是,作为故事书的维护者, 十博体育备用网址处于从整个故事书社区(包括数千个项目)中研究最佳实践的理想位置.

研究发现了一个五步骤的工作流程,以平衡低设置成本, 节省时间的自动化, 方便的开发人员体验. 本文以删节的形式呈现,以便让您从头开始了解工程设计系统.

构建和维护一个系统并不是一个独立的任务. 这是一组必须相互补充的工作.

1. 独立构建UI组件

Design systems aren’t apps; they ship only production UI components. 使用 故事书 作为一个“工作台”,在消费者应用程序之外独立构建UI组件. 然后使用流行的插件定制故事书的核心功能,以满足您的团队的需求:

  • 验证交互的操作. 当一个动作(点击)在故事书中获得UI反馈, 徘徊, 等)在一个交互元素上执行,如按钮或链接.
  • 源代码查看源代码. 查看故事书 UI中的底层代码,了解它是如何工作的,并将其粘贴到您的项目中.
  • 探索组件道具的旋钮. 在故事书 UI中动态地与组件道具交互. 这有助于设计系统的创建者通过调整旋钮来对组件进行压力测试.
看到在 推特, Dropbox, IBM

2. 回顾以达成共识并收集反馈

设计系统影响组织中的每一个产品和功能. 像这样, 它们要求开发人员之间保持一致, 设计师, 产品经理, 和其他学科.

实现一致性的最有效方法是将故事书作为CI过程的一部分定期在线发布. 例如,使用 Netlify, 现在, or S3. 这样,所有涉众都有一个通用的UI实现参考点——所有这些都不需要接触代码或命令行.

看到在 推特, Dropbox, IBM

3. 测试以防止UI错误

作为许多应用程序的依赖,设计系统是一个 单点故障. 在常见组件中引入UI bug会导致项目间的重大倒退. 通过自动化可视化(e.g., 彩色)和单元测试(e.g., 开玩笑)在您推入代码时运行.

通过测试套件运行代码可以让您的团队确信您正在向所有客户端应用程序交付持久代码.

看到在 BBC, Salesforce,艺术

4. 加快采用的文件

很明显,文档是无价的. 人们还应该如何学习你的设计系统? 但撰写文档通常是最后的优先事项.

通过自动生成“最小可行文档”让你的团队更轻松,你可以在以后定制这些文档. 与 故事书文档 插件你开发故事正常,并获得免费的UI文档.

看到在 探索,GitHub, Jetbrains

5. 将设计系统分发给消费者项目

现在您的UI组件是持久性的, 同行评议, 回归测试, 和记录, 您需要一种机制来将它们分发给其他团队.

设计系统通过包管理器(e.g., npm). 聪明的团队使用类似这样的发布管理工具进一步简化了这个过程 汽车 它可以让你无缝地从GitHub工作流发布新版本.

如在Atlassian, GovUK, Mozilla所见

随着时间的推移储蓄

产品变了,用户变了,设计系统也变了. 工作流是用于交付良好工作的标准化可重复过程. 在设计系统的生命周期中,团队会发布无数的更新. 掌握工作流程可以使不断的改进令人满意和无痛.

更重要的是,简化开发人员对常见任务的体验 现在 能节省大量的时间 未来.

从数字上看,代码重用具有加速项目的潜力 42–81% 提高生产力 40%. 设计系统帮助公司重用 用户界面 code. 难怪它们在开发社区中越来越受欢迎.

我希望将常识性策略提炼为实用的工作流,帮助您创建自己的蓬勃发展的设计系统. 让这成为你的起点.

👉 阅读完整的指南 为开发人员设计系统


了解更多

为开发人员设计系统 是由 浓度 多米尼克·阮(多米尼克阮,也就是我)是合著者!)和汤姆·科尔曼. InVision的设计前瞻性基金 提供资金来启动这个指南(谢谢!). 想从构建故事书的人员那里了解更多关于故事书工作流的信息? 检验这些文章:

  • 🔄 令人愉快的故事书的工作流程: 十博体育备用网址调查了来自Squarespace的开发商, 发现网络, 和Major League Baseball来寻找一个精简的UI开发工作流
  • 📚 UI组件的剧本: 一个5步指南设计和工程前端与组件.
  • 用故事书进行视觉测试: ui bug比以往任何时候都更烦人和昂贵. 学习如何在Slack进行团队合作, 孤独星球, 和沃尔玛测试现代ui的外观以节省时间.

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

对pull请求进行视觉检查

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