在线笔记

Figma 使用说明

一、Figma 是什么？

基于浏览器的 UI/UX 设计工具，一套工具覆盖全流程：

• 设计（Design）
• 原型（Prototyping）
• 协作（多人实时编辑）
• 开发交付（生成 CSS/代码片段）

核心竞争力：全平台（Win/Mac/Linux/网页）、实时协作、组件化设计系统。

二、工作台速览

┌─────────┬──────────────────────────────────────┐
│  图层    │              画布 (Canvas)             │
│  面板    │                                      │
│          │    ┌──────────┐  ┌──────────┐        │
│  Page 1  │    │  Button  │  │   Card   │        │
│  ├─ Frame │    └──────────┘  └──────────┘        │
│  ├─ Button│                                      │
│  └─ Icon  │                                      │
├──────────┼──────────────────────────────────────┤
│  属性    │  设计 / 原型 / 检查  (右侧面板)        │
│  面板    │                                      │
└──────────┴──────────────────────────────────────┘

三块核心面板

三、核心概念

1. Frame（框架）→ 相当于 Artboard

⌘ + Option + G   → 选中的元素包装成 Frame
⌘ + '            → 显示/隐藏网格
Frame 可以嵌套，可以做响应式布局

常见 Frame 预设：

• Desktop: 1440×1024, 1280×800
• Tablet: 1024×768, 834×1194
• Mobile: 375×812 (iPhone), 390×844

2. Auto Layout（自动布局）⭐ 最重要功能

类似 Flexbox：Figma 的 Auto Layout = CSS Flexbox

快捷键:
  Shift + A    → 选中元素应用 Auto Layout
  Option + →/← → 调整间距
  ⌘ + Enter   → 进入/退出容器

属性:
  Direction:  水平 / 垂直
  Padding:    内边距
  Gap:        间距
  Alignment:  对齐方式
  Hug / Fill: 自适应 / 填充

为什么重要：Auto Layout 让组件自适应内容变化，修改文案时自动撑开。

3. Components（组件）

一个设计稿 = 无数组件拼装

创建组件:     ⌘ + Option + K
创建变体:     选中组件 → 右侧 Add Variant
编辑主组件:   双击进入 → 全局同步更新
覆盖局部:     在实例中修改 ≠ 影响主组件

属性定义 (Component Properties):
  - Text 属性 → 可替换文案
  - Boolean 属性 → 显隐开关
  - Instance swap → 切换子组件
  - Variant → 多状态 (禁用/悬停/选中)

4. Styles（样式）

Figma 设计令牌 (Design Tokens) 的实现：

创建样式（选中元素 → 右侧样式图标）：
  Color:    主色/辅色/文字色
  Text:     标题/正文/小字（字号+字重+行高）
  Effect:   阴影/模糊
  Grid:     网格布局

应用：拖拽样式到其他元素，全局同步更新

5. Constraints（约束）

类似 CSS position/布局：
  Left / Right / Top / Bottom
  Scale / Center / Stretch

用途：让元素在不同尺寸 Frame 中自适应

四、快捷键速查

五、原型交互（Prototyping）

连线交互

1. 选中任意图层/组件
2. 右侧切换到 "Prototype" 面板
3. 点击右边的小圆点 → 拖拽到目标 Frame
4. 设置触发条件和动画

交互类型:
  On Click      → 点击
  While Hovering → 悬停
  While Pressing → 按下
  After Delay   → 延迟
  Drag          → 拖拽（移动端）

动画:
  Instant       → 跳转
  Dissolve      → 渐隐
  Smart Animate → 智能动画（同名元素自动补间）
  Push/Pull     → 推入/推出
  Slide In/Out  → 滑动

Smart Animate 使用技巧

条件：
  ✅ 两个 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）

批量导出:
  选中多个图层 → 统一设置导出参数

开发模式（Dev Mode）

Figma 2023 推出的开发者专用模式

右上角切换: Design / Dev Mode

功能:
  查看元素属性 (CSS 样式)
  复制 CSS/ iOS / Android 代码
  查看间距、约束
  下载切图 (SVG/PNG)
  查看变体和组件属性
  标注 (Redlines)

CSS 代码生成示例

选中一个 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)

九、插件推荐

十、工作流示例

设计师

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 是设计师和开发者的桥梁。