使用 Figma 制作流程图、时序图、幻灯片
2025-3-26
| 2025-4-18
Words 943Read Time 3 min
type
status
date
slug
summary
tags
category
icon
password

流程图

流程图(Flowchart)是一种用图形符号和文字描述流程、步骤或系统逻辑的图表工具。它通过标准化的符号和箭头连接,直观展示各环节的顺序、决策点及执行路径,帮助人们快速理解复杂流程。

常见符号

符号
名称
用途
椭圆
开始/结束
表示流程的起点或终点
矩形
处理步骤
代表具体的操作或任务
菱形
判断/条件
表示逻辑判断(是/否分支)
箭头
流程线
指示步骤之间的执行顺序
平行四边形
输入/输出
表示数据输入或输出
圆形
连接符
跨页或长流程中连接不同部分的节点
注释
附加说明
对特定步骤的补充说明

FigJam

FigJam 是 Figma 推出的 在线协作白板工具,专为团队 brainstorming(头脑风暴)、流程图设计、线框图绘制、敏捷项目管理等场景打造。它与 Figma 深度集成,支持无缝切换设计文件与白板,尤其适合设计师、产品经理和跨职能团队使用。
fig.1 figjam 编辑页面
fig.1 figjam 编辑页面
FigJam 操作类似 Figma,界面简洁,很容易上手。并且具有与 Figma 互通、实时协作、丰富的模版和插件等优势。
绘制流程图,可以使用 FigJam 中的以下元素:
fig.2 FigJam 中绘制流程图的符号
fig.2 FigJam 中绘制流程图的符号

示例

fig.3 使用 FigJam 绘制流程图示例
fig.3 使用 FigJam 绘制流程图示例

UML 时序图

时序图(Sequence Diagram)是 UML 中的一种交互图,用于描述对象之间的动态交互,主要包含以下元素:
元素
描述
对象(Object)
表示参与交互的实体,通常用矩形框表示,框内标注对象名和类名,格式为“对象名: 类名”
生命线(Lifeline)
表示对象在交互期间的存在时间,用垂直虚线表示,从上到下延伸
激活条(Activation Bar)
表示对象执行操作的时间段,用矩形条覆盖在生命线上。
消息(Message)
表示对象之间的通信,用带箭头的水平线表示,箭头指向接收对象。消息类型包括: ◦ 同步消息(Synchronous Message):发送者等待接收者处理完毕。 ◦ 异步消息(Asynchronous Message):发送者不等待接收者处理。 ◦ 返回消息(Return Message):表示操作的返回值。
组合片段(Combined Fragment)
用于表示条件、循环等控制结构,常见类型有: ◦ alt(Alternative):条件分支。 ◦ opt(Option):可选执行。 ◦ loop(Loop):循环执行。 ◦ par(Parallel):并行执行。
终止(Destruction)
表示对象的销毁,用“×”符号标记在生命线末端。
注释(Note)
用于添加说明,用矩形框表示,框内为注释内容。
这些元素共同描述了对象在时间轴上的交互过程。

基本元素

在 Figma 中,可以把对象和生命线做成组件,激活条和箭头使用 FigJam 中的矩形和连接线(与FigJam 互通)。
fig.3 Figma 中用户绘制 UML 的元素
fig.3 Figma 中用户绘制 UML 的元素
使用 Figma 绘制流程图,颇有 “杀鸡焉用牛刀” 之感,Figma 作为设计软件,能轻松配色、绘图等,且可便捷导出多种尺寸、格式的图片。

示例

fig.4 使用 Figma 绘制时序图示例
fig.4 使用 Figma 绘制时序图示例
 

幻灯片

虽然 Figma 的 Slides 并非传统幻灯片工具(如 PPT、Keynote),但其 矢量设计能力 和 协作优势 使其成为 高自由度视觉化幻灯片 的理想选择:
  • 设计精准:像素级控制排版、配色、动效,轻松实现高级视觉效果。
  • 组件复用:通过组件库(如标题、图表模板)快速统一多页幻灯片风格。
  • 团队协作:多人实时编辑、评论反馈,避免版本混乱。
  • 无缝衔接设计资源:直接嵌入 UI 原型、流程图等,提升提案说服力。
fig.5 Slides 编辑页面
fig.5 Slides 编辑页面
使用 Slides 制作幻灯片也与其局限性:
  • 复杂动画受限:不如 Keynote/PowerPoint 支持丰富的内置动画效果。
  • 文字处理较弱:长篇文本排版效率低于传统办公软件。
  • 离线依赖插件:导出 PPT 需借助插件,格式可能需二次调整。
 
无论流程图、时序图,还是幻灯片,它们本质上只是工具,我们使用这些工具,目的是将复杂的想法转化为直观的视觉表达,让信息传递变得清晰而有力,从而更精准地向他人传达自己的思考。做为一款优秀设计软件的外溢,Figma 可以轻松充当上述工具,不仅功能贴心又强大,对大多数人来说免费版也妥妥够用!

参考文档

 
 
  • 工具
  • 使用 Perlin Noise、Catmull-Rom 创建闭合平滑曲线工作十年,一个 Android 开发者的自我修养
    Loading...