Storybook 令牌

简化 Style Dictionary 友好型令牌的创建

⚛️ React/JSX 支持

以下是使用此附加组件的潜在工作流程

• 📝 在 Storybook 中创建故事
• 🧺 使用附加组件从每个故事中提取原始设计令牌
• 🏷 将原始设计令牌复制到 Style Dictionary
• 📦 在 Style Dictionary 中格式化设计令牌
• 🚢 发布格式化的设计令牌供其他人使用

为什么？

1. 用于文档（无需在 Style Dictionary 之间来回切换）。

2. 允许团队像往常一样构建 UI 组件，将底层的、不可知的令牌复制粘贴到 Style Dictionary 等工具中，然后将它们格式化以与其他团队共享。

这颠覆了设计令牌管道的传统方法。与其先生成令牌，然后在 UI 库中使用它们，不如先创建 UI 库，然后提取令牌。

简而言之，您可以反向设计设计令牌管道。

这可能不是理想的用例或最佳实践，但在某些情况下可能会有所帮助（例如，一个只有 UI 组件库、没有正式的设计系统团队、并且希望快速启动 Style Dictionary 管道的团队）。

如何使用？

单击工具栏中标有“提取令牌”的“画笔”。

这将显示提取的设计，您可以将其复制粘贴到 Style Dictionary 中。