用 NB Charts 插件快速畫圖表｜Figma 高效製圖神器教學

在 Figma 裡畫圖表還在手動對齊、自己畫線？拜託別再折磨自己了。

NB Charts 插件讓你能快速生成各種常見圖表，從折線圖到長條圖、雷達圖通通支援，

還提供繁體中文介面，一鍵生成、細節自訂。

這篇文章會手把手教你從安裝開始，到實際繪圖與細節調整，

搭配圖片與 Gif 示意，保證一次看懂、不再瞎忙。

無論你是設計師、PM 還是單純想把報表畫得漂亮點的人，都可以立刻上手！

插件特點

• 支援繁體中文，語言無障礙

• 一鍵快速生成圖表

• 圖表類型多樣，細節可全面調整

• 可繪製圖表類型如下：
  • 折線圖（免費）
  • 柱狀圖 / 橫柱狀圖（免費）
  • 餅圖 / 三維餅圖
  • 雷達圖
  • 儀表板
  • 散點圖
  • 氣泡圖
  • 玉珏圖
  • 地圖
  • 蠟燭圖（K 線圖）

1. 插件安裝方法

1.1 安裝步驟

1. 點選 Figma 左上方「Resources」選單

   

2. 輸入關鍵字「NB」搜尋插件

3. 點選 NB Charts 的「Run」安裝插件

4. 選擇「繁體中文」版本，即可使用

   

2. 如何製圖？

以下以折線圖為例說明：

2.1 啟動插件

• 可用快捷鍵開啟：Mac 系統為 Command + /，Windows 系統為 Control + /

  

2.2 設定圖表細節與資料

如果不想手動設置各項圖表細節、數據，也可以跳過此步驟，使用插件的預設值，依據「2.3 插入圖表」執行即可。

2.2.1 基本資訊

• 可調整圖表左側與底部的文字顯示與樣式：

  • 顯示/隱藏

  • 字級大小與顏色

  • 文字與圖表距離
    
    
    

2.2.2 豎線與橫線

• 控制圖表的背景輔助線：

  • 是否顯示

  • 線條樣式（實線/虛線）

  • 線條寬度、數量、顏色、不透明度

    

2.2.3 數據設定

• 在「數據」選單中可設定資料來源與視覺表現：

  • 數據生成方式（手動輸入 / 隨機產生）

    
    
    
    

  • 線條樣式（彎曲度、寬度、顏色、不透明度）

    

     

  • 面積圖填色、透明度設定

    
    
    
    

  • 小圓點標記：直徑、顏色、描邊

    
    
    
    

  • 可新增/刪除數據組（點選加號或垃圾桶）

    

註：繪圖完成後，仍可透過右側 Figma 面板再次微調，數值不會自動重置。

2.3 插入圖表

1. 在 Figma 工作區中繪製一個矩形（如需 600x400px 圖表，就畫一樣大小的矩形）

2. 選取矩形後，在插件視窗點選「自動繪製」

   
   
   

3. 小提醒與常見問題

• 若無法生成圖表，請確認是否已選取矩形物件。
• 若插件顯示異常，建議重新整理 Figma 頁面。
  
  

結語

NB Charts 是設計師與簡報製作者的製圖神器，

無需切換到 Excel 或 Google Sheets，

直接在 Figma 裡就能完成漂亮的圖表設計。

現在就打開 Figma，試著用 NB Charts 讓你的資料用圖表的方式呈現吧。