企业官网建设流程全解析

如何使用Storybook Design Token快速集成设计令牌到你的项目中

【免费下载链接】storybook-design-tokenDisplay design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.项目地址: https://gitcode.com/gh_mirrors/st/storybook-design-token

Storybook Design Token是一款强大的Storybook插件，能够帮助开发者从样式表和图标文件中自动生成设计令牌文档，并在浏览器中实时预览设计令牌的变化。通过自定义文档块，你可以轻松将设计令牌集成到Storybook Docs页面，实现设计系统与开发流程的无缝衔接。

为什么选择Storybook Design Token？

设计令牌（Design Token）是现代设计系统的核心组成部分，它们将设计决策转化为可重用的代码变量，确保产品在不同平台和组件间保持视觉一致性。Storybook Design Token插件通过以下特性简化设计令牌的管理与使用：

• 自动文档生成：从CSS、SCSS、LESS等样式文件中提取注释标注的设计令牌，自动生成可视化文档
• 多视图展示：支持卡片视图和表格视图两种展示模式，满足不同场景的查阅需求
• 实时预览：在Storybook界面中直接预览颜色、字体、间距等设计令牌的实际效果
• 灵活配置：可自定义显示选项、注入样式、设置默认视图等，适应不同项目需求

图：Storybook Design Token提供的插件面板和文档块功能展示

快速开始：3步集成设计令牌

1. 安装依赖

首先，通过npm或yarn安装Storybook Design Token插件：

yarn add --dev storybook-design-token # 或 npm add --save-dev storybook-design-token

2. 配置Storybook

在.storybook/main.js文件中添加插件：

export default { addons: ['storybook-design-token'] };

3. 标注设计令牌

在你的样式文件中，使用特殊注释块标注设计令牌的类别和展示方式。以下是一个CSS示例：

:root { /** * @tokens Colors * @presenter Color */ --b100: hsl(240, 100%, 90%); --b200: hsl(240, 100%, 80%); --b300: hsl(240, 100%, 70%); /** * @tokens Typography * @presenter FontSize */ --font-size-s: 0.75rem; --font-size-m: 0.875rem; --font-size-l: 1rem; }

@tokens定义类别名称，@presenter指定展示方式。支持的展示方式包括Color、FontSize、Spacing、Border等多种类型。

探索插件面板功能

启动Storybook后，你会在界面中看到一个新的"Design Tokens"面板。这个面板提供了直观的设计令牌管理界面：

卡片视图与表格视图切换

插件支持两种浏览模式，可通过右下角的切换按钮自由切换：

• 卡片视图：以视觉卡片形式展示设计令牌，适合快速浏览和比较
• 表格视图：以表格形式展示设计令牌，适合查看详细信息和复制值

图：卡片视图展示颜色设计令牌

图：表格视图展示颜色设计令牌

分类标签导航

设计令牌会根据你在样式文件中定义的类别自动分组，通过顶部标签可以快速切换不同类别的设计令牌，如颜色、排版、动画等。

在文档页面中集成设计令牌

除了插件面板，Storybook Design Token还提供了文档块组件，让你可以在Storybook Docs页面中无缝集成设计令牌文档。

使用DesignTokenDocBlock

创建一个MDX文档文件（如colors.stories.mdx），并添加以下代码：

import { DesignTokenDocBlock } from 'storybook-design-token'; <DesignTokenDocBlock categoryName="Colors" viewType="card" />

categoryName指定要展示的设计令牌类别，viewType可设置为"card"或"table"。

图：在Storybook Docs页面中展示颜色设计令牌

展示排版设计令牌

类似地，你可以展示排版相关的设计令牌：

<DesignTokenDocBlock categoryName="Typography" viewType="table" />

图：在Storybook Docs页面中展示排版设计令牌

高级配置选项

Storybook Design Token提供了多种配置选项，帮助你定制插件行为以满足项目需求。

设置默认标签

在.storybook/preview.js中配置默认显示的标签：

export default { parameters: { designToken: { defaultTab: 'Colors' } } };

自定义可见标签

指定只显示特定的标签：

export default { parameters: { designToken: { tabs: ['Colors', 'Typography'] } } };

注入自定义样式

注入必要的样式（如字体）到设计令牌预览中：

export default { parameters: { designToken: { styleInjection: '@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");' } } };

总结

Storybook Design Token是连接设计系统与开发实现的桥梁，它通过自动化文档生成和直观的预览界面，大大简化了设计令牌的管理和使用流程。无论是小型项目还是大型设计系统，这款插件都能帮助团队保持设计一致性，提高开发效率。

现在就尝试将Storybook Design Token集成到你的项目中，体验设计令牌管理的便捷与高效！

【免费下载链接】storybook-design-tokenDisplay design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.项目地址: https://gitcode.com/gh_mirrors/st/storybook-design-token