Figma 是当前网页设计行业事实上的协作标准。它跑在浏览器里，不需要安装重型客户端，多个人可以同时画同一份文件，光标实时可见。这篇指南不打算把所有按钮讲一遍，而是按尧图团队的真实工作流，挑出每天都会用到的核心能力：界面结构、组件库、自动布局、协作、原型交互，最后给一套实战技巧与快捷键。

一、界面介绍：四个区域各司其职

Figma 的界面分成四大块：左侧的图层与资源面板、中间的画布、右侧的属性面板、顶部的工具栏。新手最容易忽略的是左侧的 Assets（资源）页签，它是组件库的入口，也是团队复用的关键。

• 左侧面板：Layers 看结构，Assets 找组件，Pages 给大项目分页面。多人协作时给每个 Page 起清晰的名字，比如「v2.1 在线版」「废弃草稿」。
• 中间画布：按住空格拖动平移，按 1 缩放到 100%，按 Shift + 1 缩放适应画面。
• 右侧属性：上半部分是坐标尺寸与自动布局，下半部分是填充、描边、效果、导出。设计稿交付前，所有数值都应在这里精确到整数。
• 顶部工具：常用的是 Frame（F）、矩形（R）、文字（T）、钢笔（P）。移动工具按 V。

二、组件库：先建主组件，再谈复用

组件（Component）是 Figma 的灵魂。一个按钮画一次，做成主组件（Main Component），之后所有调用处都是实例（Instance），改主组件全站同步。尧图团队的项目里，组件库通常单独放在一个 Page，命名以「_」开头让它排在最上面。

组件分层建议

• 原子层：颜色、字号、间距变量（Variables），这是最底层的 Design Token。
• 分子层：按钮、输入框、标签、图标按钮，单个可独立使用的小元件。
• 组件层：卡片、导航条、表单行、模态框，由分子组合而成。
• 模板层：整页骨架，留出内容位，方便快速拼新页面。

建立主组件的快捷键是 Ctrl/Cmd + Option/Alt + K（Mac 用 Cmd+Option+K）。把主组件放在专门的 Components Page 里，业务页面只放实例。这样组件源文件干净，业务文件不会误改主组件。

三、自动布局 Auto Layout：响应式的灵魂

Auto Layout（自动布局）是 Figma 最接近 CSS Flexbox 的能力。给一个 Frame 加上自动布局后，它的子元素会按方向自动排列，间距、内边距、对齐都能控制。它的快捷键是 Shift + A。

尧图在做卡片组件时几乎必用 Auto Layout。一个典型的内容卡片结构是：外层 Frame（垂直 Auto Layout，间距 12，内边距 24）包含图片、标题、正文、操作行；操作行本身又是水平 Auto Layout，间距 8。

Auto Layout 三个关键属性

• Direction：水平 / 垂直 / Wrap。Wrap 模式可以让标签自动换行，适合标签云。
• Gap 与 Padding：间距与内边距。按住 Option/Alt 点击数值框可以分别设置上下左右。
• Resizing：Hug（包裹内容）/ Fill（填满容器）/ Fixed（固定）。Fill 模式配合父级 Fill，能模拟 CSS 的 flex:1。

实战中常见的坑：嵌套 Auto Layout 时，子级如果设了 Fixed 宽度，父级 Hug 会失效。排查方法是逐层选中，看右侧 Resizing 是否符合预期。一个稳健的做法是叶子节点用 Hug，容器节点用 Fill，最外层用 Fixed。

四、协作功能：让评审不再靠截图

Figma 的协作能力是它取代 Sketch 的核心原因。多人同时编辑，光标实时显示，可以在任意位置留评论并 @ 负责人。尧图团队的评审流程基本是：设计师在 Figma 里讲方案，产品与开发同步看，评论直接落在元素上。

• 实时多人光标：右上角能看到同时在线的人，光标带名字标签。改之前先看一眼有没有人在改同一区域。
• 评论与 @：按 C 进入评论模式，点击元素留批注。@ 用户名会触发邮件通知，比微信沟通可追溯。
• 分支 Branching：专业版功能，适合大改版。在新分支上改，合并回主文件前不影响线上版本。
• 库 Library：把组件库发布为 Team Library，其他文件调用后，主库更新会触发通知，一键应用。

五、原型交互：连线即可演示

Figma 的原型模式（右上角 Prototype 页签）不需要写代码，把元素之间连线就能演示跳转。点击元素，拖动右侧出现的连线小圆点到目标 Frame，就完成一次跳转设置。

交互三要素

• Trigger：触发方式，常用 On Click、On Hover、After Delay。Hover 适合做按钮态切换演示。
• Action：动作，Navigate To（跳转）、Change To（同页切换）、Open Overlay（弹层）、Scroll To（滚动到）。
• Easing 与 Duration：缓动曲线与时长。网页动效默认 150-300ms，缓动用 Ease Out 最自然。

Smart Animate 是 Figma 的杀手锏。两个 Frame 里有同名图层时，Figma 会自动补间过渡。把按钮在 Frame A 放左上，Frame B 放右下，连线选 Smart Animate，预览时按钮就会平滑滑过去。尧图做交互动效演示时几乎全靠它。

六、实战技巧与快捷键速查

下面是尧图团队每天都会用到的快捷键与小技巧，按使用频率排序。Mac 把 Ctrl 换成 Cmd。

高频快捷键

• V 移动工具 / F Frame / R 矩形 / T 文字 / P 钢笔
• Shift + A 添加 Auto Layout / Ctrl + Alt/Option + K 创建组件
• Ctrl + D 复制选中（带位置偏移）/ Shift + ↑↓←→ 按 10px 移动
• Ctrl + ; 显示/隐藏标尺 / Ctrl + G 编组 / Ctrl + Shift + G 解组
• Alt + 鼠标移动 测量与其他元素的距离，评审时极有用
• Ctrl + / 命令面板，所有操作都能在这里搜，记不住快捷键就搜

三个实战小技巧

1. 用 Variables 管色彩与间距。把品牌色、语义色（success/warning/error）、间距 token（4/8/12/16/24）都建成 Variables，组件里引用变量而不是写死值。改主题色时只改变量，全站瞬间更新。

2. 用 Section 给画布分区。按 Shift + S 创建 Section，给草稿、初稿、终稿、废弃稿分区，画布不会乱成一团。Section 还能整体折叠隐藏。

3. 用 Dev Mode 交接开发。切换到 Dev Mode（右上角），开发同事能直接看到每个元素的 CSS、间距、色值、可导出的资源。比第三方标注插件准确得多，是 Figma 替代 Zeplin 的关键能力。