嗨，我是范米花兒，好久不見。最近在忙一件想做好久但一直沒做成的事兒：

搞一個(gè)自己的 Figma 圖表插件

插件功能簡(jiǎn)單介紹：

1. 圖表預(yù)覽、導(dǎo)出與編輯，支持自定義數(shù)據(jù)配置
2. 支持六種常見圖表類型：柱形圖、條形圖、折線圖、面積圖、餅圖、環(huán)形圖
3. 支持指標(biāo)卡配置，可根據(jù)數(shù)據(jù)動(dòng)態(tài)調(diào)整指標(biāo)卡內(nèi)容
4. 支持基于 DeepSeek 的 AI 對(duì)話，通過輸入自有 API Key 生成圖表
5. 支持通過 JSON 格式快速導(dǎo)入圖表數(shù)據(jù)
6. 集成 MCP 服務(wù)，支持與 AI 對(duì)話工具、搭配知識(shí)庫(kù)檢索，實(shí)現(xiàn)圖表生成

這篇文章算是作為插件實(shí)現(xiàn)各階段的記錄，分享一些心路歷程，從設(shè)計(jì)師的角度去講，沒有很多專業(yè)語言，也方便大家理解～

更多AI開發(fā)實(shí)戰(zhàn)：

階段 1：Figma 圖表組件

關(guān)注我的小伙伴可能知道，因?yàn)槲移綍r(shí)會(huì)有大量看板相關(guān)項(xiàng)目，所以做了一些 Figma 圖表組件，應(yīng)該也有很多小伙伴使用過。

但有一個(gè)問題：即便我已經(jīng)做了自動(dòng)布局并且增加不同數(shù)據(jù)狀態(tài)的組件，還是不可避免要根據(jù)實(shí)際業(yè)務(wù)，手動(dòng)調(diào)整圖表中的標(biāo)簽名稱、柱子數(shù)量、折線點(diǎn)數(shù)等等。

所以其實(shí)有些小伙伴問我"怎么改組件數(shù)據(jù)？"，我也只能回答"手動(dòng)調(diào)整"。同時(shí)數(shù)據(jù)的真實(shí)性也確實(shí)無法保證（有次被領(lǐng)導(dǎo)吐槽圖表看起來不真實(shí)）。

當(dāng)然，市面上確實(shí)有很多功能強(qiáng)大的圖表插件，但有個(gè)問題：不夠定制，生成后的樣式不是我想要的或者不符合現(xiàn)有設(shè)計(jì)風(fēng)格，所以還是得花時(shí)間再調(diào)整。

其實(shí)，前兩年就有位行業(yè)前輩建議我把圖表組件做成插件，但那時(shí)候完全沒有開發(fā)經(jīng)驗(yàn)又沒有 AI 幫忙，只能擱置了。

直到前段時(shí)間，因?yàn)橐粋€(gè)新項(xiàng)目的前期討論，夸張的時(shí)候一天量產(chǎn)將近 50 個(gè)頁(yè)面，都在不停地復(fù)制粘貼改圖表，需求推翻之后再重來一遍，不斷循環(huán)。這種大量重復(fù)且沒有價(jià)值的勞動(dòng)，實(shí)在令人煩躁。

所以為了解放勞動(dòng)力，6 月底，我決定用 AI（Cursor+Trae）試試，做一個(gè)符合我自己設(shè)計(jì)樣式的圖表插件。

這就是我插件之路的開始，開始瞎鼓搗。

階段 2：Figma 圖表插件，從 0 到 1

V1 版本界面如下：

在做插件之前，我啥也不知道，不知道做 Figma 插件要用什么技術(shù)來寫？有什么規(guī)范要求？如何實(shí)現(xiàn)畫布導(dǎo)出？又能在 Figma 里二次編輯？又如何按照我想要的設(shè)計(jì)樣式來導(dǎo)出？

帶著一堆疑問，我就開始了和 Cursor 的對(duì)話之旅，講到這里：小伙伴可能會(huì)問你的 Prompt 是怎么寫的？能分享一下嗎？

其實(shí)，啥也沒有。最開始就是純聊天（建議大家用 Ask 模式，省錢），比如“我想要做一個(gè)圖表插件，可以自定義數(shù)據(jù)，可以導(dǎo)出畫布?！?經(jīng)過多輪對(duì)話后，讓它為我總結(jié)一個(gè)合適的功能架構(gòu)，我再開啟 Agent 模式開發(fā)。

在做插件的過程中，也有在跟小伙伴們實(shí)時(shí)分享，所以這里總結(jié)一些 Q&A，希望對(duì)大家有幫助：

Q：我也想開發(fā)自己的工具，要不要先學(xué)習(xí)代碼或者閱讀 Figma 官方的文檔？

A：之前我發(fā)布過一個(gè)超長(zhǎng)的 Cursor 還原界面錄屏，也有很多小伙伴來問我這個(gè)問題。這里統(tǒng)一回復(fù)，因?yàn)槲冶究茖W(xué)的是軟件工程，所以也確實(shí)不是完全零基礎(chǔ)，但因?yàn)楫厴I(yè)后沒再?gòu)氖孪嚓P(guān)工作，其實(shí)也都“還給姥姥家了”。懂編程的話，當(dāng)然會(huì)少走很多彎路（也省錢），但也不至于說不會(huì)就做不成，要有耐心，對(duì)于我個(gè)人來講，帶著問題和解決方案再去學(xué)習(xí)理論知識(shí)，會(huì)有不一樣的視角。

Q：插件的界面是你自己設(shè)計(jì)好之后，再 AI 還原的嗎？

A：沒有，費(fèi)時(shí)間，還原效果也不好，不如直接寫。在前期溝通過程中，就選了開源的樣式庫(kù)，并且大多都是配置屬性、基礎(chǔ)組件也沒什么值得設(shè)計(jì)的。但是，針對(duì)插件左側(cè)預(yù)覽區(qū)域和導(dǎo)出的圖表樣式，因?yàn)槲冶旧碛薪M件，所以就順手通過 Figma MCP，復(fù)制了一份鏈接，做樣式的還原（其實(shí)效果也不咋地，還是需要對(duì)話二次調(diào)整的，比如各種元素顏色、間距等）

Q：用了 Figma 鏈接進(jìn)行還原，那我需要把所有的圖表組件類型都做一份嗎？

A：不需要，從上方的截圖，其實(shí)可以看出來，圖表容器有一些樣式（背景透明度、有標(biāo)題、圖表區(qū)域背景純白等）。針對(duì)容器，我做了一個(gè)通用的框架，而每次渲染只改圖表區(qū)域的內(nèi)容。圖表樣式也通過配置文件統(tǒng)一管理。

Q：插件是用什么方式實(shí)現(xiàn)的？

A：以下為 Cursor 官方回復(fù)+我人工備注：

1. 技術(shù)架構(gòu)

前端界面：使用 React + HTML 構(gòu)建用戶界面

Figma 插件本身只用純 HTML + JavaScript 方案也可以做，只是因?yàn)閳D表插件比較復(fù)雜，之后我還想拓展更多功能，所以才決定用 React

圖表預(yù)覽：集成 ECharts 庫(kù)進(jìn)行實(shí)時(shí)預(yù)覽

其它圖表庫(kù)也可以，ECharts 是因?yàn)楣驹谟?，而我也比較熟悉

Figma 集成：使用 Figma Plugin API 進(jìn)行原生圖形渲染

用大白話講，就是用文本、矩形、線條這些元素，讓 Figma 把圖表畫一遍

數(shù)據(jù)流：通過消息傳遞機(jī)制在 UI 和插件主邏輯間通信

這里小伙伴們可能看不懂，舉個(gè)例子：

比如在餐廳點(diǎn)菜，我們=UI 界面，服務(wù)員=消息傳遞機(jī)制，廚師=插件主邏輯

我們想吃什么 → 服務(wù)員傳話 → 廚師做菜 → 服務(wù)員端菜 → 吃到菜

實(shí)際流程：比如要?jiǎng)?chuàng)建一個(gè)柱形圖。

第一步：在插件界面中：我們輸入圖表標(biāo)題、數(shù)據(jù)、軸標(biāo)題等（想吃什么）

第二步：UI 收集我們輸入的所有數(shù)據(jù)（服務(wù)員寫菜單）

第三步：發(fā)送收集到的數(shù)據(jù)給插件主邏輯（服務(wù)員傳話）

第四步：主邏輯接收到數(shù)據(jù)后，開始創(chuàng)建圖表（廚師做菜）

第五步：創(chuàng)建成功，返回結(jié)果（吃）

2. 核心實(shí)現(xiàn)原理

雙重渲染機(jī)制

預(yù)覽層：在 UI 界面中使用 ECharts 渲染圖表，提供實(shí)時(shí)預(yù)覽和交互

其中只做靜態(tài)效果“圖片”展示也可以的，還相對(duì)簡(jiǎn)單，但我希望在插件中可以實(shí)時(shí)預(yù)覽、交互（圖例篩選、顯示數(shù)據(jù)浮窗、切換動(dòng)畫等）

導(dǎo)出層：使用 Figma API 創(chuàng)建原生圖形元素，確保導(dǎo)出的圖表是真正的 Figma 對(duì)象

3. 一致性保持機(jī)制

1. 配置統(tǒng)一管理：所有樣式配置集中在 config.js 中，顏色主題、字體設(shè)置、布局參數(shù)統(tǒng)一管理（可理解為 Figma 右側(cè)面板的樣式）
2. 樣式繼承體系：建立基礎(chǔ)樣式模板，各圖表類型繼承基礎(chǔ)樣式，同時(shí)允許特定圖表類型覆蓋部分樣式（可理解為 Figma 組件和變體）
3. 渲染同步：ECharts 預(yù)覽和 Figma 導(dǎo)出使用相同的配置對(duì)象，確保預(yù)覽效果與最終導(dǎo)出完全一致

Q：導(dǎo)出的圖表，可以二次編輯嗎？

A：根據(jù)上一條提到，導(dǎo)出的圖表是真正的 Figma 對(duì)象，所以自然可以編輯。

不過這里提一嘴：其實(shí)最開始，我想做導(dǎo)出后的圖表容器也有完整的自動(dòng)布局效果（就像我的圖表組件一樣），但是會(huì)有很多問題，比如元素圖層沒有正常嵌套或者丟失、為空等。同時(shí)也看了很多插件，都是通過組或者畫框來實(shí)現(xiàn)的，也沒做到自動(dòng)布局。所以我就放棄了。這里留一個(gè)疑問，如果有答案的小伙伴請(qǐng)聯(lián)系我～

階段 3：從 1 繼續(xù)，增加指標(biāo)卡區(qū)域和更多圖表類型

本階段效果演示如下：

從 0 到 1 是最難的，在能把柱形圖實(shí)現(xiàn)出來的前提下，剩下圖表類型補(bǔ)充其實(shí)是時(shí)間問題。

不過在豐富圖表之前，我最想做的就是增加指標(biāo)卡區(qū)域，因?yàn)樵趯?shí)際的看板設(shè)計(jì)中，經(jīng)常會(huì)搭配圖表突出一些重點(diǎn)指標(biāo)，比如最大值、最小值之類的，并且這些指標(biāo)可以根據(jù)圖表數(shù)據(jù)動(dòng)態(tài)調(diào)整，當(dāng)然也支持自定義指標(biāo)、顯示順序和單行數(shù)量調(diào)整。

這里遇到了一個(gè)問題：

因?yàn)樵黾恿酥笜?biāo)卡區(qū)域，而在樣式菜單下可以自定義導(dǎo)出高度，那么當(dāng)導(dǎo)出高度很小且有多行指標(biāo)卡時(shí)，可能會(huì)導(dǎo)致圖表壓縮到很難閱讀。

不過在實(shí)際工作中，不會(huì)出現(xiàn)極端情況，所以我將這部分的功能做了折中調(diào)整，在顯示指標(biāo)卡時(shí)，導(dǎo)出高度是固定變化的，每增加一行指標(biāo)卡，隨之增加高度。只有在不顯示指標(biāo)卡時(shí)，才允許自由調(diào)整。

至于圖表類型?：

這一階段，我先只增加了其它五種常見圖表類型：條形圖、折線圖、面積圖、餅圖、環(huán)形圖，及其系列圖表（分組、堆疊）

界面內(nèi)效果如下：

階段 4：AI 生成圖表

本階段效果演示如下：

到上一階段為止，其實(shí)我最開始做插件的需求已經(jīng)被滿足了，可以配置數(shù)據(jù)、可以導(dǎo)出圖表。

有了保底方案（底氣），我就開始腦洞大開了（其實(shí)還是懶）。

因?yàn)椴寮€是要我手動(dòng)配置呀，輸入圖表標(biāo)題、指標(biāo)名稱、輸入數(shù)據(jù)值、坐標(biāo)軸名稱等等。

如果大家有仔細(xì)看 V1 版界面截圖，會(huì)發(fā)現(xiàn)我有一個(gè)預(yù)設(shè)模板的功能，這里的模板其實(shí)是我根據(jù)常見業(yè)務(wù)場(chǎng)景做的（比如：財(cái)務(wù)、庫(kù)存、供應(yīng)商等等），能為我在繪制重復(fù)圖表時(shí)節(jié)省時(shí)間。但因?yàn)槊考铱蛻魳I(yè)務(wù)不同，其實(shí)還會(huì)進(jìn)行調(diào)整，治標(biāo)不治本，所以后期迭代就被我刪掉了。

那么既然插件已經(jīng)能渲染圖表并導(dǎo)出了，懶人就要懶到底，能不能讓 AI 幫我搞？我只輸入需求，或者圖表標(biāo)題之類的，它來幫我填充虛擬數(shù)據(jù)。

所以又開始了和 Cursor 的聊天之路，最后決定借助 DeepSeek 實(shí)現(xiàn)自然語言到圖表配置的轉(zhuǎn)換，同時(shí)為了之后發(fā)布到 Figma 社區(qū)大家也能用，所以我增加了 API Key 配置的入口（至于為什么用 DeepSeek，而不是其他模型？因?yàn)槲抑俺涞?10 塊錢，還沒用完，只用了 2 分）。

這里有個(gè)小瑕疵：官網(wǎng)的速度有點(diǎn)慢，生成大概需要等 5 秒鐘，所以插件我之后會(huì)做一個(gè)“自用版”，使用公司本地的模型，節(jié)約時(shí)間。

階段 5：使用 JSON 配置

本階段效果演示如下：

在實(shí)現(xiàn)階段 4 之后，其實(shí)我已經(jīng)很滿意了，足夠我的日常需求。也沒有計(jì)劃要做這部分的功能，那么為什么做了呢？因?yàn)橐淮螣o心插柳的合作。。。

一天中午，ChatBox 的負(fù)責(zé)人從 B 站找到我，希望我為他們做一次產(chǎn)品宣傳，當(dāng)然選題需要我來想。

正好當(dāng)時(shí)我在忙著調(diào)試插件，又看到他們界面中的知識(shí)庫(kù)入口。靈機(jī)一動(dòng)，我就在想既然已經(jīng)做到通過輸入需求描述來生成圖表了，那能不能再往業(yè)務(wù)上游走一走？

我們從業(yè)務(wù)到圖表可視化的流程大概是：

1. 收到業(yè)務(wù)需求文檔、各種形式的表格數(shù)據(jù)等
2. 根據(jù)這些內(nèi)容，給出數(shù)據(jù)指標(biāo)和分析方案（一部分根據(jù)以往經(jīng)驗(yàn)、一部分借助 ai）
3. 根據(jù)方案做可視化呈現(xiàn)

現(xiàn)在已經(jīng)完成了第三步，那前兩步呢？

可不可以借助 ChatBox 來實(shí)現(xiàn)需求文檔的分析和可視化建議？最后把確定結(jié)論再通過插件，生成符合我設(shè)計(jì)樣式的圖表，我還可以在插件里進(jìn)行二次調(diào)整。同時(shí)可以借助這種方式，把以往堆積在硬盤里的需求文檔，作為知識(shí)庫(kù)用起來，還不用本地部署（這種方式對(duì)于設(shè)計(jì)師來講，上手會(huì)更簡(jiǎn)單，也能更好的了解業(yè)務(wù)）。同時(shí)因?yàn)楸镜貎?chǔ)存，也可以保證文件保密性。

這樣一石二鳥，既可以做宣傳，我的插件也可以再豐富。

當(dāng)時(shí)只是有個(gè)想法，但我也不知道具體要如何實(shí)現(xiàn)從結(jié)論變成我插件可以理解的內(nèi)容，再渲染圖表。

所以，繼續(xù)開始和 Cursor 的聊天之路，最后選定最簡(jiǎn)單也最穩(wěn)定的方案：使用 JSON 配置。將結(jié)論按照插件中所需要的數(shù)據(jù)來輸出，我手動(dòng)復(fù)制 JSON 到插件中，就可以迅速生成符合樣式的圖表。

所以只要能夠生成 JSON，任何工具都可以的。這篇文章，也真的是為了插件總結(jié)！我怕小伙伴們看到最后，以為這是篇廣告文。

ChatBox 知識(shí)庫(kù)與插件生成演示如下：

在用了一段時(shí)間之后，我發(fā)現(xiàn) AI 功能更適合快速做前期原型。而 JSON 配置更適合準(zhǔn)確的數(shù)據(jù)場(chǎng)景，之后在實(shí)際項(xiàng)目中會(huì)更好用。就是這樣無心插柳，得到意外驚喜。

這篇文章寫到這里的時(shí)候，我有一個(gè)新想法，能不能像 Talk to Figma 一樣？這種方式其實(shí)最好的，不需要插件，可以直接把結(jié)論圖表在 Figma 中繪制。只是有一個(gè)問題，繪制的樣式不可控，如果大家用過，就知道我在說什么。

所以針對(duì)這一方案，我的插件更多是起到了控制樣式的作用。為了滿足這一點(diǎn)，就需要手動(dòng)來復(fù)制實(shí)現(xiàn)跨軟件“交流”。

階段 6：增加 MCP 服務(wù)

在上一階段中，已經(jīng)滿足了知識(shí)庫(kù)檢索生成圖表結(jié)論和插件中的圖表預(yù)覽、配置及導(dǎo)出，但唯一的不足就是需要手動(dòng)復(fù)制 JSON 到插件中，沒法做到兩個(gè)工具之間的“直接交流”。

所以最終選擇了最直接的方式：為插件寫一個(gè) MCP 服務(wù)來實(shí)現(xiàn)通信（將圖表配置信息通過本地橋接服務(wù)將配置發(fā)送到 Figma 插件，插件會(huì)自動(dòng)讀取配置并在界面上顯示圖表預(yù)覽）

演示如下：

關(guān)于插件

除了最新的 MCP 功能（因?yàn)檫€在本地），前五個(gè)階段的功能，我已經(jīng)發(fā)布到了 Figma 社區(qū)，但還在審核、、還在審核、、還在審核、、！

這里想問問，有沒有發(fā)布過的小伙伴？審核會(huì)按照最近更新時(shí)間重新排隊(duì)嗎。如果是這樣，那又要排 5-10 個(gè)工作日。

再見啦～