快速构建数据产品原型 —— 我用 VChart Figma 插件

快速构建数据产品原型 —— 我用 VChart Figma 插件

10 种图表类型、24 种内置模板类型、丰富的图表样式配置、自动生成图表实现代码。VChart Figma 插件的目标是提供 便捷好用 & 功能丰富 & 开发友好 的 figma 图表创建能力。目前 VChart 插件功能仍在持续更新中，欢迎大家使用！

插件链接地址 点这里~

VChart Figma 插件

在 UI/UX 设计师的日常工作中，设计各种不同的数据呈现形式总是绕不开的工作内容。尤其是在数据产品的原型设计中常常需要用到许多不同类型的的数据图表，像是柱状图、饼环图、折线图，以及各种表达特殊数据含义的数据图表。
比如说像数据大屏的设计中，设计的核心目的就是通过各个面板中直观的数据图表来呈现数据的值与变化：

又或者是在各类后台管理系统中，也需要提供不同的图表信息来暂时统计的结果：

虽然数据图表随处可见，但是图表本身设计并不那么方便。一个图表本身往往由多个相互关联的部件构成，例如一个柱状图中通常包含了柱子、轴、图例以及各种标签，这些部件之间由同一份数据映射而来，反映了一套相同的数据含义，并且包含了一种特定的布局形式。想要通过各个基础图形的组合创建图表往往需要花费许多时间，而且生成的图表也很难通过简单的数据调整将一套统一的设计逻辑复用到其他的场景里头。

Figma 官方并没有提供图表相关的组件，许多的第三方插件尝试提供快速图表创建的功能，但是这些插件通常只提供了少量的图表类型以及图表样式的配置项，又或者没有提供一套统一且和谐的图表样式，有些插件甚至没有提供数据编辑以及图表预览的功能。

为了解决 UI 设计中图表创建复杂 & 设计不统一的问题，VisActor 团队推出了 VChart Figma 插件，可以帮助你快速生成各种不同类型、不同样式的数据图表。如果你也在为数据表格的设计而感到头疼，那么不妨来使用 VChart Figma 插件试试吧！

一分钟上手

通过 VChart Figma 插件，只需要简单几步就能创建一个数据图表。

1. 以分组柱状图为例，首先在 Figma 中打开 VChart 插件，选择一个模板进入图表编辑面板；
2. 在图表编辑面板中可以对当前图表的样式以及图表数据做实时的编辑，并且预览图表效果；
3. 在画布中创建一个新的 frame 元素或者选中一个已有的 frame 元素，并点击下方的生成图表按钮，将图表内容生成到选中的 frame 元素中。

VChart 插件会自动适配 frame 元素的宽高，并将图表元素填充到里头。这样一个基础的分组柱状图就创建完毕啦，是不是很简单呢？

丰富的图表编辑能力

除了能够创建基础的数据图表，VChart 也提供了丰富的图表编辑功能。

在底下的数据编辑面板中，你可通过上方的数据配置控件来指定数据的形式，并生成随机数据。如果你希望展示特定的数据内容，也可以直接在下方的表格中对数据进行编辑，通过增/删行列以及编辑单元格的操作，将数据填充为你预期的内容。

除了数据编辑，你可以通过右侧的样式编辑面板调整当前图表呈现的风格。每种图表都提供了特定的配置项，例如柱状图可以调整堆叠与方向，漏斗图可以配置转化与尖角等：

在图表编辑的过程中，你也可以通过在左侧的图表栏中切换当前应用的模板类型，在中央的画布预览区域也可以拖拽图表的位置以及调整图表的大小。还有更多的图表编辑操作等待你去发现！

便捷的图表模板功能

为了方便，VChart 插件目前内置了 24 种常用的图表类型，包括柱状图、折线图、饼图等图表类型中不同形式的图表呈现。后续 VChart 插件也将不断补充更多的图表模板以支持不同的数据可视化场景。

除了默认的内置模板以外，你也可以自定义任意的图表模板。在图表编辑面板中做了任意的图表编辑操作，将图表调整为想要的形式之后，你可以点击下方的保存模板按钮并输入模板名称，将当前的图表保存为新的自定义模板。之后在每一次打开插件时，你都能够重新使用这些已保存的模板：

需要注意的是，当前版本模板通过 Figma 提供的 clientStorage 接口进行存储。clientStorage 的数据只存储在本机中，也就意味着自定义的模板目前无法跨机器使用。后续 VChart 插件也会接入账号系统来解决这一问题。

对开发者同样友好

在实际的产品实现流程中，设计师笔下的精巧设计的图表与真实运行的代码往往存在一定的差别。开发者通常需要考虑技术选型以及实现成本，然后评估如何将设计稿中的图表转换为具体的代码实现。而在这一过程中，由于不同图表库能力的限制，有时候很难保证图表的百分百还原。

而在 VChart 插件中，这一困难也不再是问题！VChart 插件将基于当前配置的图表内容，自动生成图表的实现代码，并且将实现代码写入图表元素的描述信息中。

你可以在生成的图表元素中，点击元素名称右侧的 组件配置（Component configuration）按钮，打开组件信息面板，查看相应的代码信息与链接信息：

生成的代码内容可以直接在 VChart Playground 中使用，并 100% 还原设计稿中的图表内容。借助于 VChart 图表库的跨平台能力，无论是 React / Vue 等框架或者是 Node / 各类小程序平台，都能够使用 VChart 实现相应的图表需求。

同时 VChart 图表库还提供了完善的文档内容以帮助开发者快速熟悉 VChart 图表库的使用，如果开发者有任何不清楚的问题，也可以 OnCall 群提出自己的问题。快来 VChart 看看吧！

• VChart 站点
• VChart 飞书反馈群

兼容不同的设计体系

在实际的设计过程中，许多设计团队会预先设计一套统一的设计规范，描述了图表设计过程中的一些限制，例如图表的色板、图形的形状、文字的样式等。

目前 VChart 插件也在积极接入不同的设计体系中，通过嵌入的形式直接在 Universe Design、Semi Design 以及 Arco Design 自家的设计工具盒中提供 VChart 图表生成的能力。

后续 VChart 也会持续接入主题编辑的功能，允许用户自定义图表的主题风格，并应用到不同类型的图表中。

写在最后

VChart 插件目前迭代到了第二个版本，后续也将持续努力完善图表编辑的各项功能，提供更加优秀的用户体验。

最后的最后，欢迎各位设计师以及开发者来体验使用 VChart Figma 插件！如果有任何体验上的不满或者功能上的需求也同样欢迎通过插件评论或者在 VChart 反馈群中与我们进行沟通！

• 插件链接地址
• VChart 站点
• VChart 飞书反馈群