Figma 设计协作¶

Figma 是全球最流行的设计协作工具，在浏览器中就能做 UI 设计、原型交互、设计系统，实时多人协作，2025 年 Config 大会一口气发布了 Draw、Sites、Make、Buzz 四个新产品，正在从设计工具进化为全能产品开发平台。

核心知识点¶

知识点	说明
工具定位	协作式 UI/UX 设计工具
核心优势	浏览器运行、实时协作、组件系统、原型交互
2025 新品	Figma Draw/Sites/Make/Buzz 四大新产品
定价	免费版（3 个项目）/ Professional $15/人/月
竞品	Sketch（Mac 独占）、Adobe XD（已停止更新）
适用对象	UI/UX 设计师、产品经理、前端开发、研究者

安装配置¶

=== 使用方式 ===

Web 版：https://figma.com（推荐，功能完整）
桌面版：Windows / Mac（从官网下载）
移动版：Figma Mirror（手机预览设计）

=== 注册 ===
1. 访问 figma.com
2. 用邮箱或 Google 账号注册
3. 创建 Team
4. 开始设计

=== 免费版包含 ===
- 最多 3 个 Figma 设计文件
- 无限个人文件
- 30 天版本历史
- 移动端预览

基本使用¶

1. 界面布局¶

=== Figma 界面 ===

左侧面板:
- Layers（图层）: 所有元素的层级结构
- Assets（资源）: 组件库

中间画布:
- Frame（画框）: 设计的容器
- 无限画布，自由缩放

右侧面板:
- Design（设计）: 属性设置（颜色、字号、间距）
- Prototype（原型）: 交互连接
- Inspect（检查）: 开发者查看 CSS 代码

=== 常用快捷键 ===
F         Frame 工具
R         矩形
O         椭圆
L         直线
T         文本
V         选择
K         缩放
I         取色器
Ctrl+G    分组
Ctrl+Alt+G  创建 Frame
Ctrl+D    复制

2. Frame（画框）¶

=== Frame 是 Figma 的核心容器 ===

创建 Frame:
1. 按 F 或从工具栏选择
2. 在画布上拖拽创建
3. 或选择预设尺寸:
   - iPhone 15 Pro: 393 × 852
   - iPad: 820 × 1180
   - Desktop: 1440 × 900
   - 自定义尺寸

=== Auto Layout（自动布局）===
选中 Frame → 右侧面板 → Auto Layout
- 自动排列子元素（水平/垂直）
- 自动适应内容大小
- 设置间距、内边距
- 类似 CSS 的 Flexbox
- 是 Figma 最强大的布局功能

3. 组件（Components）¶

=== 创建组件 ===

1. 设计好一个元素（如按钮）
2. 选中 → Ctrl+Alt+K → 创建组件
3. 原始的叫 "Main Component"（主组件）
4. 复制出来的叫 "Instance"（实例）
5. 修改主组件 → 所有实例自动更新

=== 变体（Variants）===
一个组件可以有多个状态：
- 按钮: Default / Hover / Active / Disabled
- 输入框: Empty / Filled / Error / Focused
在右侧面板切换变体

=== 使用场景 ===
- 按钮组件（不同尺寸、颜色、状态）
- 卡片组件（不同内容填充）
- 导航栏组件（不同页面高亮）
- 建立统一的设计系统

4. 原型交互¶

=== 创建可点击原型 ===

1. 切换到 Prototype 标签（右侧面板）
2. 选中按钮元素
3. 从蓝色圆点拖线到目标 Frame
4. 设置交互:
   - Trigger: On Click / On Hover / While Pressing
   - Action: Navigate to / Open Overlay / Scroll to
   - Animation: Dissolve / Move in / Push / Slide

5. 点击右上角 ▶ 进入预览模式
6. 像真实 App 一样点击交互

=== 分享原型 ===
右上角 Share → Copy Link
任何人打开链接都能体验原型
不需要安装 Figma

高级用法¶

1. 对生信/数据科学的用途¶

=== 非设计师也能用 Figma ===

1. 制作论文图表的版面排列
   - 在 Frame 中排列多张图片
   - 添加标注文字
   - 导出高清 PNG/PDF

2. 设计数据仪表盘 UI
   - 用 Figma 设计好界面
   - 交给前端开发实现
   - 或用 Figma Make 直接生成代码

3. 制作演示海报
   - A0 尺寸海报设计
   - 拖入图表和文字
   - 导出打印

4. 流程图和架构图
   - 用 FigJam（Figma 的白板工具）
   - 画分析流程、系统架构

2. Config 2025 新产品¶

=== Figma Draw ===
- 矢量绘图工具（类似 Illustrator）
- 画笔、纹理填充、形状构建器
- 覆盖 80% 的日常 Illustrator 功能

=== Figma Sites ===
- 把 Figma 设计直接发布为网站
- 自动 SSL、边缘缓存
- 响应式断点支持

=== Figma Make ===
- AI 驱动：文字描述 → 可用原型
- 从现有设计生成代码
- 语音转文字输入

=== Figma Buzz ===
- 品牌和营销团队的批量设计工具
- AI 辅助，保持品牌一致性

3. 开发者交接¶

=== Dev Mode（开发模式）===

开发者打开 Figma 链接 → 切换到 Dev Mode:
1. 自动生成 CSS 代码
2. 显示精确的尺寸、间距、颜色值
3. 一键复制 CSS 属性
4. 标注模式：测量元素间距
5. 资源导出：PNG / SVG / PDF

=== Code Connect（2025 新功能）===
- 把 Figma 组件连接到 GitHub 代码仓库
- AI 自动匹配设计稿与代码文件
- 设计更新 → 代码同步提醒

4. 插件推荐¶

=== 实用插件 ===

Unsplash           免费图片库
Remove BG          自动去背景
Iconify            图标库（10万+ 图标）
Lorem ipsum        占位文本生成
Charts             生成图表
Contrast Checker   颜色对比度检查
Figmotion          动画制作

常见报错与解决¶

报错信息	原因	解决方法
文件加载慢	图片太多太大	压缩图片或使用组件
无法编辑	只有查看权限	让文件所有者给编辑权限
字体缺失	本地没安装字体	安装 Figma Font Helper
导出模糊	导出倍数低	导出时选择 2x 或 3x

速查表¶

===== Figma 速查表 =====

# 工具快捷键
V         选择
F         Frame
R         矩形
O         椭圆
L         直线
T         文本
P         画笔
I         取色器

# 操作快捷键
Ctrl+G          分组
Ctrl+Alt+G      创建 Frame
Ctrl+Alt+K      创建组件
Ctrl+D          复制
Ctrl+Shift+H    显示/隐藏
Ctrl+R          重命名
Shift+A         Auto Layout

# 核心概念
Frame       = 设计容器（如手机屏幕）
Component   = 可复用设计元素（如按钮）
Instance    = 组件的副本
Variant     = 组件的不同状态
Auto Layout = 自动排列和响应式布局
Prototype   = 可点击的交互原型

# 导出
PNG / JPG / SVG / PDF
1x / 2x / 3x 倍率

# 协作
Share → 复制链接 → 任何人可查看/编辑
Comment → 在设计上添加评论
Dev Mode → 开发者查看 CSS 代码

# 定价
Free: 3 个项目
Professional: $15/人/月
Organization: $45/人/月
Enterprise: 定制