第四章：原型设计工具：Figma基础、Axure基础、Sketch基础

说到原型设计工具，我入行那会儿用的还是纸笔加PPT。现在回想起来，真是又慢又痛苦。后来Figma、Axure、Sketch这三款工具逐渐成了主流，我几乎每个项目都会用到它们。今天我就把这三款工具的核心用法和我的实战经验分享给你。

4.1 Figma基础：协作效率之王

Figma是我目前最常用的工具。为什么？因为它基于浏览器，不用安装，打开链接就能用。团队协作更是它的强项——你改一个组件，所有引用它的页面都会同步更新。

4.1.1 界面布局

Figma的界面分三块：左侧是图层和页面列表，中间是画布，右侧是属性面板。我个人习惯把常用组件放在左侧的「资源」面板里，这样拖拽起来特别快。

嗯，这里要注意：Figma的图层管理比Sketch更直观。你选中一个元素，右侧面板会显示它的所有属性——位置、尺寸、填充、描边、效果等。改起来很方便。

4.1.2 组件与变体

做智能硬件原型时，按钮、开关、滑块这些UI元素会反复出现。Figma的「组件」功能就是为这个场景设计的。

操作步骤：
1. 选中一个元素（比如一个按钮）
2. 点击顶部工具栏的「创建组件」图标（或按 Ctrl+Alt+K）
3. 在右侧属性面板中，点击「添加变体」
4. 为变体设置属性（如：状态=默认/悬停/按下）
5. 拖拽组件到画布上，修改变体属性即可切换状态

我在项目中遇到过一个问题：团队成员不知道组件和变体的区别，结果每个人都在复制粘贴原始按钮，改起来特别痛苦。后来我强制要求所有UI元素都必须做成组件，这才解决了维护难题。

4.1.3 原型交互

Figma的原型功能虽然不如Axure强大，但做简单的页面跳转和交互动效完全够用。你只需要在右侧切换到「原型」面板，然后从一个元素拖拽连线到目标页面即可。

我曾经用Figma给一个智能门锁做原型演示。从「待机界面」到「密码输入」再到「开锁成功」，一共做了5个页面跳转和3个微动效。客户看完直接说「这就是我要的效果」。

4.2 Axure基础：复杂交互的利器

如果你要做高保真原型，尤其是带条件判断、变量运算、动态面板的交互，Axure是首选。说实话，Axure的学习曲线比Figma陡，但它的交互能力确实强。

4.2.1 动态面板

动态面板是Axure最核心的功能。你可以把它理解成一个「容器」，里面可以放多个状态（State），每个状态可以有不同的内容。通过切换状态，就能实现轮播图、选项卡、下拉菜单等效果。

创建动态面板的步骤：
1. 拖拽一个「动态面板」元件到画布
2. 双击面板，进入状态编辑模式
3. 在「状态管理」面板中，添加多个状态（如：State1、State2、State3）
4. 在每个状态中放入不同的内容
5. 回到主画布，选中面板，添加交互事件来切换状态

我记得有一次做智能音箱的交互原型，需要模拟「语音唤醒→等待指令→执行动作」的流程。用动态面板的3个状态，配合条件判断（如果用户说「播放音乐」，就切换到播放状态），完美还原了真实交互。

4.2.2 变量与条件

Axure支持全局变量和局部变量。你可以用变量来存储用户输入、设备状态、计数值等。条件判断则让原型能根据不同的输入做出不同的响应。

举个例子：做一个智能灯控的原型。用户点击「开灯」按钮，变量lightStatus变为true，灯泡图标亮起；点击「关灯」，变量变为false，灯泡熄灭。这听起来简单，但用Axure的变量和条件来实现，逻辑非常清晰。

4.3 Sketch基础：Mac用户的经典选择

Sketch曾经是UI设计的王者，现在虽然被Figma抢了不少风头，但它的插件生态和矢量编辑能力依然很强。如果你用的是Mac，Sketch依然是个好选择。

4.3.1 符号与覆盖

Sketch的「符号」相当于Figma的「组件」。你创建一个符号后，可以在多个页面复用。更厉害的是「覆盖」功能——你可以在不破坏符号原始结构的前提下，修改某个实例的文本、图片或颜色。

创建符号的步骤：
1. 选中一个元素或组
2. 点击工具栏的「创建符号」图标（或按 Ctrl+Alt+S）
3. 在符号编辑器中，定义可覆盖的属性（如：文本、图片、颜色）
4. 回到画布，拖拽符号实例，在右侧面板中修改覆盖属性

我习惯把智能硬件的常见UI元素做成符号库，比如状态栏、导航栏、按钮、滑块等。这样新项目开始时，直接拖拽符号库里的元素，效率很高。

4.3.2 插件生态

Sketch的插件系统非常成熟。我常用的插件有：

• Anima：做原型交互，支持点击跳转、悬停效果
• Rename It：批量重命名图层，保持图层命名规范
• Symbol Organizer：自动整理符号库，按文件夹分类
• Sketch Measure：标注尺寸和间距，方便开发查看

说实话，Sketch的插件安装和管理比Figma麻烦一些。但如果你需要做精细的矢量图形编辑，Sketch的钢笔工具和布尔运算比Figma更顺手。

4.4 三款工具的选择建议

你可能会问：到底该学哪个？我的建议是：

场景	推荐工具	理由
团队协作、快速迭代	Figma	基于浏览器，多人实时编辑，版本管理方便
复杂交互、高保真原型	Axure	动态面板、变量、条件判断，交互能力最强
精细UI设计、Mac用户	Sketch	矢量编辑能力强，插件生态丰富
个人学习、入门	Figma	免费、上手快、社区资源多

我个人习惯是：Figma做日常设计和协作，Axure做需要复杂交互的原型，Sketch偶尔用来做精细的图标和插画。你想想看，工具只是手段，关键是你的交互逻辑设计能力。

好了，这一章的内容就到这里。下一章我们会讲「交互逻辑的文档化」，也就是怎么把你的原型设计思路写清楚，让开发和其他设计师都能看懂。到时候见。