基于浏览器的 UI/UX 设计工具，一套工具覆盖全流程：
核心竞争力：全平台（Win/Mac/Linux/网页）、实时协作、组件化设计系统。
骏九驿站┌─────────┬──────────────────────────────────────┐
│ 图层 │ 画布 (Canvas) │
│ 面板 │ │
│ │ ┌──────────┐ ┌──────────┐ │
│ Page 1 │ │ Button │ │ Card │ │
│ ├─ Frame │ └──────────┘ └──────────┘ │
│ ├─ Button│ │
│ └─ Icon │ │
├──────────┼──────────────────────────────────────┤
│ 属性 │ 设计 / 原型 / 检查 (右侧面板) │
│ 面板 │ │
└──────────┴──────────────────────────────────────┘| 面板 | 位置 | 用途 |
|---|---|---|
| 图层面板 | 左 | 管理所有图层、组件、页面 |
| 画布 | 中 | 绘制和排版 |
| 属性面板 | 右 | 调整样式、约束、原型交互 |
⌘ + Option + G → 选中的元素包装成 Frame
⌘ + ' → 显示/隐藏网格
Frame 可以嵌套，可以做响应式布局常见 Frame 预设：
类似 Flexbox：Figma 的 Auto Layout = CSS Flexbox
快捷键:
Shift + A → 选中元素应用 Auto Layout
Option + →/← → 调整间距
⌘ + Enter → 进入/退出容器
属性:
Direction: 水平 / 垂直
Padding: 内边距
Gap: 间距
Alignment: 对齐方式
Hug / Fill: 自适应 / 填充为什么重要：Auto Layout 让组件自适应内容变化，修改文案时自动撑开。
一个设计稿 = 无数组件拼装
创建组件: ⌘ + Option + K
创建变体: 选中组件 → 右侧 Add Variant
编辑主组件: 双击进入 → 全局同步更新
覆盖局部: 在实例中修改 ≠ 影响主组件
属性定义 (Component Properties):
- Text 属性 → 可替换文案
- Boolean 属性 → 显隐开关
- Instance swap → 切换子组件
- Variant → 多状态 (禁用/悬停/选中)Figma 设计令牌 (Design Tokens) 的实现：
创建样式（选中元素 → 右侧样式图标）：
Color: 主色/辅色/文字色
Text: 标题/正文/小字（字号+字重+行高）
Effect: 阴影/模糊
Grid: 网格布局
应用：拖拽样式到其他元素，全局同步更新类似 CSS position/布局：
Left / Right / Top / Bottom
Scale / Center / Stretch
用途：让元素在不同尺寸 Frame 中自适应| 操作 | Mac | Win |
|---|---|---|
| 移动工具 | V | V |
| 矩形 | R | R |
| 文字 | T | T |
| 圆形 | O | O |
| 画线 | L | L |
| 钢笔 | P | P |
| 切片 | S | S |
| 放大 | Z + 点击 | Z + 点击 |
| 适配画布 | Shift + 1 | Shift + 1 |
| 复制 | ⌘ + D | Ctrl + D |
| 编组 | ⌘ + G | Ctrl + G |
| 框架 | ⌘ + Option + G | Ctrl + Alt + G |
| Auto Layout | Shift + A | Shift + A |
| 布尔运算 | ⌘ + Option + B | Ctrl + Alt + B |
| 标记为完成 | Shift + E | Shift + E |
1. 选中任意图层/组件
2. 右侧切换到 "Prototype" 面板
3. 点击右边的小圆点 → 拖拽到目标 Frame
4. 设置触发条件和动画
交互类型:
On Click → 点击
While Hovering → 悬停
While Pressing → 按下
After Delay → 延迟
Drag → 拖拽（移动端）
动画:
Instant → 跳转
Dissolve → 渐隐
Smart Animate → 智能动画（同名元素自动补间）
Push/Pull → 推入/推出
Slide In/Out → 滑动条件：
✅ 两个 Frame 有同名图层
✅ 同名图层的属性发生变化
场景：
列表展开/收起
导航栏滚动切换
开关按钮
菜单弹出/关闭谁在哪个图层上编辑 → 头像会显示
光标实时出现 → 能看到别人在画的形状
不会冲突 → Figma 的锁机制自动处理C → 切换评论工具
双击任意位置 → 添加评论
@用户名 → @某人
状态:
Open / Resolved右上角 Share 按钮:
Can view → 只读
Can edit → 可编辑
Can leave → 可下载导出
链接分享: https://figma.com/file/xxx
团队项目: 需付费版组织项目选中图层 → 右侧 Export 面板
格式:
PNG / JPG / SVG / PDF
WebP / AVIF (新版本)
缩放:
1x, 2x, 3x （对应 @1x @2x @3x）
批量导出:
选中多个图层 → 统一设置导出参数Figma 2023 推出的开发者专用模式
右上角切换: Design / Dev Mode
功能:
查看元素属性 (CSS 样式)
复制 CSS/ iOS / Android 代码
查看间距、约束
下载切图 (SVG/PNG)
查看变体和组件属性
标注 (Redlines)选中一个 Button 组件 → Dev Mode 右侧显示：
.button {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: #1890FF;
border-radius: 8px;
color: #FFFFFF;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}项目 /
├── 🎨 品牌基础 / ← Colors, Typography, Spacing, Icon
├── ☰ 组件库 / ← Components 主文件
│ ├── Button (Primary/Secondary/Ghost)
│ ├── Input (Default/Error/Disabled)
│ ├── Card (Image/Content/Action)
│ └── ...
├── 📱 页面设计 / ← 具体页面
│ ├── 首页
│ ├── 列表页
│ └── 详情页
└── 📖 设计规范文档 ← 文字说明Atom → Molecule → Organism → Pages
原子: Color, Typography, Icon, Spacing
分子: Button (文字+背景+圆角)
组织: SearchBar (Input + Button + Icon)
页面: HomePage (SearchBar + CardList + Footer)| 插件 | 用途 |
|---|---|
| Content Reel | 填充真实数据（人名、头像、地址） |
| Iconify | 图标库（数万开源图标） |
| Unsplash | 图片占位 |
| Autoflow | 快速画流程图连线 |
| Remove BG | 一键去背景 |
| Stark | 无障碍检查（对比度/色盲模拟） |
| FigJam AI | 白板 AI 辅助 |
| Annotate | 添加标注 |
1. 调研 → 画线框图 (Low-fi)
2. 建立颜色/字体系统
3. 设计关键页面 (High-fi)
4. 组建组件库
5. 连线原型 → 用户测试
6. 交付开发 (Dev Mode + 切图)1. 打开 Figma → 切换到 Dev Mode
2. 查看设计 → 直接复制 CSS
3. 导出 SVG/PNG 图标
4. 按组件库对照实现
5. 截图对比 → 确认像素级一致一句话总结： Figma = 设计师的 VS Code —— 免费、开放、实时协作、生态丰富。Auto Layout 和组件化是做可维护设计的关键，Dev Mode 是设计师和开发者的桥梁。