我不是开发人员,我是设计师。我的问题是我试图弄清楚如何在 Storybook 故事中揭示更多信息,以便作为设计师我可以检查内容,而无需浏览器检查和筛选 html。
诸如按钮背景使用什么颜色、使用什么字体系列等小事情,这些小事情将使我检查 Storybook 与 Figma 的一致性的生活变得更加容易,这在 Storybook 中很高兴看到 - 代码扩展似乎没有帮助。
我的开发人员试图使其正常工作的消息:
“在顶部添加了主题和字体类下拉列表。它们被添加到根元素中,并且之前被硬编码。但是,在检查颜色/字体方面,每个元素可以分配特定的类/样式,我想不出任何东西除了在开发工具中检查它之外。”
我只是试图至少以某种方式揭示组件的内容(如果使用设计令牌),其名称和颜色的十六进制代码,或文本的字体系列。轮廓厚度是另一种很有帮助的。
这是我们发现的,但不再有效,尽管是理想的: https://storybook.js.org/addons/display-element-css
有 chrome 扩展可以帮助您完成这些任务。
CSS Peeper - 提供元素的几乎所有相关样式信息。 如果需要,请观看此介绍视频
WhatFont - 主要为您提供有关部分中使用的字体的信息。不显示背景颜色。
搜索更多此类扩展程序