故事书设计

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

加载
多米尼克阮
@domyen

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

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

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

为什么插件如此强大?

插件生态系统是《十博体育备用网址》受欢迎的主要原因之一. 插件为开发者提供了自定义Storybook和与他人共享自定义的超能力. 随着故事书社区的发展,每个人都能从中受益 节省时间的插件.

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

设计切换插件

设计交接的过程是, 给了 供开发人员构建的静态图像、规格和原型. 如果你曾经经历过这种交接,你就会知道这可能会很麻烦.

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

这些插件通过在开发工作区中嵌入设计工件来简化设计切换过程. 这有助于在开发过程的早期解决设计不一致的问题. 更重要的是,在实际构建的组件之外,您将有一个显示组件设计的持续记录.

Figma插件

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

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

摘要 是Sketch和adobexd文件的版本控制工具. 它帮助了微软的团队, Spotify, Zendesk跟踪视觉变化,确保每个人都从相同的设计来源工作. 插件在故事书插件面板中展示了Sketch的设计. 开发人员可以在Storybook中轻松地测量距离、导出图像和采样颜色.


组件库文档插件

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

然而,编写文档通常比人们预期的要多. 您最终会把时间浪费在站点基础设施等非文档性任务上, 争论技术作家, 维护,而不是写文档.

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

故事书文档

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

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

英视设计系统经理

英视DSM是一个设计系统文档编制工具. 它帮助设计团队巩固UX原则, 用户界面设计, 使用指南, 令牌, 更多信息请访问共享文档站点.

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

赞贝林

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

Zeroheight

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

Story2sketch的草图

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

设计令牌

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


结论

连接设计和开发可以帮助团队识别边缘案例 在发货之前 并对缺陷做出快速反应 发货后.

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

学习如何构建插件

接下来是什么

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

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

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

这篇文章对你有帮助吗?

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

4,435 开发人员和计数

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

加入故事书和彩色后面的团队. 构建被成千上万的开发人员用于生产的工具. Remote-first.

视图的工作

受欢迎的文章

介绍着色GitHub行动

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