本书对Figma和Framer的使用方法进行了详细讲解，为读者提供详细的图文说明，包括软件基础操作、使用团队组件库和界面设计等。本书第1、2、3章讲解Figma的使用，第4、5章讲解Figma社区和团队协作，第6章讲解界面设计，第7章讲解Framer的使用方法。本书附赠案例学习文件和在线视频，便于读者学习使用。
本书适合UI/UX设计师、设计团队和计划进入界面设计行业的读者学习与参考。
1.通过Figma和Framer介绍交互设计及多人实时协作设计，详细的图文说明+清晰的场景演示；
2.提供案例素材文件和效果源文件，供读者上手练习。配套在线视频，扫码即可下载或在线观看；
3.附赠两套设计师测试题，帮助读者把握自身特点和设计风格，形成个人设计特色。
武斌，美术学专业毕业，法学双学位，拥有五年互联网设计经验，两年区块链交易所设计经验，一年设计团队管理经验目前在一家海外交易所做 UX Design相关工作，使用Figma完成网站和App相关的设计，有自己的个人网站。
Figma+Framer打造更好的交互设计
第 1章 初识Figma
1.1 开启Figma之旅/11
1.1.1 Figma介绍/11
1.1.2 创建Figma账户/12
1.1.3 登录Figma/14
1.1.4 下载与安装Figma/14
1.1.5 给手机安装Figma Mirror App/16
1.1.6 使用Figma Mirror App预览设计文件和原型/17
1.2 你是这样的Figma/19
1.2.1 编辑器介绍/19
1.2.2 创建团队/24
1.2.3 新建项目/26
1.2.4 新建文件/27
1.2.5 导入Sketch文件/29
1.2.6 将文件导入Figma/30
1.2.7 添加/ 显示评论/31
1.2.8 分享设计文件和原型/31
1.2.9 合作设计/33
1.2.10 团队资源库/33
练习： 在“Design System”项目中创建一个名为“UI Kit”的文件/34
第 2章 Figma基础
2.1 文件浏览器/36
2.1.1 了解文件浏览器/36
2.1.2 查看文件/38
2.1.3 管理最近浏览的文件/39
2.1.4 在草稿、项目和账户中移动文件/40
2.2 关于文件的那些事儿/40
2.2.1 Figma中的文件/41
2.2.2 Figma中的页面/41
2.2.3 添加和管理页面/42
2.2.4 给文件设置封面/44
2.2.5 修改文件权限/45
2.2.6 删除文件/46
2.2.7 恢复已删除的文件/46
2.2.8 版本记录/47
2.3 形状和工具/48
2.3.1 Figma中的画框/48
2.3.2 组/51
2.3.3 形状工具/51
2.3.4 矢量网络/57
2.3.5 编辑对象/58
2.3.6 使用缩放工具调整对象大小/59
2.3.7 将参考线添加到画布或画框/60
2.3.8 布尔运算/61
实战：对两个矩形分别进行5种布尔运算/62
2.3.9 蒙版遮罩/63
2.4 图层/64
2.4.1 批量重命名图层/64
2.4.2 锁定和解锁图层/66
2.4.3 显示和隐藏图层/67
2.4.4 填充/68
2.4.5 阴影和模糊/70
实战：制作一个带有背景模糊效果的iPhone 8导航栏/73
2.4.6 混合模式/74
2.4.7 约束/75
2.4.8 布局网格/78
2.4.9 约束与布局网格的结合使用/83
实战：给移动端的顶层画框设置布局网格/84
2.5 颜色/85
2.5.1 配置颜色/85
2.5.2 查看和调整颜色/86
2.5.3 颜色吸取工具/87
2.6 文本/88
2.6.1 文本属性/88
2.6.2 美化文本/93
2.6.3 给文本添加链接、项目符号、图标字体/94
2.6.4 启用本地字体/98
2.6.5 管理缺少的字体/98
2.6.6 将文本转换为矢量路径/99
2.7 图片/101
2.7.1 添加图片/101
2.7.2 将GIF图片添加到原型/103
2.7.3 批量添加图片/103
2.7.4 裁剪图片/105
2.7.5 调整图片属性/105
2.8 排版/111
2.8.1 选择图层或对象/111
2.8.2 利用图层顺序调整图层的纵向位置/113
2.8.3 对齐/114
2.8.4 整理/115
2.8.5 调整对象的位置和尺寸/115
2.8.6 测量距离/117
2.8.7 对象之间的关系/118
2.8.8 使用智能选择排列对象/119
2.8.9 使用自动布局创建动态框架/122
第3章 Figma进阶
3.1 样式/130
3.1.1 了解样式/130
3.1.2 创建颜色、文本、效果和网格样式/130
3.1.3 将样式应用到对象上/131
3.1.4 管理和共享样式/133
实战：创建带有文字、颜色、效果和网格样式的文件，并发布到团队组件库/139
3.2 组件和变体/140
3.2.1 创建组件/141
实战：创建“单选框”组件/143
3.2.2 创建变体/144
3.2.3 命名和整理组件/155
3.2.4 创建组件的实例/156
3.2.5 切换组件的实例/157
3.2.6 组件和实例之间的“秘密”/159
3.3 原型/161
3.3.1 缓动/161
3.3.2 基础原型/164
3.3.3 设置展示原型的设备和起点/166
3.3.4 触发/168
3.3.5 动作/170
3.3.6 动画/171
3.3.7 构建完善的交互原型/172
3.3.8 固定滚动位置/175
3.3.9 溢出行为/176
3.3.10 智能动画/179
3.3.11 叠加原型/182
实战：创建叠加层/185
3.3.12 分享原型/185
3.3.13 在移动设备上查看原型/186
3.3.14 给原型添加评论/186
3.4 导出/188
3.4.1 导出PNG、JPG、SVG或PDF文件/188
3.4.2 图标切片的命名规则推荐/191
第4章 社区
4.1 插件/194
4.1.1 查找并安装插件/194
4.1.2 在编辑器中使用插件/196
4.1.3 管理插件/198
4.2 社区/200
4.2.1 浏览社区/200
4.2.2 使用社区文件/202
4.2.3 构建自己的社区页面/203
第5章 团队协作
5.1 团队组件库/207
5.1.1 将组件和样式发布到团队组件库/207
5.1.2 从团队组件库中删除文件/209
5.1.3 从已发布的团队组件库中删除部分样式和组件/210
5.2 检查面板的使用/211
5.2.1 了解检查面板/212
5.2.2 观察模式/214
第6章 使用Figma设计页面
6.1 基础样式和约束规则/216
6.1.1 布局网格样式规范/216
6.1.2 文本样式规范/217
6.1.3 颜色样式规范/219
6.1.4 效果样式规范/221
6.1.5 间距规范/223
6.1.6 边界半径规范/224
6.1.7 线条规范/225
6.1.8 图标规范/226
6.2 基础组件/227
6.2.1 按钮变体组件/228
6.2.2 输入框变体组件/228
6.2.3 文字组合变体组件/229
6.2.4 卡片变体组件/230
6.2.5 提示变体组件/232
6.2.6 导航栏/232
6.2.7 产品Logo/234
第7章 Framer应该这样用
7.1 仪表盘/236
7.1.1 仪表盘介绍/236
7.1.2 创建新的Framer项目/237
7.1.3 将Figma、Sketch或Framer Desktop文件导入Framer/238
7.1.4 草稿和最近浏览的作用/240
7.1.5 项目示例和教程讲解/241
7.1.6 善用存档/242
7.1.7 Framer的团队功能应该怎样使用/243
7.2 编辑器/247
7.2.1 工具栏/248
7.2.2 画布/256
7.2.3 图层面板/259
7.2.4 属性面板/261
7.3 图层/266
7.3.1 文本图层/266
7.3.2 堆叠图层/268
7.3.3 滚动图层/270
7.3.4 翻页图层/271
7.3.5 图形图层/272
7.4 开始设计/273
7.4.1 默认组件/273
7.4.2 配套包/281
7.4.3 分享颜色/283
7.4.4 模板/284
7.4.5 响应式设计/285
7.4.6 绘图模式/286
7.4.7 替换/287
7.5 使用Framer制作原型/288
7.5.1 预览/288
7.5.2 动画编辑器/290
7.5.3 自动过渡/292
7.5.4 魔术动画/293
7.5.5 组件画布/293
7.5.6 在组件画布中使用变量和变体/294
7.5.7 变量/295
7.5.8 变体/297
Figma快捷键/299
Framer快捷键/303
书单推荐
