---
title: "用 Figma 画饼图、柱状图和折线图：哪些能手画，哪些该交给插件"
excerpt: "Figma 没有插入图表的按钮：饼图、环形图用椭圆的 Arc 手柄画，简单柱状图用矩形加自动布局；要导入 Excel、CSV 真实数据或画折线图、雷达图，再用 Chart generator、i Charts Generate 等插件。"
canonical: https://plugmate.figmod.top/blog/figma-charts
---

# 用 Figma 画饼图、柱状图和折线图：哪些能手画，哪些该交给插件

「Figma 怎么画饼图」「环形图怎么做」「Dashboard 里的柱状图有没有插件」——做后台、数据大屏、运营报表的设计师迟早会碰到图表。先说清楚一件事：**Figma Design 里没有「插入图表」这种按钮**，但它自带的几样基础能力已经够画饼图、环形图和简单柱状图；真正需要插件的，是「要用真实数据」「图表类型多」「数据要反复改」这几种情况。

先说结论：

- **饼图、环形图、半圆进度条**：用自带的 **Arc**（椭圆的弧形手柄），不用装任何东西。
- **简单柱状图**：矩形放进**水平方向的自动布局**里，底部对齐，改高度就是改数值。
- **折线图**：手画只能用钢笔工具一个点一个点描，数据一改就要重画，建议直接用插件。
- **有真实数据（Excel、CSV）、要很多种图表**：用 [Chart generator](/plugin/plugin-484)、[Charts](/plugin/plugin-13)、[i Charts Generate](/plugin/plugin-171) 这类插件。
- **付费计划用户**：Figma 官方的 agent（公开测试中）可以把 CSV 生成可编辑的图表，下文会写清它的边界。

自带部分来自 Figma 官方帮助：[Arc tool: create arcs, semi-circles, and rings](https://help.figma.com/hc/en-us/articles/360040450173-Arc-tool-create-arcs-semi-circles-and-rings)、[Turn an ellipse into an arc](https://help.figma.com/hc/en-us/articles/31130312631191-FD4B-Turn-an-ellipse-into-an-arc)、[Guide to auto layout](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout)，以及官方介绍页 [CSV to Chart Generator](https://www.figma.com/solutions/csv-to-chart-generator/)。插件部分只写觅件详情里能核对的信息，没有在你的文件里代跑过界面；打开后跟说明不一致，以你看到的为准。

## 先想清楚：Figma 里的图表都是「画出来的」

不管手画还是插件生成，落到画布上的都是普通的形状、矢量和文字图层。这意味着：

- **好处**：可以像改任何图层一样改颜色、圆角、字体，套用你的颜色样式或变量。
- **边界**：图表和数据之间**没有实时联动**。数字变了，要么手动改形状，要么让插件重新生成（有些插件能读回已有图表的数据，下面会标出来）。
- **交付开发时**：Figma 里的图表是视觉稿，开发一般会用图表库重新实现。标清楚数值、配色和坐标轴规则，比交一张「好看的图」更有用。

## 1. 饼图和环形图：用自带的 Arc

官方步骤：

1. 用 **Ellipse** 工具画一个圆（快捷键 O）。
2. 鼠标悬停在圆上，右侧会出现一个 **Arc** 手柄，这个位置是起点（0）。
3. 按住 Arc 手柄上下拖，圆就会缺一块。提示框会显示 **Sweep** 百分比：往上拖是正值，往下拖是负值。
4. 这时会出现三个手柄：
   - **Sweep**：圆被填满的比例，用百分比表示。
   - **Start**（中间带圆点的手柄）：弧形从哪里开始，可以沿着圆拖动。
   - **Ratio**（圆心处的手柄）：把实心圆变成圆环，拖动可以调圆环的粗细。

官方课程里还写明，这三个值也会出现在右侧边栏的 **Appearance** 区域，可以直接输入数字，不用靠手拖。

**想要一个闭合的圆环**（官方写法）：先拖 Sweep 做出扇形，再拖 Ratio 调到想要的粗细，最后把 Sweep 拖回起点，圆环就闭合了。

### 按数据拼一个饼图（顺手的做法，不是官方步骤）

假设三项占比是 55%、25%、20%：

1. 画好第一块：Sweep 填 55。
2. 复制一份，Sweep 改成 25，再把 Start 拖到（或填到）第一块结束的位置。
3. 再复制一份做第三块，Start 接在第二块后面。
4. 每块换一个颜色，要做环形图就给每块调同样的 Ratio。

几个容易踩的点：

- **起点在 3 点钟方向**：官方说初始手柄在圆的右侧，值为 0。如果想让第一块从 12 点开始，要把 Start 往回调四分之一圈，不要直接旋转图层——旋转后外框会变斜，和旁边的图例、标签不好对齐。
- **外框不会跟着变小**：官方课程写明，改 Arc 属性是**非破坏性**的，外框仍是整个圆的大小。这对拼饼图反而是好事：几块扇形外框完全重合，直接叠在同一位置就对齐了。
- **别急着 Flatten**：官方说 Flatten（拼合）是破坏性操作，拼合后就不能再调 Sweep 和 Ratio。图表还可能改数据，就保留成椭圆。

同样的方法还能做**半圆仪表盘**（Sweep 50，配合 Ratio）和**环形进度条**（一个浅色完整圆环垫底，上面叠一个按进度设 Sweep 的圆环）。

## 2. 简单柱状图：矩形 + 自动布局

柱状图本质上就是一排底边对齐、高度不同的矩形，自动布局刚好负责「排整齐」：

1. 画好几根同样宽度的矩形，全部选中。
2. 按 **Shift A** 或在右侧边栏点 **Add auto layout**。官方说 Figma 会尝试判断你想要的方向，如果没选成横向，切换到 **Horizontal**。
3. 在对齐方式里选**底部对齐**，让所有柱子站在同一条底线上；用 **Gap** 调柱子之间的距离。
4. 改某根柱子的高度就是改数值。想加一根，复制一根进去，自动布局会自己排好。

边界：坐标轴、刻度线、数值标签都要自己加；柱子一多、数据一多，手改高度既慢又容易错，这时候换插件更省事。

## 3. 折线图：手画不划算

Figma 没有折线图工具，手画只能用钢笔工具逐个落点，数据变了就要重新描。只做一张 Dashboard 里的示意小图（Sparkline）还行；要对得上真实数据，直接看下面的插件。

## 4. 官方 agent：付费计划可以用 CSV 生成图表

Figma 官方介绍页写明：在 Figma Design 里把 CSV 文件拖到画布上，或把数据粘进提示词，说清要什么图、用哪几列，agent 就会在画布上生成**可编辑的 Figma 图层**；支持柱状图、折线图、饼图、面积图，可以接入你的设计库，用现有的颜色和组件样式。

先看清边界（都来自官方页面）：

- **只在付费计划里提供**，官方说入口在 Figma Design 左侧导航栏。
- **目前是公开测试**，测试期间不消耗 AI 额度；之后怎么计费以官方为准。
- 生成的仍然是普通图层，**不是和数据联动的图表**；数据更新后要重新提示或手动改。

免费计划用户，或者想要雷达图、K 线图、散点图这类更多类型，还是得靠插件。

## 5. 什么时候装插件，装哪个

觅件插件库「📈 图表」分类目前收录 21 款插件：其中 15 款用来画图表或图表元素（含折线曲线、渐变背景这类辅助工具），5 款生成表格，1 款把设计稿转成 PPT。21 款里觅件标为付费的有 2 款；另有 3 款标免费但详情里写了 Pro 版功能。数据来自觅件插件库（2026-10-20）。

下面的介绍来自觅件插件详情。标**免费**的，安装时若提示与「免费」不符（比如部分图表要 Pro、需要账号），**以安装时提示为准**。

### 常用图表一次搞定

#### [Chart generator｜图表](/plugin/plugin-484)

作者 Designbase。觅件标免费。

详情写明：支持柱状图（单系列、分组、堆叠）、单系列和多系列折线图、饼图和环形图（可调圆环粗细），还有雷达图、Sparkline 和 K 线图；数据可以手动输入、批量粘贴或随机生成；能改颜色、透明度、标签、坐标轴和图例；生成前可以先预览。

适合：Dashboard、报表这类一屏要好几种图的界面。

#### [Charts丨图表](/plugin/plugin-13)

作者 Sam Mason de Caires。觅件标免费。

详情写明：支持折线图、面积图、饼图、环形图、散点图和柱状图；可设置数据点数量、最大值、最小值；**选中了 Frame 时图表直接生成在 Frame 里**，没选中则生成在画布 0,0 位置。

适合：只要「像样的示意数据」，不在乎具体数值的原型。

#### [Data Vision Chart丨数据生成图表可视化工具](/plugin/plugin-258)

作者 KingweiCheung。觅件标免费，但详情写明更复杂的图表类型和数据处理需要 Pro 版，**以安装时提示为准**。

详情写明：基础版支持折线图、柱状图、环形图、饼图四种，可在插件里直接增改数据行、设置尺寸；生成结果是一个 Frame；界面支持简体中文、繁体中文等多种语言。

适合：不想看英文界面、只需要四种基础图的设计师。

### 要接设计系统、要复用已有图表

#### [i Charts Generate丨图表](/plugin/plugin-171)

作者 Tutu。觅件标免费。

详情写明：图表配色可以用 **Figma Variables** 管理，也能引用其他 Library 里的变量；能**从已有图表里读回数据和配置**，方便只改样式不改数据；支持柱状图（横纵、分组、堆叠、自定义柱形）、折线图（曲线、面积、堆叠）、柱线组合图、饼图、环形图、玫瑰图、雷达图、散点图和气泡图；常用字段数据可以用 XLSX 上传保存。

适合：团队有设计系统、图表要跟着主题色走，或者同一张图要反复改样式。配色用变量管理的思路，可以参考 [Figma 批量替换颜色](/blog/figma-batch-replace-colors)。

#### [Figma Charts丨Figma 图表](/plugin/plugin-233)

作者 Amila Sampath。觅件标免费，但详情写明 Pro 版才解锁全部图表类型、AI 编辑、动画和代码导出，**以安装时提示为准**。

详情写明：整合 Google Charts、Highcharts、D3/Nivo、ApexCharts 四个图表库；数据可以来自 CSV、JSON、Excel、Google Sheets 等；能接入 Figma Variables 和颜色样式；提供色盲模拟和 WCAG 对比度检查。免费版支持 Google Charts、部分 Highcharts、静态/CSV/JSON 数据和基础导出。

适合：希望设计稿里的图表和开发最终用的图表库长得一致。

### 只做某一种图

- [Datavizer丨数据图表](/plugin/plugin-28)（作者 Amelia Wattenberger，觅件标免费）：柱状图、散点图、折线图，可上传 CSV 或 JSON，也能用随机数据做 Dashboard 里的 Sparkline 小图。
- [Sparkliner丨图表](/plugin/plugin-245)（作者 Oleg Frolov，觅件标免费）：迷你折线、柱状、环形图，可直接粘贴 Excel、CSV、JSON 数据。
- [Radar Chart丨雷达图](/plugin/plugin-313)（作者 Abhishek Shankar，觅件标免费）：雷达图，可设数值范围、导入 CSV 和 JSON，最少要 3 个数据点。
- [NB Charts丨NB 图表](/plugin/plugin-64)（觅件标免费）：覆盖折线、柱状、饼图、雷达、散点、气泡，还有地图、K 线和仪表盘图。

### 给图表补细节

- [Chartline丨图表线条](/plugin/plugin-82)（作者 Ruben，觅件标免费）：随机生成或从预设里选图表曲线，再手动调形状。
- [Chart BG丨图表背景](/plugin/plugin-374)（作者 S. Goltsov，觅件标免费）：选中一条带描边的 Vector，自动在下面生成同色渐变背景，适合折线图下方的面积渐变；详情写明只支持单个 Vector。

### 数据要放进表格而不是图表

图表分类里还有几款做表格的：[Text To Table丨文本到表格](/plugin/plugin-469) 能把 CSV、TSV、Markdown 文本转成 Figma 表格；[Table Templates with Auto Layout丨表格模板](/plugin/plugin-170) 基于自动布局生成可调行列的表格。觅件标付费的两款是 [Line Chart Generator丨折线图生成](/plugin/plugin-148) 和 [Tably — Table Generator｜表格生成器](/plugin/plugin-513)。

## 别跟这几件事混了

- **只是要往卡片、列表里填假数据**，不是做图表。见 [Figma 中文填充](/blog/figma-chinese-content-fill)。
- **把做好的图表导出成 PNG、SVG**，是导出。见 [Figma 切图导出](/blog/figma-export-assets)。
- **给开发标图表的尺寸和间距**，是标注。见 [Figma 设计标注](/blog/figma-design-annotations)。

## 在觅件里怎么找

到 [觅件](https://plugmate.figmod.top/) 搜「图表」「饼图」「雷达图」，或从「📈 图表」分类进去。先看中文介绍和是否付费，再决定装哪个。会员可翻页与无限搜索；定价见 [定价页](/pricing)（永久 ¥69.9，或按月 ¥19.9，付一次用 30 天，不自动扣款）。

也可以用 AI 连觅件 MCP，用中文说「帮我找能导入 Excel 数据生成柱状图的 Figma 插件」。步骤见 [MCP 教程](/mcp-tutorial)。用中文找插件的思路，见 [用中文找 Figma 插件](/blog/find-figma-plugins-in-chinese)。

## 常见问题

**Figma 有自带的图表工具吗？** 没有「插入图表」这种功能。饼图、环形图可以用 Ellipse 的 Arc 手柄画，简单柱状图用矩形加自动布局；付费计划可以试官方 agent 用 CSV 生成图表（公开测试中）。

**Figma 怎么画饼图？** 画一个圆，拖右侧的 Arc 手柄改 Sweep 百分比得到一块扇形；复制几份，每份改 Sweep，并把 Start 接在上一块结尾。也可以在右侧边栏 Appearance 区直接填数字。

**Figma 环形图怎么做？** 在饼图基础上拖圆心的 Ratio 手柄，把实心扇形变成圆环；要闭合的整圆环，先调好 Ratio，再把 Sweep 拖回起点。

**改了 Arc 之后，为什么图层外框还是整个圆那么大？** 官方说明改 Arc 是非破坏性的，外框保留原尺寸，方便之后再改。确定不改了才用 Flatten 让外框贴合形状，但拼合后就不能再调 Arc。

**数据改了，Figma 里的图表会自动更新吗？** 不会。Figma 里的图表都是普通图层，数据变了要手动改或让插件重新生成；[i Charts Generate](/plugin/plugin-171) 这类插件能读回已有图表的数据，改起来更快。

**有中文界面的图表插件吗？** 觅件详情里写明支持简体中文界面的是 [Data Vision Chart](/plugin/plugin-258)。

**这些插件会装进当前文件吗？** 不会。觅件是发现工具，点详情后再到社区页由你自己安装。

---

- 客服邮箱 hello@zhanghe.dev
- 微信客服