VChart

VChart是字节跳动开源的一款快速生成图表的Figma插件，通过简单几步即可快速生成各种类型和样式的数据图表。插件提供丰富的图表编辑功能，包括实时数据和样式编辑、模板保存和自定义。自动生成图表实现代码，确保设计和开发的一致性。兼容多种设计体系，满足各种设计需求。使用 VChart，简化您的图表设计流程，提高效率！

核心特点：

• 快速图表生成：通过简单几步即可创建各种数据图表，如分组柱状图、折线图、饼图等。插件会自动适配 frame 元素的宽高，并填充图表元素。
• 丰富的图表编辑能力：提供强大的图表编辑功能，包括实时编辑图表数据和样式。用户可以在数据编辑面板中指定数据形式、生成随机数据或编辑特定数据内容，并通过样式编辑面板调整图表风格。
• 便捷的图表模板功能：内置24种常用图表类型，支持自定义图表模板。用户可以保存自己调整过的图表模板，在每次打开插件时重新使用。
• 对开发者友好：自动生成图表的实现代码，并将其写入图表元素的描述信息中。开发者可以直接使用这些代码在 VChart Playground 中实现设计稿中的图表内容，确保图表的百分百还原。
• 兼容不同的设计体系：积极接入不同的设计规范，并支持用户自定义图表的主题风格，满足各种设计需求。

应用场景：

• UI 设计：设计师可以快速创建和调整数据图表，提升设计效率。
• 数据可视化：使用丰富的图表模板和编辑功能，实现多样化的数据展示。
• 团队协作：设计师和开发者可以通过自动生成的代码，实现设计和开发的一致性。

一分钟上手教程：

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

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

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