10 種圖表類型、24 種內(nèi)置模板類型、豐富的圖表樣式配置、自動生成圖表實現(xiàn)代碼。VChart Figma 插件的目標(biāo)是提供便捷好用 & 功能豐富 & 開發(fā)友好 的 figma 圖表創(chuàng)建能力。目前 VChart 插件功能仍在持續(xù)更新中，歡迎大家使用！
插件鏈接地址：https://www.figma.com/community/plugin/1387772732225258211/vchart
在 UI/UX 設(shè)計師的日常工作中，設(shè)計各種不同的數(shù)據(jù)呈現(xiàn)形式總是繞不開的工作內(nèi)容。尤其是在數(shù)據(jù)產(chǎn)品的原型設(shè)計中，常常需要用到許多不同類型的的數(shù)據(jù)圖表，像是柱狀圖、餅環(huán)圖、折線圖，以及各種表達特殊數(shù)據(jù)含義的數(shù)據(jù)圖表。
比如說像數(shù)據(jù)大屏的設(shè)計中，設(shè)計的核心目的就是通過各個面板中直觀的數(shù)據(jù)圖表來呈現(xiàn)數(shù)據(jù)的值與變化：
又或者是在各類后臺管理系統(tǒng)中，也需要提供不同的圖表信息來呈現(xiàn)統(tǒng)計的結(jié)果：
雖然數(shù)據(jù)圖表隨處可見，但是圖表本身設(shè)計并不那么方便。一個圖表本身往往由多個相互關(guān)聯(lián)的部件構(gòu)成，例如一個柱狀圖中通常包含了柱子、軸、圖例以及各種標(biāo)簽，這些部件之間由同一份數(shù)據(jù)映射而來，反映了一套相同的數(shù)據(jù)含義，并且包含了一種特定的布局形式。想要通過各個基礎(chǔ)圖形的組合創(chuàng)建圖表往往需要花費許多時間，而且生成的圖表也很難通過簡單的數(shù)據(jù)調(diào)整將一套統(tǒng)一的設(shè)計邏輯復(fù)用到其他的場景里頭。
Figma 官方并沒有提供圖表相關(guān)的組件，許多的第三方插件嘗試提供快速圖表創(chuàng)建的功能，但是這些插件通常只提供了少量的圖表類型以及圖表樣式的配置項，又或者沒有提供一套統(tǒng)一且和諧的圖表樣式，有些插件甚至沒有提供數(shù)據(jù)編輯以及圖表預(yù)覽的功能。
為了解決 UI 設(shè)計中圖表創(chuàng)建復(fù)雜 & 設(shè)計不統(tǒng)一的問題，VisActor 團隊推出了 VChart Figma 插件，可以幫助你快速生成各種不同類型、不同樣式的數(shù)據(jù)圖表。如果你也在為數(shù)據(jù)表格的設(shè)計而感到頭疼，那么不妨來使用 VChart Figma 插件試試吧！
通過 VChart Figma 插件，只需要簡單幾步就能創(chuàng)建一個數(shù)據(jù)圖表。
- 以分組柱狀圖為例，首先在 Figma 中打開 VChart 插件，選擇一個模板進入圖表編輯面板；
- 在圖表編輯面板中可以對當(dāng)前圖表的樣式以及圖表數(shù)據(jù)做實時的編輯，并且預(yù)覽圖表效果；
- 在畫布中創(chuàng)建一個新的 frame 元素或者選中一個已有的 frame 元素，并點擊下方的生成圖表按鈕，將圖表內(nèi)容生成到選中的 frame 元素中。
VChart 插件會自動適配 frame 元素的寬高，并將圖表元素填充到里頭。這樣一個基礎(chǔ)的分組柱狀圖就創(chuàng)建完畢啦，是不是很簡單呢？
除了能夠創(chuàng)建基礎(chǔ)的數(shù)據(jù)圖表，VChart 也提供了豐富的圖表編輯功能。
在底下的數(shù)據(jù)編輯面板中，你可通過上方的數(shù)據(jù)配置控件來指定數(shù)據(jù)的形式，并生成隨機數(shù)據(jù)。如果你希望展示特定的數(shù)據(jù)內(nèi)容，也可以直接在下方的表格中對數(shù)據(jù)進行編輯，通過增/刪行列以及編輯單元格的操作，將數(shù)據(jù)填充為你預(yù)期的內(nèi)容。
除了數(shù)據(jù)編輯，你可以通過右側(cè)的樣式編輯面板調(diào)整當(dāng)前圖表呈現(xiàn)的風(fēng)格。每種圖表都提供了特定的配置項，例如柱狀圖可以調(diào)整堆疊與方向，漏斗圖可以配置轉(zhuǎn)化與尖角等：
在圖表編輯的過程中，你也可以通過在左側(cè)的圖表欄中切換當(dāng)前應(yīng)用的模板類型，在中央的畫布預(yù)覽區(qū)域也可以拖拽圖表的位置以及調(diào)整圖表的大小。還有更多的圖表編輯操作等待你去發(fā)現(xiàn)！
為了方便，VChart 插件目前內(nèi)置了 24 種常用的圖表類型，包括柱狀圖、折線圖、餅圖等圖表類型中不同形式的圖表呈現(xiàn)。后續(xù) VChart 插件也將不斷補充更多的圖表模板以支持不同的數(shù)據(jù)可視化場景。
除了默認的內(nèi)置模板以外，你也可以自定義任意的圖表模板。在圖表編輯面板中做了任意的圖表編輯操作，將圖表調(diào)整為想要的形式之后，你可以點擊下方的保存模板按鈕并輸入模板名稱，將當(dāng)前的圖表保存為新的自定義模板。之后在每一次打開插件時，你都能夠重新使用這些已保存的模板：
需要注意的是，當(dāng)前版本模板通過 Figma 提供的 clientStorage 接口進行存儲。clientStorage 的數(shù)據(jù)只存儲在本機中，也就意味著自定義的模板目前無法跨機器使用。后續(xù) VChart 插件也會接入賬號系統(tǒng)來解決這一問題。
在實際的產(chǎn)品實現(xiàn)流程中，設(shè)計師筆下的精巧設(shè)計的圖表與真實運行的代碼往往存在一定的差別。開發(fā)者通常需要考慮技術(shù)選型以及實現(xiàn)成本，然后評估如何將設(shè)計稿中的圖表轉(zhuǎn)換為具體的代碼實現(xiàn)。而在這一過程中，由于不同圖表庫能力的限制，有時候很難保證圖表的百分百還原。
而在 VChart 插件中，這一困難也不再是問題！VChart 插件將基于當(dāng)前配置的圖表內(nèi)容，自動生成圖表的實現(xiàn)代碼，并且將實現(xiàn)代碼寫入圖表元素的描述信息中。
你可以在生成的圖表元素中，點擊元素名稱右側(cè)的 組件配置（Component configuration）按鈕，打開組件信息面板，查看相應(yīng)的代碼信息與鏈接信息：
生成的代碼內(nèi)容可以直接在 VChart Playground 中使用，并 100% 還原設(shè)計稿中的圖表內(nèi)容。借助于 VChart 圖表庫的跨平臺能力，無論是 React / Vue 等框架或者是 Node / 各類小程序平臺，都能夠使用 VChart 實現(xiàn)相應(yīng)的圖表需求。
同時 VChart 圖表庫還提供了完善的文檔內(nèi)容以幫助開發(fā)者快速熟悉 VChart 圖表庫的使用，如果開發(fā)者有任何不清楚的問題，也可以 OnCall 群提出自己的問題?？靵?VChart 看看吧！
VChart 站點：https://visactor.com/vchart/guide/tutorial_docs/VChart_Website_Guide
在實際的設(shè)計過程中，許多設(shè)計團隊會預(yù)先設(shè)計一套統(tǒng)一的設(shè)計規(guī)范，描述了圖表設(shè)計過程中的一些限制，例如圖表的色板、圖形的形狀、文字的樣式等。
目前 VChart 插件也在積極接入不同的設(shè)計體系中，通過嵌入的形式直接在 Universe Design、Semi Design 以及 Arco Design 自家的設(shè)計工具盒中提供 VChart 圖表生成的能力。
后續(xù) VChart 也會持續(xù)接入主題編輯的功能，允許用戶自定義圖表的主題風(fēng)格，并應(yīng)用到不同類型的圖表中。
VChart 插件目前迭代到了第二個版本，后續(xù)也將持續(xù)努力完善圖表編輯的各項功能，提供更加優(yōu)秀的用戶體驗。
最后的最后，歡迎各位設(shè)計師以及開發(fā)者來體驗使用 VChart Figma 插件！如果有任何體驗上的不滿或者功能上的需求也同樣歡迎通過插件評論或者在 VChart 反饋群中與我們進行溝通！
插件鏈接地址：https://www.figma.com/community/plugin/1387772732225258211/vchart
VChart 站點：https://visactor.com/vchart/guide/tutorial_docs/VChart_Website_Guide
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論！每天贏獎品
點擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計師平臺，提供獎品贊助 聯(lián)系我們
品牌形象設(shè)計標(biāo)準(zhǔn)教程
已累計誕生 726 位幸運星
發(fā)表評論 為下方 20 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓