wordpress动态导航,台州做网站优化,榆林网站建设vs0912,湖南 中小企业 网站建设快速构建数据产品原型 —— 我用 VChart Figma 插件 10 种图表类型、24 种内置模板类型、丰富的图表样式配置、自动生成图表实现代码。VChart Figma 插件的目标是提供 便捷好用 功能丰富 开发友好 的 figma 图表创建能力。目前 VChart 插件功能仍在持续更新中…快速构建数据产品原型 —— 我用 VChart Figma 插件 10 种图表类型、24 种内置模板类型、丰富的图表样式配置、自动生成图表实现代码。VChart Figma 插件的目标是提供 便捷好用 功能丰富 开发友好 的 figma 图表创建能力。目前 VChart 插件功能仍在持续更新中欢迎大家使用
插件链接地址 点这里~
VChart Figma 插件
在 UI/UX 设计师的日常工作中设计各种不同的数据呈现形式总是绕不开的工作内容。尤其是在数据产品的原型设计中常常需要用到许多不同类型的的数据图表像是柱状图、饼环图、折线图以及各种表达特殊数据含义的数据图表。 比如说像数据大屏的设计中设计的核心目的就是通过各个面板中直观的数据图表来呈现数据的值与变化 又或者是在各类后台管理系统中也需要提供不同的图表信息来暂时统计的结果 虽然数据图表随处可见但是图表本身设计并不那么方便。一个图表本身往往由多个相互关联的部件构成例如一个柱状图中通常包含了柱子、轴、图例以及各种标签这些部件之间由同一份数据映射而来反映了一套相同的数据含义并且包含了一种特定的布局形式。想要通过各个基础图形的组合创建图表往往需要花费许多时间而且生成的图表也很难通过简单的数据调整将一套统一的设计逻辑复用到其他的场景里头。
Figma 官方并没有提供图表相关的组件许多的第三方插件尝试提供快速图表创建的功能但是这些插件通常只提供了少量的图表类型以及图表样式的配置项又或者没有提供一套统一且和谐的图表样式有些插件甚至没有提供数据编辑以及图表预览的功能。
为了解决 UI 设计中图表创建复杂 设计不统一的问题VisActor 团队推出了 VChart Figma 插件可以帮助你快速生成各种不同类型、不同样式的数据图表。如果你也在为数据表格的设计而感到头疼那么不妨来使用 VChart Figma 插件试试吧 一分钟上手
通过 VChart Figma 插件只需要简单几步就能创建一个数据图表。
以分组柱状图为例首先在 Figma 中打开 VChart 插件选择一个模板进入图表编辑面板在图表编辑面板中可以对当前图表的样式以及图表数据做实时的编辑并且预览图表效果在画布中创建一个新的 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 飞书反馈群
