Figma详解
「协作主流」的原型与设计工具

它是什么：为什么是「协作主流」

• 云端原生：所有文件在云端，浏览器打开即用，不需要装软件——换台电脑照样干活。
• 实时协作：多人同时编辑同一份文件，光标实时可见——PM 可以「看着」设计师改稿，边看边评。
• 免费够用：免费版对个人和小团队足够——PM 学它几乎没有成本。
• 生态庞大：海量模板、插件、组件库——很多现成的「线框/原型素材」拿来即用。
• 和 Axure 的分工：Figma 强在协作与视觉表达，Axure 强在复杂交互逻辑——团队用什么你就用什么。

核心功能拆解

• 画板与绘图：画矩形、文字、图片、形状——PM 画线框稿足够用的全部基础能力。
• 组件（Components）：把按钮、输入框做成组件，改一处全站生效——PM 画原型也能用。
• 自动布局（Auto Layout）：类似网页的 Flexbox——列表、卡片自动排列，改内容不塌版。
• 变体（Variants）：一个组件的多个状态（默认/悬停/禁用）打包管理，切换方便。
• 原型模式（Prototype）：画板之间连线做交互——Figma 的原型能力虽不如 Axure 深，但 80% 场景够用。
• 实时评审：分享链接，同事在浏览器里看原型 + 留评论——沟通闭环最快。
• 交付标注：开发点开就能看到尺寸、间距、颜色、CSS——设计到开发的「翻译官」。

上手步骤：第一周怎么学

PM 视角：Figma 的协作玩法

• 和设计师同文件工作：PM 画线框，设计师在同文件里做高保真——边界清晰又无缝衔接。
• 评论代替会议：直接在原型上@人留评论——异步评审，减少无效会议。
• 版本历史：改坏了可以回退——大胆试错，不怕手滑。
• 团队组件库：公司统一的设计系统（按钮、表单、图标）直接复用——原型和上线产品长一个样。
• 评审链接：做好的原型一键生成链接发给老板/用户——比发文件包专业得多。

技巧与避坑

• PM 别陷进「美化」：你的职责是表达信息结构，不是做视觉——颜色留白交给设计师。
• 尽早用自动布局：手动摆框后期改起来想哭——列表、卡片一律自动布局。
• 命名规范：图层、页面命名清楚，团队才找得到东西——原型是公共资产。
• 常见坑：① 在别人的 Figma 文件里乱改；② 忘了开启「编辑权限」就发链接；③ 原型只连了「正常路径」，异常态没演示。
• 免费版限制：文件数量和协作人数有限制——个人学习完全够用。

视频学习：跟着屏幕做一遍