故事书设计

如何将你最喜欢的设计工具与Storybook集成

加载
多米尼克阮
@domyen

想象一个从设计到开发的工作流是无缝的世界. 如果你能把设计成果和真正的UI实现联系起来, 你的团队可以更有信心更快地构建ui.

你不会再听到“这看起来对吗??、“你对此有设计吗??和“是否在任何地方都有记录。?你不需要在开发工具和设计工具之间来回切换.

本文展示了连接设计和开发的突破性Storybook插件. Storybook用户将能够解锁新的技术,帮助提升像素的完美性和自动同步UI文档.

为什么插件如此强大?

插件生态系统是Storybook受欢迎的主要原因之一. 插件给开发人员超能力来定制故事书和与他人共享定制. 随着Storybook社区的发展,每个人都能从中受益 节省时间的插件.

例如, GraphQL插件 帮助开发人员浏览GraphQL模式并从Storybook中查询他们的API. 的 a11y插件 在Storybook预览窗口中立即突出显示违反可访问性的情况. 的 i18n插件 协助国际化. 今天,十博体育备用网址将探索一些最具创新性的设计插件.

设计切换插件

设计交接是一个过程, 给了 静态图像、规范和原型供开发人员构建. 如果你曾经是交接的接收方,你就会知道交接可能会很混乱.

你不可避免地会在设计文件或混合版本中摸索. 一旦FINAL-FINAL-v3设计被发掘出来, 你在编辑器之间切换, 设计, 和Storybook来构建UI. 不要忘记在开发过程中需要考虑的设计中缺失的状态.

这些插件通过将设计工件嵌入到开发工作区中来简化设计切换过程. 这有助于在开发过程的早期解决表面设计的不一致性. 更重要的是,你会有一个持续的记录显示的组件设计,除了什么是实际建造.

Figma插件

Figma 是一个流行的协同UI设计工具,被Slack、推特和Dropbox的团队使用. 它允许多人在浏览器中同时进行同一设计. Figma插件描述了实现旁边的组件设计. 设计变更将自动反映在故事书中.

抽象的插件 (适用于Sketch和Adobe XD)

摘要 是一个版本控制工具草图和Adobe XD文件. 它帮助微软的团队, Spotify, 和Zendesk跟踪视觉变化,确保每个人都从相同的设计来源工作. 这个插件在Storybook插件面板中展示了草图的设计. 开发者可以利用Storybook测量距离、导出图像和颜色样本.


组件库文档插件

文档帮助团队重用现有的工作,而不是重新构建新的UI. 它在组件库和设计系统中具有双重重要性,因为它们的目标是广泛分布.

然而,文档通常需要比人们预期的更多的工作. 你会把时间花在像站点基础设施这样的非文档任务上, 争论技术作家, 而不是实际编写文档.

通过鼓励开发人员将UI组件变化保存为“故事”,Storybook已经提供了开箱即用的轻量级文档(尽管十博体育备用网址不这么叫它)。. 文档插件增强了这一核心功能,以帮助跨学科团队保持同步.

故事书文档

官方的 故事书文档 Addon为你的组件库或设计系统生成一个可定制的文档站点. 它继承了流行的信息插件,对Markdown、MDX和JSDoc语法提供了一流的支持.

在幕后,SB Docs使用行业标准的docgen工具从故事中构建API文档. 通过Figma或Sketch的iframe将设计工件嵌入到SB文档中(带有摘要).

InVision设计系统经理

InVision DSM是一个设计系统文档工具. 它帮助设计团队巩固UX原则, 用户界面设计, 使用指南, 令牌, 在一个共享的文档站点中有更多内容.

DSM允许你在DSM应用程序中查看Storybook组件以及设计(从草图中提取). 在将UI组件集成到应用程序之前,团队可以在设计系统的上下文中与UI组件实现进行交互.

赞贝林

赞贝林是一个设计切换工具,可以从设计文件中生成样式指南. 它自动提取像资产一样的元数据, 颜色, 以及设计文件中的度量,让开发者更容易遵守设计规范. 赞贝林允许你在他们的桌面应用程序中链接到Storybook组件.

Zeroheight

Zeroheight是一个用于设计系统的协作式风格指南生成器. 它在一个地方展示了设计、代码、品牌和文案文档. 用户可以使用WYSIWYG编辑器轻松地编辑该文档. 该插件将Storybook组件添加到Zeroheight中,与Sketch一起显示, Figma, 或Adobe XD设计.

Story2sketch的草图

对于设计人员和开发人员来说,UI组件是真实的来源. Story2sketch允许您从Storybook中的组件构建一个Sketch文件. 这有助于设计师保持他们的草图文件与最新的UI模式.

设计令牌

“设计令牌”是用于诸如排版、颜色、间距和动画等变量的样式常量. 令牌由设计系统分发,以便跨许多项目重用. 这个插件从样式表中提取设计标记文档以在开发过程中显示.


结论

将设计和开发连接起来有助于团队识别边缘情况 在发货之前 并迅速对缺陷做出反应 发货后.

无论是开发人员还是设计师都不能单独预测每个用户的交互和边缘情况. 迈克·泰森(Mike Tyson)曾打趣说:“每个人都有自己的计划,直到被打脸。.“确实, 这适用于创建ui,就像装箱一样,因为用户总是会打破你的假设. 这就是为什么十博体育备用网址需要与设计合作来构建更周到、更具防御性的ui.

学习如何构建插件

接下来是什么

当他们喜欢的工具协作使生活变得更简单时,每个人都会受益. Storybook是一个开源平台. 十博体育备用网址很高兴能与插件创建者一起构建更健壮的方法来集成和扩展平台.

🎨 如果你是一个设计工具感兴趣的插件,十博体育备用网址愿意学习和支持你. 与迈克尔·希尔曼和诺伯特·德·兰根聊天 不和谐聊天#维护频道.

Storybook由+800个开源贡献者维护,由顶级维护者组成的指导委员会指导. 如果你有兴趣投稿,请查看Storybook Github,创建一个问题,或提交一个pull请求. 加入十博体育备用网址吧 不和 闲谈,聊天. 上的捐赠 开放的集体.

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

介绍彩色GitHub行动

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