10 種圖表類型、24 種內置模板類型、豐富的圖表樣式配置、自動生成圖表實現代碼。VChart Figma 插件的目標是提供便捷好用 & 功能豐富 & 開發友好 的 figma 圖表創建能力。目前 VChart 插件功能仍在持續更新中，歡迎大家使用！
插件鏈接地址：https://www.figma.com/community/plugin/1387772732225258211/vchart
在 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 站點：https://visactor.com/vchart/guide/tutorial_docs/VChart_Website_Guide
在實際的設計過程中，許多設計團隊會預先設計一套統一的設計規范，描述了圖表設計過程中的一些限制，例如圖表的色板、圖形的形狀、文字的樣式等。
目前 VChart 插件也在積極接入不同的設計體系中，通過嵌入的形式直接在 Universe Design、Semi Design 以及 Arco Design 自家的設計工具盒中提供 VChart 圖表生成的能力。
后續 VChart 也會持續接入主題編輯的功能，允許用戶自定義圖表的主題風格，并應用到不同類型的圖表中。
VChart 插件目前迭代到了第二個版本，后續也將持續努力完善圖表編輯的各項功能，提供更加優秀的用戶體驗。
最后的最后，歡迎各位設計師以及開發者來體驗使用 VChart Figma 插件！如果有任何體驗上的不滿或者功能上的需求也同樣歡迎通過插件評論或者在 VChart 反饋群中與我們進行溝通！
插件鏈接地址：https://www.figma.com/community/plugin/1387772732225258211/vchart
VChart 站點：https://visactor.com/vchart/guide/tutorial_docs/VChart_Website_Guide
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 20 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓