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

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

先说结论：

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

自带部分来自 Figma 官方帮助：Arc tool: create arcs, semi-circles, and rings、Turn an ellipse into an arc、Guide to auto layout，以及官方介绍页 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｜图表

作者 Designbase。觅件标免费。

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

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

Charts丨图表

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

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

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

Data Vision Chart丨数据生成图表可视化工具

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

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

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

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

i Charts Generate丨图表

作者 Tutu。觅件标免费。

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

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

Figma Charts丨Figma 图表

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

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

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

只做某一种图

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

给图表补细节

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

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

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

别跟这几件事混了

• 只是要往卡片、列表里填假数据，不是做图表。见 Figma 中文填充。
• 把做好的图表导出成 PNG、SVG，是导出。见 Figma 切图导出。
• 给开发标图表的尺寸和间距，是标注。见 Figma 设计标注。

在觅件里怎么找

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

也可以用 AI 连觅件 MCP，用中文说「帮我找能导入 Excel 数据生成柱状图的 Figma 插件」。步骤见 MCP 教程。用中文找插件的思路，见 用中文找 Figma 插件。

常见问题

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

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

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

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

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

有中文界面的图表插件吗？ 觅件详情里写明支持简体中文界面的是 Data Vision Chart。

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

---

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