如何在 Figma 中制作饼图

想在 Figma 中将数据可视化?了解如何使用形状、角度和插件创建饼图。轻松上手,打造简洁、数据驱动的视觉效果。

使用 AI 创建令人惊艳的产品视频和文档

本教程由 Trupeer 在不到 5 分钟内制作完成

免费创建

下面是更详细的分解:

1. 创建椭圆:选择椭圆工具并绘制一个圆。拖动时按住 Shift 键可确保它是一个 完美的圆。 
2. 访问弧形选项:将鼠标悬停在圆上,你会看到一个点出现。单击并拖动该点以显示弧形控件。 
3. 调整 sweep 和 start:弧形控件可让你调整弧线的“sweep”(切片大小)和“start”(起始角度)。 
4. 创建切片:复制初始弧线(切片)以为你的 饼图 创建更多切片。调整每个副本的 sweep 和 start 角度,以创建所需的比例。 
5. 为切片着色:为每个切片填充不同颜色,以便区分。你也可以使用文本工具为每个切片添加标签。 
6. 排列和优化:根据需要排列切片和标签。你可以将这些元素组合起来,以保持图表整洁。 

分步指南:如何在 Figma 中制作饼图

第 1 步

点击“Actions”部分。

Click on the 'Actions' section.

第 2 步

当饼图选项出现时,只需点击它即可选择。

When the pie chart option appears, simply click on it to select.

第 3 步

饼图现在将显示在你的屏幕上。此外,你会注意到一个“Edit”选项;点击它继续。

The pie chart will now appear on your screen. Additionally, you will notice an 'Edit' option; click on this to proceed.

第 4 步

在此步骤中,自定义饼图以满足你的具体需求。输入所需的任何标签,完成后,

In this step, customize the pie chart to meet your specific needs. Enter any desired labels and, once complete,

第 5 步

轻触屏幕任意位置以退出编辑模式。

Tap anywhere on the screen to exit editing mode.

第 6 步

你的更改将应用于饼图。

Your changes will be applied to the pie chart.

在 Figma 中创建饼图的专业技巧

  1. 使用椭圆工具绘制基础图形
    选择椭圆工具(O),然后按住 Shift 在画布上单击并拖动,绘制一个完美的圆形。这将作为完整饼图的基础。

  2. 将圆形转换为圆弧
    选中圆形后,前往属性面板并调整“Arc”设置。通过更改“Start”和“End”角度来启用它,以创建扇形效果。

  3. 复制以创建多个分段
    要制作更多扇区,复制圆形(Ctrl/Cmd + D),然后为每个扇区调整圆弧角度以表示不同的数据值。为每个扇区使用不同的颜色。

  4. 使用数学计算分割图表
    如果你的数据以百分比表示,将 360(一个圆的度数)乘以该百分比即可得到每个扇区的角度。例如,25% = 90°。

  5. 用颜色区分以增强清晰度
    使用填充工具为每个扇区分配不同的颜色。这会提升可读性和视觉吸引力。

常见问题及其避免方法

  1. 圆弧未正确对齐
    确保每个圆弧扇区都从上一个扇区结束的位置开始,以避免出现空隙或重叠。为保证精确,可手动输入起始和结束角度。

  2. 无法追踪角度
    用扇区角度或数据标签为图层命名,这样你就能知道每个分段代表什么。

  3. 文本标签未对齐
    使用智能参考线,或手动将文本居中放在每个扇区上方,以保持整洁专业的外观。

  4. 扇区相互遮挡
    添加扇区时注意图层顺序。根据需要将扇区置于前面或后面,以避免遮挡其他部分。

  5. 比例不准确
    将百分比转换为角度时,请仔细核算,以确保数据表示准确。

关于 Figma 中饼图的常见问题

  1. 我可以不使用插件在 Figma 中创建饼图吗?
    可以,你可以使用椭圆工具和弧形设置手动创建饼图,无需任何插件。

  2. Figma 有用于创建饼图的插件吗?
    有,像“Chart”或“Pie Chart Maker”这样的插件可通过数据输入自动完成此过程。

  3. 如何制作精确的 25% 扇区?
    将 360 乘以 0.25(25%),得到 90 度。将弧形角度设置为 90°,即可得到完美的 25% 扇区。

  4. 我可以在 Figma 中为饼图制作动画吗?
    虽然 Figma 支持简单的原型动画,但复杂的数据驱动动画需要在 Figma 之外制作。

  5. 我可以从 Figma 导出饼图吗?
    可以,选中饼图,前往导出面板,选择你偏好的格式(PNG、SVG、PDF),然后点击导出。

  6. 如何在 Mac 上录屏? 
    在 Mac 上录屏,你可以使用 Trupeer AI。它可以让你捕捉整个屏幕,并提供 AI 功能,例如添加 AI 头像、添加旁白、在视频中放大和缩小。借助 trupeer 的 AI 视频翻译功能,你可以将视频翻译成 30 多种语言。 

  7. 如何为录屏添加 AI 头像?
    要为录屏添加 AI 头像,你需要使用AI 录屏工具。 Trupeer AI 是一款 AI 录屏工具,它可帮助你制作包含多个头像的视频,也能帮助你为视频创建自己的头像。

  8. 如何在 Windows 上录屏?
    在 Windows 上录屏,你可以使用内置的游戏栏(Windows + G),或者像 Trupeer AI 这样的高级 AI 工具,以获得 AI 头像、旁白、翻译等更高级的功能。

  9. 如何为视频添加旁白?
    要为视频添加旁白,请下载 trupeer ai Chrome 扩展。注册后,上传带有声音的视频,从 trupeer 中选择所需的旁白,然后导出你编辑后的视频。 

  10. 如何在录屏中放大画面?
    要在录屏过程中放大画面,请使用 Trupeer AI 中的缩放效果,它允许你在特定时刻放大和缩小,增强视频内容的视觉冲击力。

推荐阅读

技术文档生成器

用户手册指南

知识库软件

如何在 Figma 中隐藏画框名称

如何保存 Figma 文件

如何在 Figma 中制作网格

如何在 Figma 中制作网格

如何在 Figma 中模糊背景

需要视频剪辑师、翻译和编剧吗?

免费试用 Trupeer

预约演示

需要视频剪辑师、翻译和编剧吗?

免费试用 Trupeer

预约演示

需要视频剪辑师、翻译和编剧吗?

免费试用 Trupeer

预约演示